Adds definition style example to tables, fixes and adds examples of

sidebar directions
11 years ago · 25e10ac058
12 changed files with 203 additions and 145 deletions
--- 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 = ''
+              + '<style type="text/css" title="' + namespace + '">'
+              + 'body.pushed {'
+              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+              + '}'
+              + '</style>'
            ;
-            if(module.is.vertical()) {
-              moduleSize = $module.outerHeight();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-top: ' + moduleSize + ' !important;'
-                + '}'
-                + '</style>'
-              ;
-            }
-            else {
-              moduleSize = $module.outerWidth();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-                + '}'
-                + '</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   : {
--- 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 = ''
+              + '<style type="text/css" title="' + namespace + '">'
+              + 'body.pushed {'
+              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+              + '}'
+              + '</style>'
            ;
-            if(module.is.vertical()) {
-              moduleSize = $module.outerHeight();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-top: ' + moduleSize + ' !important;'
-                + '}'
-                + '</style>'
-              ;
-            }
-            else {
-              moduleSize = $module.outerWidth();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-                + '}'
-                + '</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   : {
--- 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);
 }
--- 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%);
--- 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 = ''
+              + '<style type="text/css" title="' + namespace + '">'
+              + 'body.pushed {'
+              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+              + '}'
+              + '</style>'
            ;
-            if(module.is.vertical()) {
-              moduleSize = $module.outerHeight();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-top: ' + moduleSize + ' !important;'
-                + '}'
-                + '</style>'
-              ;
-            }
-            else {
-              moduleSize = $module.outerWidth();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-                + '}'
-                + '</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   : {
--- a/node/src/documents/modules/sidebar.html
+++ b/node/src/documents/modules/sidebar.html
@ -27,6 +27,18 @@ type   : 'UI Module'
    </div>
  </div>
 </div>
+<div class="ui right sidebar vertical menu">
+  <div class="header item">Right Sidebar menu</div>
+  <div class="item">One</div>
+  <div class="item">Two</div>
+  <div class="item">Three</div>
+</div>
+<div class="ui top sidebar menu">
+  <div class="header item">Top Sidebar menu</div>
+  <div class="item">One</div>
+  <div class="item">Two</div>
+  <div class="item">Three</div>
+</div>

 <div class="segment">
  <div class="container">
@ -95,7 +107,7 @@ type   : 'UI Module'
    </div>
    </div>
    <div class="code" data-demo="true" data-type="javascript">
-    $('.ui.demo.sidebar')
+    $('.demo.sidebar')
      .sidebar('toggle')
    ;
    </div>
@ -104,7 +116,7 @@ type   : 'UI Module'
    <h4 class="ui header">Triggering show/hide with other content</h4>
    <p>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</p>
    <div class="code" data-demo="true">
-    $('.ui.demo.sidebar')
+    $('.demo.sidebar')
      .sidebar('attach events', '.toggle.button')
    ;
    $('.toggle.button')
@ -121,8 +133,8 @@ type   : 'UI Module'
    <h4 class="ui header">Triggering custom action with other content</h4>
    <p>You can also however specify what action should occur when the element is clicked</p>
    <div class="code" data-demo="true">
-    $('.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'
    </div>
    <div class="ui disabled teal open button">
      <i class="left arrow icon"></i>
-      Trigger Sidebar
+      Open Sidebar
    </div>
  </div>

@ -140,20 +152,58 @@ type   : 'UI Module'
    <h4 class="ui header">Floating</h4>
    <p>A sidebar can appear floating above content</p>
    <div class="code" data-demo="true">
-    $('.ui.demo.sidebar')
+    $('.demo.sidebar')
      .addClass('floating')
      .sidebar('toggle')
    ;
    </div>
  </div>

+  <div class="no example">
+    <h4 class="ui header">Direction</h4>
+    <p>A sidebar can appear on any side of content</p>
+    <div class="code" data-type="html">
+    <!-- Assumes left if none specified -->
+    <div class="ui sidebar"></div>
+    <div class="ui top sidebar"></div>
+    <div class="ui right sidebar"></div>
+    <div class="ui bottom sidebar"></div>
+    </div>
+
+    <div class="code" data-demo="true">
+    $('.direction.button')
+      .on('click', function() {
+        $('.sidebar')
+          .filter('.' + $(this).data('direction') )
+          .sidebar('toggle')
+        ;
+      })
+    ;
+    $('.direction.button')
+      .removeClass('disabled')
+    ;
+    </div>
+    <div class="ui icon buttons">
+      <div class="ui disabled direction button" data-direction="top">
+        <i class="up arrow icon"></i>
+      </div>
+      <div class="ui disabled direction button" data-direction="right">
+        <i class="right arrow icon"></i>
+      </div>
+      <div class="ui disabled direction button" data-direction="bottom">
+        <i class="down arrow icon"></i>
+      </div>
+    </div>
+  </div>
+
  <div class="no example">
    <h4 class="ui header">Overlay</h4>
    <p>A sidebar can overlay page content instead of pushing it to the side</p>
    <div class="code" data-demo="true">
-    $('.ui.demo.sidebar')
+    $('.demo.sidebar')
      .sidebar('setting', 'overlay', true)
      .sidebar('toggle')
+      .sidebar('setting', 'overlay', false)
    ;
    </div>
  </div>
--- 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);
 }
--- 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%);
--- 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 = ''
+              + '<style type="text/css" title="' + namespace + '">'
+              + 'body.pushed {'
+              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+              + '}'
+              + '</style>'
            ;
-            if(module.is.vertical()) {
-              moduleSize = $module.outerHeight();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-top: ' + moduleSize + ' !important;'
-                + '}'
-                + '</style>'
-              ;
-            }
-            else {
-              moduleSize = $module.outerWidth();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-                + '}'
-                + '</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   : {
--- 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;
 }
--- 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 = ''
+              + '<style type="text/css" title="' + namespace + '">'
+              + 'body.pushed {'
+              + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+              + '}'
+              + '</style>'
            ;
-            if(module.is.vertical()) {
-              moduleSize = $module.outerHeight();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-top: ' + moduleSize + ' !important;'
-                + '}'
-                + '</style>'
-              ;
-            }
-            else {
-              moduleSize = $module.outerWidth();
-              style = ''
-                + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
-                + '}'
-                + '</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   : {
--- 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%);