From 4106715fdea6a71aa627047b53947fd05d7e733f Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 27 Aug 2014 21:09:03 -0400 Subject: [PATCH] Change default sidebar settings for docs --- server/files/javascript/semantic.js | 2 +- server/files/stylesheets/semantic.css | 19 ++++++ server/layouts/default.html.eco | 98 ++++++++++++++------------- src/definitions/collections/menu.less | 32 ++++----- src/definitions/modules/sidebar.js | 6 +- 5 files changed, 91 insertions(+), 66 deletions(-) diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index aef0c2579..8d9fad6ed 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -837,7 +837,7 @@ semantic.ready = function() { ; $menu .sidebar({ - animation: 'slide along' + animation: 'scale down' }) .sidebar('attach events', '.launch.button, .view-ui.button, .launch.item') .sidebar('attach events', $hideMenu, 'hide') diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 6d79fadaf..3f4174117 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -871,7 +871,26 @@ body.guide .main.container > * { #example .settings.table td:nth-child(2n) { width: 100px; } +#example.pushed { + background: #333333 url(../images/icons.png) !important; + -webkit-animation-name: masthead; + -moz-animation-name: masthead; + -o-animation-name: masthead; + animation-name: masthead; + + -webkit-animation-duration: 30s; + -moz-animation-duration: 30s; + -ms-animation-duration: 30s; + -o-animation-duration: 30s; + animation-duration: 30s; + +} +#example.pushed .page .main.menu { + top: -1px; + left: -1px; + width: calc(100% + 2px); +} /* example code reskin */ #example div.code.hide { diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index c15fe7698..6acbada11 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -197,59 +197,63 @@ -
-
- Content -
- <%= @document.type %>: <%= @document.title %> -
- <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %> - - <% else: %> -
- <% end %> -
- <%= "#{pageNumber} of #{pageCount}" %> -
- <% for element, index in currentCollection: %> - - <%= (index+1) %>. <%= element.title %> - +
+
+
+
+ Content +
+ <%= @document.type %>: <%= @document.title %> +
+ <% if pageNumber > 1 and currentCollection[pageNumber - 2]?: %> + + <% else: %> +
<% end %> +
+ <%= "#{pageNumber} of #{pageCount}" %> +
+ <% for element, index in currentCollection: %> + + <%= (index+1) %>. <%= element.title %> + + <% end %> +
+
+ <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %> + + <% else: %> +
+ <% end %> +
+
+ +
+ <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %> + + + + + + + <% end %> + + + + +
- <% if pageNumber isnt pageCount and currentCollection[pageNumber]?: %> - - <% else: %> -
- <% end %> -
-
- -
- <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %> - - - - - - - <% end %> - - - - +
+ + Menu
+ <%- @content %>
-
- - Menu -
- <%- @content %> diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 3e272c89e..800064858 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -1301,59 +1301,59 @@ /* Blue */ .ui.inverted.blue.menu { - background-color: @blue; + background-color: @lightBlue; } .ui.inverted.blue.pointing.menu .active.item:after { - background-color: @blue; + background-color: @lightBlue; } /* Green */ .ui.inverted.green.menu { - background-color: @green; + background-color: @lightGreen; } .ui.inverted.green.pointing.menu .active.item:after { - background-color: @green; + background-color: @lightGreen; } /* Orange */ .ui.inverted.orange.menu { - background-color: @orange; + background-color: @lightOrange; } .ui.inverted.orange.pointing.menu .active.item:after { - background-color: @orange; + background-color: @lightOrange; } /* Pink */ .ui.inverted.pink.menu { - background-color: @pink; + background-color: @lightPink; } .ui.inverted.pink.pointing.menu .active.item:after { - background-color: @pink; + background-color: @lightPink; } /* Purple */ .ui.inverted.purple.menu { - background-color: @purple; + background-color: @lightPurple; } .ui.inverted.purple.pointing.menu .active.item:after { - background-color: @purple; + background-color: @lightPurple; } /* Red */ .ui.inverted.red.menu { - background-color: @red; + background-color: @lightRed; } .ui.inverted.red.pointing.menu .active.item:after { - background-color: #F16883; + background-color: @lightRed; } /* Teal */ .ui.inverted.teal.menu { - background-color: @teal; + background-color: @lightTeal; } .ui.inverted.teal.pointing.menu .active.item:after { - background-color: @teal; + background-color: @lightTeal; } /* Yellow */ .ui.inverted.yellow.menu { - background-color: @yellow; + background-color: @lightYellow; } .ui.inverted.yellow.pointing.menu .active.item:after { - background-color: @yellow; + background-color: @lightYellow; } diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index d87c8f491..d1959aeb5 100755 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -131,7 +131,9 @@ $.fn.sidebar = function(parameters) { setup: { layout: function() { - if($(selector.pusher).size() === 0) { + $pusher = $(selector.pusher); + + if($pusher.size() === 0) { module.debug('Adding wrapper element for sidebar'); module.verbose('Setting up page structure for sidebar'); $pusher = $('
'); @@ -664,7 +666,7 @@ $.fn.sidebar.settings = { sidebar : 'body > .ui.sidebar', pusher : 'body > .pusher', page : 'body > .pusher > .page', - omitted : '.ui.popup, .ui.modal, .ui.nag' + omitted : '.ui.modal, .ui.nag' }, error : {