Reverts menu system to sidr, too many overflow issues with using faked

touch menu. Fixed up secondary nav to be sexier, fixed up some issues
 with mobile layouts


Former-commit-id: 2a462c67bc
Former-commit-id: 7c58f2be89

node/src/documents/collections/form.html

@@ -21,7 +21,7 @@ type   : 'UI Collection'
 </div>
 <div class="main container">
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Collection</a>
       <a class="item">Elements</a>
       <a class="item">States</a>

node/src/documents/collections/menu.html

@@ -14,7 +14,7 @@ type   : 'UI Collection'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Collection</a>
       <a class="item">Elements</a>
       <a class="item">States</a>
@@ -239,7 +239,7 @@ type   : 'UI Collection'
   </div>
   <div class="example">
     <p>A pointing menu can also be vertical</p>
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">
         <i class="icon home"></i> Home
       </a>

node/src/documents/collections/message.html

@@ -15,7 +15,7 @@ type   : 'UI Collection'
 <div class="main container">
   
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a>

node/src/documents/collections/table.html

@@ -19,7 +19,7 @@ type   : 'UI Collection'
 <div class="main container">
   
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a>

node/src/documents/element.html

@@ -15,7 +15,7 @@ type   : 'Semantic'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Definition</a>
       <a class="item">Types</a>
     </div>

node/src/documents/elements/button.html

@@ -14,7 +14,7 @@ type   : 'UI Element'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a>

node/src/documents/elements/header.html

@@ -14,7 +14,7 @@ type   : 'UI Element'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a> 

node/src/documents/elements/icon.html

@@ -14,7 +14,7 @@ type   : 'UI Element'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a>

node/src/documents/elements/label.html

@@ -15,7 +15,7 @@ type   : 'UI Element'
 <div class="main container">
   
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a>

node/src/documents/elements/progress.html

@@ -14,7 +14,7 @@ type   : 'UI Element'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a> 

node/src/documents/elements/segment.html

@@ -14,7 +14,7 @@ type   : 'UI Element'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a> 

node/src/documents/elements/step.html

@@ -15,7 +15,7 @@ type   : 'UI Element'
 <div class="main container">
   
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a>

node/src/documents/module.html

@@ -15,7 +15,7 @@ type   : 'Semantic'
 <div class="main container">
     
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Types</a>
       <a class="item">Usage</a>
     </div>

node/src/documents/modules/checkbox.html

@@ -18,7 +18,7 @@ type   : 'UI Module'
 <div class="main container">
   
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">Variations</a>
       <a class="item">Behavior</a>

node/src/documents/modules/dropdown.html

@@ -18,7 +18,7 @@ type   : 'UI Module'
 <div class="main container">
   
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">Variations</a>
       <a class="item">Behavior</a>

node/src/documents/modules/shape.html

@@ -19,7 +19,7 @@ type   : 'UI Module'
 <div class="main container">
   
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">Examples</a>
       <a class="item">Getting Started</a>

node/src/documents/views/comment.html

@@ -14,7 +14,7 @@ type   : 'UI View'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">Content</a>
       <a class="item">Variations</a>

node/src/documents/views/feed.html

@@ -14,7 +14,7 @@ type   : 'UI View'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">Content</a>
       <a class="item">Variations</a>

node/src/documents/views/items.html

@@ -14,7 +14,7 @@ type   : 'UI View'
 <div class="main container">
 
   <div class="peek">
-    <div class="ui vertical pointing menu">
+    <div class="ui vertical pointing secondary menu">
       <a class="active item">Standard</a>
       <a class="item">Content</a>
       <a class="item">Variations</a>

node/src/files/javascript/semantic.js

