Changes behavior of day buttons in tracks & rooms

fossasia · May 4, 2017 · f4faabf · f4faabf
1 parent 3957a99
commit f4faabf
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 66 deletions.
diff --git a/src/backend/_scss/application.scss b/src/backend/_scss/application.scss
@@ -413,7 +413,6 @@ a {
 .show-button-filter {
   display: inline-block;
   padding-top: 6px;
-  margin : 10px;
 }
 
 .event {
@@ -1441,7 +1440,9 @@ a {
 }
 
 .tabs {
-  margin-left: -15px;
+  margin-top: 10px;
+  line-height: 20px;
+  padding: 0;
 }
 
 .tabs-nav {
@@ -1456,7 +1457,7 @@ a {
   color: $white;
   flex: 1;
   margin-right: 4px;
-  padding: 12px;
+  padding: 10px;
   text-align: center;
   transition: color 0.3s;
 
@@ -1508,6 +1509,7 @@ a {
   display: none;
 
   &.is-active {
+    padding: 5px;
     display: block;
   }
 }
@@ -1575,7 +1577,7 @@ a.skip:hover {
 .view-button {
   display: inline-block;
   button {
-    margin : 5px 10px 10px 10px;
+    margin : 5px 5px 10px 5px;
     background-color : $white-gray;
     color : $black;
   }
@@ -1588,7 +1590,7 @@ a.skip:hover {
 }
 
 .calendar {
-  margin-top: 20px;
+  margin-top: 13px;
   display: block;
 }
 

diff --git a/src/backend/assets/js/tabs.js b/src/backend/assets/js/tabs.js
@@ -3,20 +3,24 @@ var tabs, i, myTabs;
 
 tabs = function(options) {
   var goToTab, handleClick, init;
-  var el = document.querySelector(options.el);
-  var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);
-  var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
+  var el = $(options.el);
+  var tabNavigationLinks = $(el).find(options.tabNavigationLinks);
+  var tabContentContainers = $(el).find(options.tabContentContainers);
   var activeIndex = -1;
   var initCalled = false;
+  var date = $('.date-filter').first();
 
   goToTab = function(index) {
     if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
       if(activeIndex >= 0) {
-        tabNavigationLinks[activeIndex].classList.remove('is-active');
-        tabContentContainers[activeIndex].classList.remove('is-active');
+        $(tabNavigationLinks[activeIndex]).removeClass('is-active');
+        $(tabContentContainers[activeIndex]).removeClass('is-active');
       }
-      tabNavigationLinks[index].classList.add('is-active');
-      tabContentContainers[index].classList.add('is-active');
+      date = $('.' + $(tabNavigationLinks[index]).attr('id'));
+      $('.date-filter').addClass('hide');
+      $(date).removeClass('hide');
+      $(tabNavigationLinks[index]).addClass('is-active');
+      $(tabContentContainers[index]).addClass('is-active');
       activeIndex = index;
     }
   };
@@ -28,10 +32,11 @@ tabs = function(options) {
   };
   init = function() {
     var link;
+    $(date).show();
 
     if (!initCalled) {
       initCalled = true;
-      el.classList.remove('no-js');
+      $(el).removeClass('no-js');
       for (i = 0; i < tabNavigationLinks.length; i++) {
         link = tabNavigationLinks[i];
         handleClick(link, i);

diff --git a/src/backend/templates/partials/subnavbar.hbs b/src/backend/templates/partials/subnavbar.hbs
@@ -1,27 +1,27 @@
 {{#if flag}}
-<div id="tabs" class="tabs no-js">
-   <div class="tabs-nav">
+<span id="tabs" class="col-md-6 tabs no-js">
+   <span class="tabs-nav">
       {{#days}}
-      <a href="#" class="tabs-nav-link">{{caption}}</a>
+      <a id="{{firstSlug}}" href="#" class="tabs-nav-link">{{caption}}</a>
       {{/days}}
-   </div>
+   </span>
    {{#days}}
-   <div class="tab">
-      <div class="tab-content">{{#tracks}}<a href = "./tracks.html#{{slug}}">{{title}}  </a>{{/tracks}}</div>
-   </div>
+   <span class="tab">
+      <span class="tab-content">{{#tracks}}<a href = "./tracks.html#{{slug}}">{{title}}  </a>{{/tracks}}</span>
+   </span>
    {{/days}}
-</div>
+</span>
 {{else}}
-<div id="tabs" class="tabs no-js">
-   <div class="tabs-nav">
-      {{#timeList}}
-      <a href="#" class="tabs-nav-link">{{date}}</a>
-      {{/timeList}}
-   </div>
+<span id="tabs" class="col-md-6 tabs no-js">
+   <span class="tabs-nav">
+      {{#roomsinfo}}
+      <a id="{{slug}}" href="#" class="tabs-nav-link">{{date}}</a>
+      {{/roomsinfo}}
+   </span>
    {{#roomsinfo}}
-   <div class="tab">
-     <div class="tab-content">{{#venue}}{{#if venue}}<a href = "./rooms.html#venue-{{../slug}}-{{slug}}">{{venue}} {{/if}} </a>{{/venue}}</div>
-   </div>
+   <span class="tab">
+     <span class="tab-content">{{#venue}}{{#if venue}}<a  href = "./room.html#venue-{{../slug}}-{{slug}}">{{venue}} {{/if}} </a>{{/venue}}</span>
+   </span>
    {{/roomsinfo}}
-</div>
+</span>
 {{/if}}
diff --git a/src/backend/templates/rooms.hbs b/src/backend/templates/rooms.hbs
@@ -64,9 +64,7 @@
         text across the page.
         --------------------------------------------------------------- -->
     <p class="date-list">
-        {{#timeList}}
-          <span class="date-pill"><a href="./rooms.html#{{slug}}"> {{date}} </a></span>
-        {{/timeList}}
+        {{> subnavbar flag = 0}}
         <span class="show-button-filter" >
           <button class = "btn btn-primary" id = "starred" >Show Starred</button>
         </span>
@@ -77,13 +75,15 @@
     <div id="session-list" class="container">
       <div class="row">
         <div id="content-block" class="col-md-9">
-                      {{> subnavbar flag = 0}}
           <div id="track-list">
             {{#roomsinfo}}
-            <div class="date-filter" id="rooms-list">
+            {{#if @first}}
+              <div class="{{slug}} date-filter" id="rooms-list">
+              {{else}}
+              <div class="{{slug}} date-filter hide" id="rooms-list">
+            {{/if}}
                 <div class="row paddingzero">
                   <div class="col-md-12 paddingzero">
-                    <a class="anchor" id="{{slug}}"></a>
                     <h5 class="text">{{date}}</h4>
                   </div>
                 </div>

diff --git a/src/backend/templates/schedule.hbs b/src/backend/templates/schedule.hbs
@@ -62,9 +62,14 @@
         text across the page.
         --------------------------------------------------------------- -->
     <p class="date-list">
-    {{#timeList}}
-      <span class="{{slug}} date-pill"><a class="{{slug}} date-button" href="./schedule.html#{{slug}}"> {{date}} </a></span>
-    {{/timeList}}
+      <span id="tabs" class="col-md-6 tabs no-js">
+         <span class="tabs-nav">
+            {{#timeList}}
+            <a id="{{slug}}" href="#" class="{{slug}} date-button tabs-nav-link">{{date}}</a>
+            {{/timeList}}
+         </span>
+      </span>
+    </p>
     <span class = "show-button-filter">
       <button class = "btn btn-primary" id = "starred" >Show Starred</button>
     </span>
@@ -84,9 +89,12 @@
         <div id="track-list" class="container">
 
           {{#timeList}}
-          <div class="day-filter">
+          {{#if @first}}
+            <div class="{{slug}} day-filter">
+            {{else}}
+            <div class="{{slug}} day-filter hide">
+          {{/if}}
             <div class="col-md-12 paddingzero">
-              <a class="anchor" id="{{slug}}"></a>
               <h4 class="text">{{date}}</h4>
             </div>
             {{#times}}
@@ -211,18 +219,17 @@
         </div>
       </div>
       <div id="content-block" class="col-md-12 calendar-view hide">
+        <div id="track-list" class="container">
         {{#roomsinfo}}
           {{#if @first}}
             <div class="{{slug}} calendar">
             {{else}}
             <div class="{{slug}} calendar hide">
-            {{/if}}
-              <div class="row paddingzero">
-                <div class="col-md-12 paddingzero">
-                  <a class="anchor" id="{{slug}}"></a>
-                  <h5 class="text">{{date}}</h4>
-                </div>
-              </div>
+          {{/if}}
+            <div class="col-md-12 paddingzero">
+              <a class="anchor" id="{{slug}}"></a>
+              <h5 class="text">{{date}}</h4>
+            </div>
               <div class="calendar-content">
                 <div class="times">
                   <div class="time" style="height: {{{timeToPixel}}}px">
@@ -354,6 +361,7 @@
               </div>
             </div>
           {{/roomsinfo}}
+        </div>
       </div>
       <div class="track-names">
       {{#tracknames}}
@@ -494,18 +502,25 @@
           });
 
           $('.date-button').click(function() {
-            if(isCalendarView) {
               let className = $(this).attr('class').split(' ')[0];
-
-              $('.calendar').each(function () {
-                if($(this).attr('class').split(' ')[0] === className) {
-                  $(this).removeClass('hide');
-                } else {
-                  $(this).addClass('hide');
-                }
-              });
-            }
-          });
+              if(isCalendarView) {
+                $('.calendar').each(function () {
+                  if($(this).attr('class').split(' ')[0] === className) {
+                    $(this).removeClass('hide');
+                  } else {
+                    $(this).addClass('hide');
+                  }
+                });
+              } else {
+                $('.day-filter').each(function () {
+                  if($(this).attr('class').split(' ')[0] === className) {
+                    $(this).removeClass('hide');
+                  } else {
+                    $(this).addClass('hide');
+                  }
+                });
+              }
+            });
 
           $('#calendar').click(function() {
             isCalendarView = true;

diff --git a/src/backend/templates/tracks.hbs b/src/backend/templates/tracks.hbs
@@ -62,9 +62,7 @@
       text across the page.
       --------------------------------------------------------------- -->
   <p class="date-list">
-    {{#days}}
-      <span class="date-pill"><a href="./tracks.html#{{firstSlug}}"> {{caption}} </a></span>
-    {{/days}}
+    {{> subnavbar flag = 1}}
     <span class="show-button-filter">
             <button class="btn btn-primary" id="starred">Show Starred</button>
           </span>
@@ -75,13 +73,15 @@
   <div id="session-list" class="container">
     <div class="row">
       <div id="content-block" class="col-md-9">
-        {{> subnavbar flag = 1}}
         <div id="track-list">
           {{#days}}
-            <div class="date-filter">
+            {{#if @first}}
+              <div class="{{firstSlug}} date-filter">
+              {{else}}
+              <div class="{{firstSlug}} date-filter hide">
+            {{/if}}
               <div class="row paddingzero">
                 <div class="col-md-12 paddingzero">
-                  <a class="anchor" id="{{firstSlug}}"></a>
                   <h5 class="text">{{caption}}</h4>
                 </div>
               </div>