fixes #58, adds close menu item to sidebar when on mobile

Former-commit-id: a7850b6023 Former-commit-id: d14f764fda
11 years ago · f7b150946d
8 changed files with 14 additions and 26 deletions
--- a/build/less/collections/grid.less
+++ b/build/less/collections/grid.less
@ -617,12 +617,6 @@
 }


-/*-------------------
-       Padded
--------------------*/
-
-
-
 /*-------------------
       Stackable
 --------------------*/
--- a/build/uncompressed/collections/grid.css
+++ b/build/uncompressed/collections/grid.css
@ -528,9 +528,6 @@
    display: none;
  }
 }
-/*-------------------
-       Padded
--------------------*/
 /*-------------------
       Stackable
 --------------------*/
--- a/node/src/files/build/less/collections/grid.less
+++ b/node/src/files/build/less/collections/grid.less
@ -617,12 +617,6 @@
 }


-/*-------------------
-       Padded
--------------------*/
-
-
-
 /*-------------------
       Stackable
 --------------------*/
--- a/node/src/files/build/uncompressed/collections/grid.css
+++ b/node/src/files/build/uncompressed/collections/grid.css
@ -528,9 +528,6 @@
    display: none;
  }
 }
-/*-------------------
-       Padded
--------------------*/
 /*-------------------
       Stackable
 --------------------*/
--- a/node/src/files/javascript/semantic.js
+++ b/node/src/files/javascript/semantic.js
@ -29,6 +29,7 @@ semantic.ready = function() {
    $ui               = $('.ui').not('.hover, .down'),
    $swap             = $('.theme.menu .item'),
    $menu             = $('#menu'),
+    $hideMenu         = $('#menu .hide.item'),
    $sortTable        = $('.sortable.table'),
    $demo             = $('.demo'),
    $waypoints        = $('.main.container').find('h2').first().siblings('h2').andSelf(),
@ -618,9 +619,9 @@ semantic.ready = function() {
    .on('mouseenter', handler.menu.mouseenter)
    .on('mouseleave', handler.menu.mouseleave)
  ;
-
  $menu
    .sidebar('attach events', '.launch.button, .launch.item')
+    .sidebar('attach events', $hideMenu, 'hide')
  ;
  $waypoints
    .waypoint({
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@ -130,11 +130,16 @@ a {
 a:hover {
  color: #00BAFF;
 }
+
 #example #menu .item {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
 }
+#example #menu .hide.item {
+  display: none;
+}
+
 #example #menu .item .item {
  font-size: 0.875rem;
 }
@ -179,7 +184,6 @@ a:hover {
 /*  font-size: 0.875em;
  vertical-align: middle;*/
 }
-
 /* lists */
 #example .features {
  list-style-position: inside;
@ -198,6 +202,7 @@ a:hover {
 }


+
 /*--------------
    Playground
 ---------------*/
@ -1291,6 +1296,9 @@ body.progress .ui.progress .bar {
    margin: 1em 0em;
    padding: 0em;
  }
+  #example #menu .hide.item {
+    display: block;
+  }
  #example .inverted.advertisement .carbonad {
    height: 109px;
  }
--- a/node/src/layouts/default.html.eco
+++ b/node/src/layouts/default.html.eco
@ -104,6 +104,9 @@
 </head>
 <body id="example" class="<%= @document.css %>">
  <div class="ui large vertical inverted labeled icon sidebar menu" id="menu">
+    <a class="hide item">
+      <i class="close icon"></i> Close Menu
+    </a>
    <a class="item" href="/build/semantic.zip">
      <i class="inverted circular red awesome download cloud icon"></i> <b>Download</b>
    </a>
--- a/src/collections/grid.less
+++ b/src/collections/grid.less
@ -617,12 +617,6 @@
 }


-/*-------------------
-       Padded
--------------------*/
-
-
-
 /*-------------------
       Stackable
 --------------------*/