From 8855220d653ea00b8b0204316b0dd181658d8754 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Mon, 27 May 2013 13:37:46 -0400 Subject: [PATCH] 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: 2a462c67bc66f514930b57b055227e0871bea397 Former-commit-id: 7c58f2be89c05506829b6acebd6856f417a4f086 --- node/src/documents/collections/form.html | 2 +- node/src/documents/collections/menu.html | 4 +- node/src/documents/collections/message.html | 2 +- node/src/documents/collections/table.html | 2 +- node/src/documents/element.html | 2 +- node/src/documents/elements/button.html | 2 +- node/src/documents/elements/header.html | 2 +- node/src/documents/elements/icon.html | 2 +- node/src/documents/elements/label.html | 2 +- node/src/documents/elements/progress.html | 2 +- node/src/documents/elements/segment.html | 2 +- node/src/documents/elements/step.html | 2 +- node/src/documents/module.html | 2 +- node/src/documents/modules/checkbox.html | 2 +- node/src/documents/modules/dropdown.html | 2 +- node/src/documents/modules/shape.html | 2 +- node/src/documents/views/comment.html | 2 +- node/src/documents/views/feed.html | 2 +- node/src/documents/views/items.html | 2 +- node/src/files/javascript/semantic.js | 98 +++++----- node/src/files/stylesheets/semantic.css | 28 +-- node/src/layouts/default.html.eco | 189 ++++++++++---------- 22 files changed, 171 insertions(+), 184 deletions(-) diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html index f46702ce5..f92284ddd 100755 --- a/node/src/documents/collections/form.html +++ b/node/src/documents/collections/form.html @@ -21,7 +21,7 @@ type : 'UI Collection'
-
+
Collection Elements States diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index 2bbc63747..96cb6b609 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -14,7 +14,7 @@ type : 'UI Collection'
-
+
Collection Elements States @@ -239,7 +239,7 @@ type : 'UI Collection'

A pointing menu can also be vertical

