[SOLVED] The Responsive UI in Meteor "Todos" Tutorial Example

help
1

The “Todos” example available at https://github.com/meteor/todos is really a cool app both in terms of functionality and web & mobile UI. I am trying to understand how responsiveness is implemented here. The HTML body contains mainly two elements; one is a section for displaying menu and the other is a div for displaying content. The “menu” is shown by default on a large screen than 639px but not shown on a narrower screen. This is very basic but here it is not obvious to me how they hide the “section” element on a narrow screen. Below I am attaching the corresponding html file “app-body.html” also the HTML code grabbed from Chrome Inspect Element.
Can I have your comments please?

The “app-body.html” is

<template name="App_body">
  {{#HammerTouchArea gestureMap=templateGestures}}
    <div id="container" class="{{menuOpen}} {{cordova}}">
      <section id="menu">
        <div class="language-toggle">
          {{#each language in languages}}
            {{#if isActiveLanguage language}}
              <span class="active">{{language}}</span>
            {{else}}
              <a href="#" class="js-toggle-language">{{language}}</a>
            {{/if}}
          {{/each}}
        </div>
        {{#if currentUser}}
          <div class="btns-group-vertical">
            <a href="#" class="js-user-menu btn-secondary">
              {{#if userMenuOpen}}
                <span class="icon-arrow-up"></span>
                {{else}}
                <span class="icon-arrow-down"></span>
              {{/if}}

              {{emailLocalPart}}
            </a>
            {{#if userMenuOpen}}
              <a class="js-logout btn-secondary">
                {{_ 'layouts.appBody.logout'}}
              </a>
            {{/if}}
          </div>
        {{else}}
          <div class="btns-group">
            <a href="{{pathFor 'signin'}}" class="btn-secondary">
              {{_ 'layouts.appBody.login'}}
            </a>
            <a href="{{pathFor 'join'}}" class="btn-secondary">
              {{_ 'layouts.appBody.join'}}
            </a>
          </div>
        {{/if}}

        <div class="list-todos">
          <a class="js-new-list link-list-new">
            <span class="icon-plus"></span>
            {{_ 'layouts.appBody.newList'}}
          </a>

          {{#each list in lists}}
            <a href="{{pathFor 'Lists.show' _id=list._id}}" title="{{list.name}}"
                class="list-todo {{activeListClass list}}">
              {{#if list.userId}}
                <span class="icon-lock"></span>
              {{/if}}

              {{#if list.incompleteCount}}
                <span class="count-list">{{list.incompleteCount}}</span>
              {{/if}}

              {{list.name}}
            </a>
          {{/each}}
        </div>
      </section>

      {{#unless connected}}
        <div class="notifications">
          <div class="notification">
            <span class="icon-sync"></span>
            <div class="meta">
              <div class="title-notification">
                {{_ 'layouts.appBody.tryingToConnect'}}
              </div>
              <div class="description">
                {{_ 'layouts.appBody.connectionIssue'}}
              </div>
            </div>
          </div>
        </div>
      {{/unless}}

      <div class="content-overlay"></div>

      <div id="content-container">
        {{#momentum plugin="fade"}}
          {{#if Template.subscriptionsReady}}
            {{> Template.dynamic template=main}}
          {{else}}
            {{> App_loading}}
          {{/if}}
        {{/momentum}}
      </div>
    </div>
  {{/HammerTouchArea}}
</template>

This is the HMTL from Chrome Inspect Element.

<div id="__blaze-root">
  <div class="hammer-touch-area" id="touch-aead52" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <div id="container" class="">
      <section id="menu">
        <div class="language-toggle">
              <span class="active">en</span>
              <a href="#" class="js-toggle-language">fr</a>
        </div>
          <div class="btns-group">
            <a href="/signin" class="btn-secondary">
              Sign In
            </a>
            <a href="/join" class="btn-secondary">
              Join
            </a>
          </div>
        <div class="list-todos">
          <a class="js-new-list link-list-new">
            <span class="icon-plus"></span>
            New List
          </a>

            <a href="/lists/FNx53NyLW7PuywEKi" title="Meteor Principles" class="list-todo active">
  
                <span class="count-list">7</span>
   

              Meteor Principles
            </a>
          
            <a href="/lists/6d6QemvwLr9uem4Pm" title="Languages" class="list-todo">
   
                <span class="count-list">9</span>

              Languages
            </a>
        </div>
      </section>

      <div class="content-overlay"></div>

      <div id="content-container">
        <div data-momentum="">
    
          <div class="nav-group">
            <a href="#" class="js-menu nav-item">
              <span class="icon-list-unordered" title="Show Menu">
              </span>
            </a>
          </div>

          <h1 class="js-edit-list title-page">
            <span class="title-wrapper">Meteor Principles</span>
            <span class="count-list">7</span>
          </h1>

          <div class="nav-group right">
            <div class="nav-item options-mobile">
              <select class="list-edit">
                <option disabled="">
                  Select an action
                </option>
                
                  <option value="private">Make Private</option>
                
                <option value="delete">Delete</option>
              </select>
              <span class="icon-cog"></span>
            </div>
            <div class="options-web">
              <a class="js-toggle-list-privacy nav-item">
                
                  <span class="icon-unlock" title="Make list private">
                  </span>
                
              </a>

              <a class="js-delete-list nav-item">
                <span class="icon-trash" title="Delete list">
                </span>
              </a>
            </div>
          </div>
        
  </div>

      <form class="js-todo-new todo-new input-symbol">
        <input type="text" placeholder="Type to add new tasks">
        <span class="icon-add js-todo-add"></span>
      </form>
    </nav>

    <div class="content-scrollable list-items">
      
        
          <div class="list-item">
    <label class="checkbox">
      <input type="checkbox" name="checked">
      <span class="checkbox-custom"></span>
    </label>
    <input type="text" placeholder="Task name">
    <a class="js-delete-item delete-item" href="#">
      <span class="icon-trash"></span>
    </a>
  </div>
        
          <div class="list-item">
    <label class="checkbox">
      <input type="checkbox" name="checked">
      <span class="checkbox-custom"></span>
    </label>
    <input type="text" placeholder="Task name">
    <a class="js-delete-item delete-item" href="#">
      <span class="icon-trash"></span>
    </a>
  </div>
        
          <div class="list-item">
    <label class="checkbox">
      <input type="checkbox" name="checked">
      <span class="checkbox-custom"></span>
    </label>
    <input type="text" placeholder="Task name">
    <a class="js-delete-item delete-item" href="#">
      <span class="icon-trash"></span>
    </a>
  </div>
        
          <div class="list-item">
    <label class="checkbox">
      <input type="checkbox" name="checked">
      <span class="checkbox-custom"></span>
    </label>
    <input type="text" placeholder="Task name">
    <a class="js-delete-item delete-item" href="#">
      <span class="icon-trash"></span>
    </a>
  </div>
        
          <div class="list-item">
    <label class="checkbox">
      <input type="checkbox" name="checked">
      <span class="checkbox-custom"></span>
    </label>
    <input type="text" placeholder="Task name">
    <a class="js-delete-item delete-item" href="#">
      <span class="icon-trash"></span>
    </a>
  </div>
        
          <div class="list-item">
    <label class="checkbox">
      <input type="checkbox" name="checked">
      <span class="checkbox-custom"></span>
    </label>
    <input type="text" placeholder="Task name">
    <a class="js-delete-item delete-item" href="#">
      <span class="icon-trash"></span>
    </a>
  </div>
        
          <div class="list-item">
    <label class="checkbox">
      <input type="checkbox" name="checked">
      <span class="checkbox-custom"></span>
    </label>
    <input type="text" placeholder="Task name">
    <a class="js-delete-item delete-item" href="#">
      <span class="icon-trash"></span>
    </a>
  </div>
    </div>
  </div>
  </div>
 </div>
</div>
2

have you checked out css @media queries?

3

I forgot to attach the less files. I played with them but could not figure out … :confused:
The less files are as follows;

@import './utils.less';

@menu-width: 270px;
@column: 5.55555%;

body {
  .position(absolute, 0, 0, 0, 0);
  background-color: #315481;
  background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#container {
  .position(absolute, 0, 0, 0, 0);

  @media screen and (min-width: 60em) {
    left: @column;
    right: @column;
  }

  @media screen and (min-width: 80em) {
    left: 2*@column;
    right: 2*@column;
  }

  // Hide anything offscreen
  overflow: hidden;
}

#menu {
  .position(absolute, 0, 0, 0, 0, @menu-width);
}

#content-container {
  .position(absolute, 0, 0, 0, 0);
  transition: all 200ms ease-out;
  transform: translate3d(0, 0, 0);
  background: @color-tertiary;
  opacity: 1;

  .page {
    .position(absolute, 0, 0, 0, 0);
  }

  @media screen and (min-width: 40em) {
    left: @menu-width;
  }

  .content-scrollable {
    .position(absolute, 0, 0, 0, 0);
    transform: translate3d(0, 0, 0);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  // Toggle menu on mobile
  .menu-open & {
    transform: translate3d(@menu-width, 0, 0);
    opacity: .85;
    left: 0;

    @media screen and (min-width: 40em) {
      // Show menu on desktop, negate .menu-open
      transform: translate3d(0, 0, 0); //reset transform and use position properties instead
      opacity: 1;
      left: @menu-width;
    }
  }
}

// Transparent screen to prevent interactions on content when menu is open
.content-overlay {
  .position(absolute, 0, 0, 0, 0);
  cursor: pointer;

  .menu-open & {
    transform: translate3d(@menu-width, 0, 0);
    z-index: 1;
  }

  // Hide overlay on desktop
  @media screen and (min-width: 40em) { display: none; }
}

And the menu.less is

@import './utils.less';

#menu {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  .language-toggle {
    text-align: center;
    margin-top: 1em;
    font-size: .8rem;
    .active {
      border-bottom: 1px solid;
      padding-bottom: 1px;
      color: @color-secondary;
    }
  }

  .btns-group,
  .btns-group-vertical {
    margin: 1em auto 2em;
    width: 80%;

    .btn-secondary {
      .font-s1;
      padding-top: .5em;
      padding-bottom: .5em;
    }
  }

  .btns-group-vertical .btn-secondary {
    .force-wrap;
    padding-right: 2.5em;
    text-align: left;
    text-indent: 0;
    white-space: normal; // Resets wrapping
    width: 100%;

    & + .btn-secondary {
      margin-top: .5rem;

      &:before {
        .position(absolute, -.5rem, 50%, auto, auto, 1px, .5rem);
        background: lighten(#517096, 5%);
        content: '';
      }
    }

    [class^="icon-"],
    [class*=" icon-"] {
      .position(absolute, .5em, .5em, auto, auto);
      line-height: 20px;
    }
  }

  .list-todos {
    a {
      box-shadow: rgba(255,255,255,.15) 0 1px 0 0;
      display: block;
      line-height: 1.5em;
      padding: .75em 2.5em;
      position: relative;
    }

    .count-list {
      transition: all 200ms ease-in;
      background: rgba(255,255,255,.1);
      border-radius: 1em;
      float: right;
      font-size: .7rem;
      line-height: 1;
      margin-top: .25rem;
      margin-right: -1.5em;
      padding: .3em .5em;
    }

    [class^="icon-"],
    [class*=" icon-"] {
      .font-s2;
      float: left;
      margin-left: -1.5rem;
      margin-right: .5rem;
      margin-top: .1rem;
      width: 1em;
    }

    .icon-lock {
      .font-s1;
      margin-top: .2rem;
      opacity: .8;
    }

    .list-todo {
      color: rgba(255,255,255,.4);

      &:hover,
      &:active,
      &.active {
        color: @color-empty;
        .count-list { background: @color-primary; }
      }

      .cordova &:hover {
        // Prevent hover states from being noticeable on Cordova apps
        color: rgba(255,255,255,.4);
      }
    }
  }
}