@@ -26,8 +26,6 @@ semantic.ready = function() {
 
   // selector cache
   var
-    $content      = $('#content'),
-    $page         = $('#content').children('.page'),
     $ui           = $('.ui').not('.hover, .down'),
     $swap         = $('.theme.menu .item'),
     $menu         = $('.sidebar'),
@@ -51,7 +49,7 @@ semantic.ready = function() {
     $peekSubItem  = $peek.find('.item .menu .item'),
     $code         = $('div.code'),
 
-    sideMenu,
+    // alias
     handler
   ;
 
@@ -206,14 +204,7 @@ semantic.ready = function() {
 
     },
 
-    showSidebar: function() {
-      if( sideMenu.state().state=="left" ){
-        sideMenu.close();
-      } 
-      else {
-        sideMenu.open('left');
-      }
-      /*
+    movePeek: function() {
       if( $('.stuck .peek').size() > 0 ) {
         $('.peek')
           .toggleClass('pushed')
@@ -224,8 +215,6 @@ semantic.ready = function() {
           .removeClass('pushed')
         ;
       }
-      */
-
     },
 
     menu: {
@@ -276,6 +265,9 @@ semantic.ready = function() {
             $menu
               .removeClass('animating')
             ;
+            $headers
+              .removeClass('active')
+            ;
             $header
               .addClass('active')
             ;
@@ -356,28 +348,6 @@ semantic.ready = function() {
       .tablesort()
     ;
   }
-  $waypoints
-    .waypoint({
-      continuous : false,
-      context    : $page,
-      offset     : 100,
-      handler    : function(direction) {
-        console.log('here');
-        var
-          index = (direction == 'down')
-            ? $waypoints.index(this)
-            : ($waypoints.index(this) - 1 >= 0)
-              ? ($waypoints.index(this) - 1)
-              : 0
-        ;
-        $peekItem
-          .removeClass('active')
-          .eq( index )
-            .addClass('active')
-        ;
-      }
-    })
-  ;
 
   if(window.ace !== undefined) {
     $code
@@ -422,37 +392,51 @@ semantic.ready = function() {
     })
   ;
 
- 
-
-
-  sideMenu = new Snap({
-    element: document.getElementById('content'),
-    tapToClose: false,
-    disable: 'right',
-    maxPosition: 275,
-    minPosition: -275,
-    addBodyClasses: false
-  });
-  $content
-    .on('mousedown touchstart', function() {
-      $(this).addClass('drag');
-    })
-    .on('mouseup touchend', function() {
-      $(this).removeClass('drag');
-    })
-  ;
-
   $menu
-    .on('click', handler.showSidebar)
+    .sidr({
+      name: 'menu'
+    })
     .filter('.button')
+      .on('click', handler.movePeek)
       .on('mouseenter', handler.menu.mouseenter)
       .on('mouseleave', handler.menu.mouseleave)
   ;
 
+  $waypoints
+    .waypoint({
+      continuous : false,
+      offset     : 100,
+      handler    : function(direction) {
+        var
+          index = (direction == 'down')
+            ? $waypoints.index(this)
+            : ($waypoints.index(this) - 1 >= 0)
+              ? ($waypoints.index(this) - 1)
+              : 0
+        ;
+        $peekItem
+          .removeClass('active')
+          .eq( index )
+            .addClass('active')
+        ;
+      }
+    })
+  ;
+  $('body')
+    .waypoint({
+      handler: function() {
+        $peekItem
+          .removeClass('active')
+          .eq( $peekItem.size() - 1 )
+            .addClass('active')
+        ;
+      },
+      offset: 'bottom-in-view'
+     })
+  ;
   $peek
     .waypoint('sticky', {
       offset     : 85,
-      context    : $page,
       stuckClass : 'stuck'
     })
   ;

node/src/files/stylesheets/semantic.css

@@ -127,6 +127,7 @@ body#example {
   padding: 0px;
   color: #555555;
   text-rendering: optimizeLegibility;
+  min-width: 320px;
 }
 body > .content  {
 background: #FCFCFC url(../images/bg.jpg) repeat;
@@ -231,6 +232,7 @@ a:hover {
 }
 
 #example #menu {
+  display: none;
   width: 275px;
 
   border-radius: 0px;
@@ -518,26 +520,30 @@ a:hover {
   color: #888888;
 }
 
-#example .peek .menu :nth-child(1) {
-  border-left-color: #00B9F0;
+#example .peek .menu .active:nth-child(1) {
+  box-shadow: 0.2em 0em 0em #00B9F0;
+  color: #00B9F0;
 }
 #example .main h2.standard {
   color: #00B9F0;
 }
-#example .peek .menu :nth-child(2) {
-  border-left-color: #56BB73;
+#example .peek .menu .active:nth-child(2) {
+  box-shadow: 0.2em 0em 0em #56BB73;
+  color: #56BB73;
 }
 #example .main h2.states {
   color: #56BB73;
 }
-#example .peek .menu :nth-child(3) {
-  border-left-color: #EF3F49;
+#example .peek .menu .active:nth-child(3) {
+  box-shadow: 0.2em 0em 0em #EF3F49;
+  color: #EF3F49;
 }
 #example .main h2.variations {
   color: #EF3F49;
 }
-#example .peek .menu :nth-child(4) {
-  border-left-color: #A24096;
+#example .peek .menu .active:nth-child(4) {
+  box-shadow: 0.2em 0em 0em #A24096;
+  color: #A24096;
 }
 #example .main h2.group {
   color: #A24096;