-
+
Home diff --git a/node/src/documents/collections/message.html b/node/src/documents/collections/message.html index 2c97d73d5..640315135 100755 --- a/node/src/documents/collections/message.html +++ b/node/src/documents/collections/message.html @@ -15,7 +15,7 @@ type : 'UI Collection'
-
+
Standard States Variations diff --git a/node/src/documents/collections/table.html b/node/src/documents/collections/table.html index 35f3ff428..770536a21 100755 --- a/node/src/documents/collections/table.html +++ b/node/src/documents/collections/table.html @@ -19,7 +19,7 @@ type : 'UI Collection'
-
+
Standard States Variations diff --git a/node/src/documents/element.html b/node/src/documents/element.html index 36c906e11..5365b86b4 100755 --- a/node/src/documents/element.html +++ b/node/src/documents/element.html @@ -15,7 +15,7 @@ type : 'Semantic'
-
+
Definition Types
diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html index 79b2e2c5c..9dfca4476 100755 --- a/node/src/documents/elements/button.html +++ b/node/src/documents/elements/button.html @@ -14,7 +14,7 @@ type : 'UI Element'
-
+
Standard States Variations diff --git a/node/src/documents/elements/header.html b/node/src/documents/elements/header.html index ce54c0a73..8cd4e44d2 100755 --- a/node/src/documents/elements/header.html +++ b/node/src/documents/elements/header.html @@ -14,7 +14,7 @@ type : 'UI Element'
-
+
Standard States Variations diff --git a/node/src/documents/elements/icon.html b/node/src/documents/elements/icon.html index 06b142442..8f3344260 100755 --- a/node/src/documents/elements/icon.html +++ b/node/src/documents/elements/icon.html @@ -14,7 +14,7 @@ type : 'UI Element'
-
+
Standard States Variations diff --git a/node/src/documents/elements/label.html b/node/src/documents/elements/label.html index 863ff3a9f..234afb70a 100755 --- a/node/src/documents/elements/label.html +++ b/node/src/documents/elements/label.html @@ -15,7 +15,7 @@ type : 'UI Element'
-
+
Standard States Variations diff --git a/node/src/documents/elements/progress.html b/node/src/documents/elements/progress.html index 9f8c7c87d..85f2251c8 100755 --- a/node/src/documents/elements/progress.html +++ b/node/src/documents/elements/progress.html @@ -14,7 +14,7 @@ type : 'UI Element'
-
+
Standard States Variations diff --git a/node/src/documents/elements/segment.html b/node/src/documents/elements/segment.html index 06dcad444..fbcdfd393 100755 --- a/node/src/documents/elements/segment.html +++ b/node/src/documents/elements/segment.html @@ -14,7 +14,7 @@ type : 'UI Element'
-
+
Standard States Variations diff --git a/node/src/documents/elements/step.html b/node/src/documents/elements/step.html index 6450c721a..19575323c 100755 --- a/node/src/documents/elements/step.html +++ b/node/src/documents/elements/step.html @@ -15,7 +15,7 @@ type : 'UI Element'
-
+
Standard States Variations diff --git a/node/src/documents/module.html b/node/src/documents/module.html index 20bc36728..1d88d3494 100755 --- a/node/src/documents/module.html +++ b/node/src/documents/module.html @@ -15,7 +15,7 @@ type : 'Semantic'
-
+
Types Usage
diff --git a/node/src/documents/modules/checkbox.html b/node/src/documents/modules/checkbox.html index 41abd3ce7..ff37f2ccc 100755 --- a/node/src/documents/modules/checkbox.html +++ b/node/src/documents/modules/checkbox.html @@ -18,7 +18,7 @@ type : 'UI Module'
-
+
Standard Variations Behavior diff --git a/node/src/documents/modules/dropdown.html b/node/src/documents/modules/dropdown.html index 89c9b1e9d..82aa0aad1 100644 --- a/node/src/documents/modules/dropdown.html +++ b/node/src/documents/modules/dropdown.html @@ -18,7 +18,7 @@ type : 'UI Module'
-
+
Standard Variations Behavior diff --git a/node/src/documents/modules/shape.html b/node/src/documents/modules/shape.html index 1d310a282..d7f5f173d 100755 --- a/node/src/documents/modules/shape.html +++ b/node/src/documents/modules/shape.html @@ -19,7 +19,7 @@ type : 'UI Module'
-
+
Standard Examples Getting Started diff --git a/node/src/documents/views/comment.html b/node/src/documents/views/comment.html index e4b3978da..b6de7ed3f 100755 --- a/node/src/documents/views/comment.html +++ b/node/src/documents/views/comment.html @@ -14,7 +14,7 @@ type : 'UI View'
-
+
Standard Content Variations diff --git a/node/src/documents/views/feed.html b/node/src/documents/views/feed.html index 421af7636..d81ecc539 100755 --- a/node/src/documents/views/feed.html +++ b/node/src/documents/views/feed.html @@ -14,7 +14,7 @@ type : 'UI View'
-
+
Standard Content Variations diff --git a/node/src/documents/views/items.html b/node/src/documents/views/items.html index 06ab84b73..3fc2668f9 100755 --- a/node/src/documents/views/items.html +++ b/node/src/documents/views/items.html @@ -14,7 +14,7 @@ type : 'UI View'
-
+
Standard Content Variations diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index 37f9fc11d..228b300f2 100755 --- a/node/src/files/javascript/semantic.js +++ b/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' }) ; diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index bdc8d391a..4669d9a60 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/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; diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 948398f71..12c022e84 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -14,7 +14,7 @@ - + <%- @getBlock('meta').toHTML() %> @@ -48,7 +48,7 @@ - + <%- @getBlock('scripts').toHTML() %> @@ -56,7 +56,7 @@ - + @@ -66,116 +66,111 @@ -
-