From 25e10ac058cb2efd11649c6e7fe172e55d51c32b Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 21 Aug 2013 18:01:22 -0400 Subject: [PATCH] Adds definition style example to tables, fixes and adds examples of sidebar directions --- build/minified/modules/sidebar.js | 50 +++++++-------- build/packaged/modules/sidebar.js | 50 +++++++-------- build/uncompressed/collections/table.css | 3 + build/uncompressed/modules/sidebar.css | 8 +-- build/uncompressed/modules/sidebar.js | 50 +++++++-------- node/src/documents/modules/sidebar.html | 64 +++++++++++++++++-- .../components/semantic/collections/table.css | 3 + .../components/semantic/modules/sidebar.css | 8 +-- .../components/semantic/modules/sidebar.js | 50 +++++++-------- src/collections/table.less | 4 +- src/modules/sidebar.js | 50 +++++++-------- src/modules/sidebar.less | 8 +-- 12 files changed, 203 insertions(+), 145 deletions(-) diff --git a/build/minified/modules/sidebar.js b/build/minified/modules/sidebar.js index a1359e665..58a9f9d58 100644 --- a/build/minified/modules/sidebar.js +++ b/build/minified/modules/sidebar.js @@ -136,29 +136,18 @@ $.fn.sidebar = function(parameters) { bodyCSS: function() { var style = '', - moduleSize = 0, - direction = module.get.direction() + direction = module.get.direction(), + moduleSize = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + style = '' + + '' ; - if(module.is.vertical()) { - moduleSize = $module.outerHeight(); - style = '' - + '' - ; - } - else { - moduleSize = $module.outerWidth(); - style = '' - + '' - ; - } $head.append(style); module.refresh(); module.debug('Adding body css to head', $style); @@ -175,7 +164,11 @@ $.fn.sidebar = function(parameters) { $module.removeClass(className.active); }, pushed: function() { - $body.removeClass(className.pushed); + module.verbose('Removing body push state', module.get.direction()); + $body + .removeClass(className[ module.get.direction() ]) + .removeClass(className.pushed) + ; } }, @@ -184,7 +177,11 @@ $.fn.sidebar = function(parameters) { $module.addClass(className.active); }, pushed: function() { - $body.addClass(className.pushed); + module.verbose('Adding body push state', module.get.direction()); + $body + .addClass(className[ module.get.direction() ]) + .addClass(className.pushed) + ; } }, @@ -433,7 +430,10 @@ $.fn.sidebar.settings = { className: { active : 'active', pushed : 'pushed', - top : 'top' + top : 'top', + left : 'left', + right : 'right', + bottom : 'bottom' }, error : { diff --git a/build/packaged/modules/sidebar.js b/build/packaged/modules/sidebar.js index a1359e665..58a9f9d58 100644 --- a/build/packaged/modules/sidebar.js +++ b/build/packaged/modules/sidebar.js @@ -136,29 +136,18 @@ $.fn.sidebar = function(parameters) { bodyCSS: function() { var style = '', - moduleSize = 0, - direction = module.get.direction() + direction = module.get.direction(), + moduleSize = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + style = '' + + '' ; - if(module.is.vertical()) { - moduleSize = $module.outerHeight(); - style = '' - + '' - ; - } - else { - moduleSize = $module.outerWidth(); - style = '' - + '' - ; - } $head.append(style); module.refresh(); module.debug('Adding body css to head', $style); @@ -175,7 +164,11 @@ $.fn.sidebar = function(parameters) { $module.removeClass(className.active); }, pushed: function() { - $body.removeClass(className.pushed); + module.verbose('Removing body push state', module.get.direction()); + $body + .removeClass(className[ module.get.direction() ]) + .removeClass(className.pushed) + ; } }, @@ -184,7 +177,11 @@ $.fn.sidebar = function(parameters) { $module.addClass(className.active); }, pushed: function() { - $body.addClass(className.pushed); + module.verbose('Adding body push state', module.get.direction()); + $body + .addClass(className[ module.get.direction() ]) + .addClass(className.pushed) + ; } }, @@ -433,7 +430,10 @@ $.fn.sidebar.settings = { className: { active : 'active', pushed : 'pushed', - top : 'top' + top : 'top', + left : 'left', + right : 'right', + bottom : 'bottom' }, error : { diff --git a/build/uncompressed/collections/table.css b/build/uncompressed/collections/table.css index 5eba95b9c..b9aa955ae 100644 --- a/build/uncompressed/collections/table.css +++ b/build/uncompressed/collections/table.css @@ -377,6 +377,9 @@ /*-------------- Definition ---------------*/ +.ui.definition.table { + border: 1px solid rgba(0, 0, 0, 0.1); +} .ui.definition.table tr { border-top: 1px solid rgba(0, 0, 0, 0.1); } diff --git a/build/uncompressed/modules/sidebar.css b/build/uncompressed/modules/sidebar.css index ee843ac02..d2fd0133a 100644 --- a/build/uncompressed/modules/sidebar.css +++ b/build/uncompressed/modules/sidebar.css @@ -48,8 +48,8 @@ body { transform: translateX(0%); } .ui.top.sidebar { - width: 100%; - height: 40px; + width: 100% !important; + height: 40px !important; overflow: hidden; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); @@ -58,8 +58,8 @@ body { transform: translateY(-100%); } .ui.bottom.sidebar { - width: 100%; - height: 40px; + width: 100% !important; + height: 40px !important; top: 100%; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); diff --git a/build/uncompressed/modules/sidebar.js b/build/uncompressed/modules/sidebar.js index a1359e665..58a9f9d58 100644 --- a/build/uncompressed/modules/sidebar.js +++ b/build/uncompressed/modules/sidebar.js @@ -136,29 +136,18 @@ $.fn.sidebar = function(parameters) { bodyCSS: function() { var style = '', - moduleSize = 0, - direction = module.get.direction() + direction = module.get.direction(), + moduleSize = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + style = '' + + '' ; - if(module.is.vertical()) { - moduleSize = $module.outerHeight(); - style = '' - + '' - ; - } - else { - moduleSize = $module.outerWidth(); - style = '' - + '' - ; - } $head.append(style); module.refresh(); module.debug('Adding body css to head', $style); @@ -175,7 +164,11 @@ $.fn.sidebar = function(parameters) { $module.removeClass(className.active); }, pushed: function() { - $body.removeClass(className.pushed); + module.verbose('Removing body push state', module.get.direction()); + $body + .removeClass(className[ module.get.direction() ]) + .removeClass(className.pushed) + ; } }, @@ -184,7 +177,11 @@ $.fn.sidebar = function(parameters) { $module.addClass(className.active); }, pushed: function() { - $body.addClass(className.pushed); + module.verbose('Adding body push state', module.get.direction()); + $body + .addClass(className[ module.get.direction() ]) + .addClass(className.pushed) + ; } }, @@ -433,7 +430,10 @@ $.fn.sidebar.settings = { className: { active : 'active', pushed : 'pushed', - top : 'top' + top : 'top', + left : 'left', + right : 'right', + bottom : 'bottom' }, error : { diff --git a/node/src/documents/modules/sidebar.html b/node/src/documents/modules/sidebar.html index 3499ea60c..e1117e566 100755 --- a/node/src/documents/modules/sidebar.html +++ b/node/src/documents/modules/sidebar.html @@ -27,6 +27,18 @@ type : 'UI Module' +
+
Right Sidebar menu
+
One
+
Two
+
Three
+
+
+
Top Sidebar menu
+
One
+
Two
+
Three
+
@@ -95,7 +107,7 @@ type : 'UI Module'
- $('.ui.demo.sidebar') + $('.demo.sidebar') .sidebar('toggle') ;
@@ -104,7 +116,7 @@ type : 'UI Module'

Triggering show/hide with other content

For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click

- $('.ui.demo.sidebar') + $('.demo.sidebar') .sidebar('attach events', '.toggle.button') ; $('.toggle.button') @@ -121,8 +133,8 @@ type : 'UI Module'

Triggering custom action with other content

You can also however specify what action should occur when the element is clicked

- $('.ui.demo.sidebar') - .sidebar('attach events', '.open.button') + $('.demo.sidebar') + .sidebar('attach events', '.open.button', 'open') ; $('.open.button') .removeClass('disabled') @@ -130,7 +142,7 @@ type : 'UI Module'
- Trigger Sidebar + Open Sidebar
@@ -140,20 +152,58 @@ type : 'UI Module'

Floating

A sidebar can appear floating above content

- $('.ui.demo.sidebar') + $('.demo.sidebar') .addClass('floating') .sidebar('toggle') ;
+
+

Direction

+

A sidebar can appear on any side of content

+
+ +
+
+
+
+
+ +
+ $('.direction.button') + .on('click', function() { + $('.sidebar') + .filter('.' + $(this).data('direction') ) + .sidebar('toggle') + ; + }) + ; + $('.direction.button') + .removeClass('disabled') + ; +
+
+
+ +
+
+ +
+
+ +
+
+
+

Overlay

A sidebar can overlay page content instead of pushing it to the side

- $('.ui.demo.sidebar') + $('.demo.sidebar') .sidebar('setting', 'overlay', true) .sidebar('toggle') + .sidebar('setting', 'overlay', false) ;
diff --git a/node/src/files/components/semantic/collections/table.css b/node/src/files/components/semantic/collections/table.css index 5eba95b9c..b9aa955ae 100644 --- a/node/src/files/components/semantic/collections/table.css +++ b/node/src/files/components/semantic/collections/table.css @@ -377,6 +377,9 @@ /*-------------- Definition ---------------*/ +.ui.definition.table { + border: 1px solid rgba(0, 0, 0, 0.1); +} .ui.definition.table tr { border-top: 1px solid rgba(0, 0, 0, 0.1); } diff --git a/node/src/files/components/semantic/modules/sidebar.css b/node/src/files/components/semantic/modules/sidebar.css index ee843ac02..d2fd0133a 100644 --- a/node/src/files/components/semantic/modules/sidebar.css +++ b/node/src/files/components/semantic/modules/sidebar.css @@ -48,8 +48,8 @@ body { transform: translateX(0%); } .ui.top.sidebar { - width: 100%; - height: 40px; + width: 100% !important; + height: 40px !important; overflow: hidden; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); @@ -58,8 +58,8 @@ body { transform: translateY(-100%); } .ui.bottom.sidebar { - width: 100%; - height: 40px; + width: 100% !important; + height: 40px !important; top: 100%; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); diff --git a/node/src/files/components/semantic/modules/sidebar.js b/node/src/files/components/semantic/modules/sidebar.js index a1359e665..58a9f9d58 100644 --- a/node/src/files/components/semantic/modules/sidebar.js +++ b/node/src/files/components/semantic/modules/sidebar.js @@ -136,29 +136,18 @@ $.fn.sidebar = function(parameters) { bodyCSS: function() { var style = '', - moduleSize = 0, - direction = module.get.direction() + direction = module.get.direction(), + moduleSize = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + style = '' + + '' ; - if(module.is.vertical()) { - moduleSize = $module.outerHeight(); - style = '' - + '' - ; - } - else { - moduleSize = $module.outerWidth(); - style = '' - + '' - ; - } $head.append(style); module.refresh(); module.debug('Adding body css to head', $style); @@ -175,7 +164,11 @@ $.fn.sidebar = function(parameters) { $module.removeClass(className.active); }, pushed: function() { - $body.removeClass(className.pushed); + module.verbose('Removing body push state', module.get.direction()); + $body + .removeClass(className[ module.get.direction() ]) + .removeClass(className.pushed) + ; } }, @@ -184,7 +177,11 @@ $.fn.sidebar = function(parameters) { $module.addClass(className.active); }, pushed: function() { - $body.addClass(className.pushed); + module.verbose('Adding body push state', module.get.direction()); + $body + .addClass(className[ module.get.direction() ]) + .addClass(className.pushed) + ; } }, @@ -433,7 +430,10 @@ $.fn.sidebar.settings = { className: { active : 'active', pushed : 'pushed', - top : 'top' + top : 'top', + left : 'left', + right : 'right', + bottom : 'bottom' }, error : { diff --git a/src/collections/table.less b/src/collections/table.less index 4b767e939..2a943c811 100755 --- a/src/collections/table.less +++ b/src/collections/table.less @@ -425,10 +425,12 @@ Definition ---------------*/ +.ui.definition.table { + border: 1px solid rgba(0, 0, 0, 0.1); +} .ui.definition.table tr { border-top: 1px solid rgba(0, 0, 0 ,0.1); } - .ui.definition.table td:first-child { font-weight: bold; } diff --git a/src/modules/sidebar.js b/src/modules/sidebar.js index a1359e665..58a9f9d58 100755 --- a/src/modules/sidebar.js +++ b/src/modules/sidebar.js @@ -136,29 +136,18 @@ $.fn.sidebar = function(parameters) { bodyCSS: function() { var style = '', - moduleSize = 0, - direction = module.get.direction() + direction = module.get.direction(), + moduleSize = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + style = '' + + '' ; - if(module.is.vertical()) { - moduleSize = $module.outerHeight(); - style = '' - + '' - ; - } - else { - moduleSize = $module.outerWidth(); - style = '' - + '' - ; - } $head.append(style); module.refresh(); module.debug('Adding body css to head', $style); @@ -175,7 +164,11 @@ $.fn.sidebar = function(parameters) { $module.removeClass(className.active); }, pushed: function() { - $body.removeClass(className.pushed); + module.verbose('Removing body push state', module.get.direction()); + $body + .removeClass(className[ module.get.direction() ]) + .removeClass(className.pushed) + ; } }, @@ -184,7 +177,11 @@ $.fn.sidebar = function(parameters) { $module.addClass(className.active); }, pushed: function() { - $body.addClass(className.pushed); + module.verbose('Adding body push state', module.get.direction()); + $body + .addClass(className[ module.get.direction() ]) + .addClass(className.pushed) + ; } }, @@ -433,7 +430,10 @@ $.fn.sidebar.settings = { className: { active : 'active', pushed : 'pushed', - top : 'top' + top : 'top', + left : 'left', + right : 'right', + bottom : 'bottom' }, error : { diff --git a/src/modules/sidebar.less b/src/modules/sidebar.less index 548dfef80..6ca18daa7 100755 --- a/src/modules/sidebar.less +++ b/src/modules/sidebar.less @@ -60,8 +60,8 @@ body { } .ui.top.sidebar { - width: 100%; - height: 40px; + width: 100% !important; + height: 40px !important; overflow: hidden; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); @@ -71,8 +71,8 @@ body { } .ui.bottom.sidebar { - width: 100%; - height: 40px; + width: 100% !important; + height: 40px !important; top: 100%; -webkit-transform: translateY(0%);