@@ -778,7 +784,7 @@ a:hover {
 #example .example i.code {
   cursor: pointer;
   position: absolute;
-  top: 50px;
+  top: 2em;
   right: 0px;
   opacity: 0.2;
 
@@ -959,11 +965,13 @@ a:hover {
   }
 }
 
-@media only screen and (max-width : 450px) {
+@media only screen and (max-width : 600px) {
   #example .fixed .right.menu {
     display: inline-block;
     float: none;
   }
+  #example .fixed .developer,
+  #example .fixed .designer,
   #example .fixed .previous,
   #example .fixed .next {
     display: none;

node/src/layouts/default.html.eco

@@ -14,7 +14,7 @@
   <!-- Standard Meta -->
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="viewport" content="width=500" />
+  <meta name="viewport" content="width=device-width" />
 
   <!-- Site Properities -->
   <%- @getBlock('meta').toHTML() %>
@@ -48,7 +48,7 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/popup.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/shape.css">
 
-  <link rel="stylesheet" type="text/css" href="/stylesheets/library/snap.css">
+  <link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
   <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
 
   <%- @getBlock('scripts').toHTML() %>
@@ -56,7 +56,7 @@
   <script src="/javascript/library/jquery.js"></script>
   <script src="/javascript/library/easing.js"></script>
   <script src="/javascript/library/ace/ace.js"></script>
-  <script src="/javascript/library/snap.js"></script>
+  <script src="/javascript/library/sidr.js"></script>
   <script src="/javascript/library/waypoints.js"></script>
 
   <script src="/components/semantic/modules/behavior/state.js"></script>
@@ -66,116 +66,111 @@
 
 </head>
 <body id="example" class="<%= @document.css %>">
-  <div class="drawers">
-    <div class="ui large vertical inverted labeled icon left drawer menu" id="menu">
-      <div class="item"><a href="/index.html"><i class="inverted circular book icon"></i> <b>Introduction</b></a></div>
-      <div class="item"><a href="/download.html"><i class="inverted circular upload icon"></i> <b>Download</b></a></div>
-      <div class="item">
-        <a href="/element.html"><b>UI Elements</b></a>
-        <div class="menu">
-          <% for element in uiElements: %>
-            <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
-          <% end %>
-        </div>
+  <div class="ui large vertical inverted labeled icon menu" id="menu">
+    <div class="item"><a href="/index.html"><i class="inverted circular book icon"></i> <b>Introduction</b></a></div>
+    <div class="item"><a href="/download.html"><i class="inverted circular upload icon"></i> <b>Download</b></a></div>
+    <div class="item">
+      <a href="/element.html"><b>UI Elements</b></a>
+      <div class="menu">
+        <% for element in uiElements: %>
+          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
+        <% end %>
       </div>
-      <div class="item">
-        <a href="/collection.html"><b>UI Collections</b></a>
-        <div class="menu">
-          <% for element in uiCollections: %>
-            <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
-          <% end %>
-        </div>
+    </div>
+    <div class="item">
+      <a href="/collection.html"><b>UI Collections</b></a>
+      <div class="menu">
+        <% for element in uiCollections: %>
+          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
+        <% end %>
       </div>
-      <div class="item">
-        <a href="/module.html"><b>UI Modules</b></a>
-        <div class="menu">
-          <% for element in uiModules: %>
-            <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
-          <% end %>
-        </div>
+    </div>
+    <div class="item">
+      <a href="/module.html"><b>UI Modules</b></a>
+      <div class="menu">
+        <% for element in uiModules: %>
+          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
+        <% end %>
       </div>
-      <div class="item">
-        <a href="/view.html"><b>UI Views</b></a>
-        <div class="menu">
-          <% for element in uiViews: %>
-            <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
-          <% end %>
-        </div>
+    </div>
+    <div class="item">
+      <a href="/view.html"><b>UI Views</b></a>
+      <div class="menu">
+        <% for element in uiViews: %>
+          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
+        <% end %>
       </div>
-      <div class="item">
-        <a href="/specification.html"><i class="inverted circular asterisk icon"></i><b>Specification</b></a>
-        <div class="menu">
-          <% for element in uiSpecification: %>
-            <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
-          <% end %>
-        </div>
+    </div>
+    <div class="item">
+      <a href="/specification.html"><i class="inverted circular asterisk icon"></i><b>Specification</b></a>
+      <div class="menu">
+        <% for element in uiSpecification: %>
+          <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>"><%= element.title %></a>
+        <% end %>
       </div>
     </div>
   </div>
-  <div class="content" id="content">
-    <div class="ui fixed transparent inverted main menu">
-      <div class="container">
-        <a class="sidebar item"><i class="icon list layout"></i> Contents</a>
-        <div class="title item">
-          <b><%= @document.type %>:</b> <%= @document.title %>
-        </div>
-        <div class="icon previous link<%= if pageNumber is 1 then " disabled" %> item">
-          <% if pageNumber > 1 and pageCollection[pageNumber - 2]?: %>
-          <a href="<%= pageCollection[pageNumber - 2].url %>"><i class="left arrow icon"></i></a>
-          <% else: %>
-          <i class="left arrow icon"></i>
-          <% end %>
-        </div>
-        <div class="section ui simple dropdown item">
-          <span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
-          <div class="menu">
-            <% for element, index in pageCollection: %>
-              <div class="<%= if element.id is @document.id then 'active ' %>item">
-                <a href="<%= element.url %>"><%= (index+1) %>. <%= element.title %></a>
-              </div>
-            <% end %>
-          </div>
-        </div>
-        <div class="icon next <%= if pageNumber is pageCount then "disabled " %>link item">
-          <% if pageNumber isnt pageCount and pageCollection[pageNumber]?: %>
-          <a href="<%= pageCollection[pageNumber].url %>"><i class="right arrow icon"></i></a>
-          <% else: %>
-          <i class="right arrow icon"></i>
+
+  <div class="ui fixed transparent inverted main menu">
+    <div class="container">
+      <a class="sidebar item"><i class="icon list layout"></i> Contents</a>
+      <div class="title item">
+        <b><%= @document.type %>:</b> <%= @document.title %>
+      </div>
+      <div class="icon previous link<%= if pageNumber is 1 then " disabled" %> item">
+        <% if pageNumber > 1 and pageCollection[pageNumber - 2]?: %>
+        <a href="<%= pageCollection[pageNumber - 2].url %>"><i class="left arrow icon"></i></a>
+        <% else: %>
+        <i class="left arrow icon"></i>
+        <% end %>
+      </div>
+      <div class="section ui simple dropdown item">
+        <span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
+        <div class="menu">
+          <% for element, index in pageCollection: %>
+            <div class="<%= if element.id is @document.id then 'active ' %>item">
+              <a href="<%= element.url %>"><%= (index+1) %>. <%= element.title %></a>
+            </div>
           <% end %>
         </div>
-        <div class="right menu">
-          <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
-          <a class="popup designer item" title="Designer Mode">
-            <i class="icon paint"></i>
-          </a>
-          <a class="popup developer item" title="Developer Mode">
-            <i class="icon terminal"></i>
-          </a>
-          <% end %>
-          <a class="popup item" title="View project on Github" href="https://github.com/quirkyinc/semantic">
-            <i class="icon github"></i>
-          </a>
-          <!--
-          <div class="ui simple dropdown item">
-            <i class="icon tint"></i> Theme
-            <div class="theme menu">
-              <div class="active item" data-theme="flat">Flat</div>
-              <div class="item" data-theme="shaded">Shaded</div>
-              <div class="item" data-theme="classic">Classic</div>
-            </div>
+      </div>
+      <div class="icon next <%= if pageNumber is pageCount then "disabled " %>link item">
+        <% if pageNumber isnt pageCount and pageCollection[pageNumber]?: %>
+        <a href="<%= pageCollection[pageNumber].url %>"><i class="right arrow icon"></i></a>
+        <% else: %>
+        <i class="right arrow icon"></i>
+        <% end %>
+      </div>
+      <div class="right menu">
+        <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
+        <a class="popup designer item" title="Designer Mode">
+          <i class="icon paint"></i>
+        </a>
+        <a class="popup developer item" title="Developer Mode">
+          <i class="icon terminal"></i>
+        </a>
+        <% end %>
+        <a class="popup item" title="View project on Github" href="https://github.com/quirkyinc/semantic">
+          <i class="icon github"></i>
+        </a>
+        <!--
+        <div class="ui simple dropdown item">
+          <i class="icon tint"></i> Theme
+          <div class="theme menu">
+            <div class="active item" data-theme="flat">Flat</div>
+            <div class="item" data-theme="shaded">Shaded</div>
+            <div class="item" data-theme="classic">Classic</div>
           </div>
-          !-->
         </div>
+        !-->
       </div>
     </div>
+  </div>
     <div class="ui black huge sidebar right attached button">
       <i class="icon list layout"></i>
       <span class="text">Menu</span>
     </div>
-    <div class="page">
-      <%- @content %>
-    </div>
-  </div>
+  <%- @content %>
 </body>
 
-</html>
+</html>