Add modal examples, some bugfixes

server/documents/hotfix.html.eco

@@ -1,114 +1,97 @@
 ---
-layout : 'default'
-css    : 'hotfix'
+layout     : 'default'
+css        : 'hotfix'
 
-title  : 'Test Page'
-type   : 'Library'
+title      : 'Test Page'
+type       : 'Library'
+standalone : true
 ---
 <%- @partial('header') %>
 
 <!-- TEST JS HERE !-->
 <script>
 $(document).ready(function() {
-    $('.ui.left.sidebar').sidebar({
-      transition: 'overlay'
-    });
 
-    $('.ui.right.sidebar').sidebar({
-      transition: 'push'
-    });
-
-    // left is opened by button
-    $('.ui.left.sidebar')
-      .sidebar('attach events', '.open.button')
-    ;
-
-    // right opens by link in left
-    $('.ui.right.wide.sidebar')
-      .sidebar('attach events', '.left.sidebar .open.item')
-    ;
-
-    // last right opens by link in wide right
-    $('.ui.right.thin.sidebar')
-      .sidebar('attach events', '.right.wide.sidebar .open.item')
-    ;
 });
 </script>
 
 <!-- TEST CSS HERE !-->
 <style type="text/css">
-/* Force on top of other sidebar */
-.thin.right.sidebar {
-  z-index: 200 !important;
-}
+
 </style>
 
 <div class="main container">
-    <div class="ui open button">Open Left</div>
 </div>
 
-<div class="ui top fixed menu">
-    <div class="ui item">Fixed</div>
+<div class="ui page grid">
+    <div class="one column row">
+        <div class="column">
+            <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+            </p>
+        </div>
+    </div>
 </div>
-
-
-<div class="ui left sidebar vertical inverted labeled icon menu">
-  <a class="open item">
-    <i class="home icon"></i>
-    Open Right
-  </a>
-  <a class="item">
-    <i class="block layout icon"></i>
-    Topics
-  </a>
-  <a class="item">
-    <i class="smile icon"></i>
-    Friends
-  </a>
-  <a class="item">
-    <i class="calendar icon"></i>
-    History
-  </a>
-  <a class="item">
-    <i class="mail icon"></i>
-    Messages
-  </a>
-  <a class="item">
-    <i class="chat icon"></i>
-    Discussions
-  </a>
-  <a class="item">
-    <i class="trophy icon"></i>
-    Achievements
-  </a>
-  <a class="item">
-    <i class="shop icon"></i>
-    Store
-  </a>
-  <a class="item">
-    <i class="settings icon"></i>
-    Settings
-  </a>
+<div class="ui stackable page grid">
+    <div class="two column row">
+        <div class="column">
+            <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+            </p>
+        </div>
+        <div class="column">
+            <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+            </p>
+        </div>
+    </div>
+</div>
+<div class="ui stackable two column page grid">
+    <div class="column">
+        <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+        </p>
+    </div>
+    <div class="column">
+        <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+        </p>
+    </div>
+</div>
+<div class="ui two column page grid">
+    <div class="column">
+        <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+        </p>
+    </div>
+    <div class="column">
+        <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+        </p>
+    </div>
+</div>
+<div class="ui page grid">
+    <div class="one column row">
+        <div class="column">
+            <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+            </p>
+        </div>
+    </div>
 </div>
 
-<div class="ui wide right sidebar vertical inverted menu">
-  <a class="open item">
-    <i class="right arrow icon"></i>
-    Open Last
-  </a>
+<div class="ui one column page grid">
+    <div class="column">
+        <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+        </p>
+    </div>
+</div>
+<div class="ui stackable one column page grid">
+    <div class="column">
+        <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+        </p>
+    </div>
+    <div class="column">
+        <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+        </p>
+    </div>
+</div>
+<div class="ui one column page grid">
+    <div class="column">
+        <p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique.
+        </p>
+    </div>
 </div>
 
-<div class="ui thin right red sidebar vertical inverted menu">
-  <a class="open item">
-    <i class="home icon"></i>
-    Wow
-  </a>
-  <a class="item">
-    <i class="block layout icon"></i>
-    Amaze
-  </a>
-  <a class="item">
-    <i class="calendar icon"></i>
-    Very Relaxed
-  </a>
-</div>

server/documents/modules/modal.html.eco

@@ -18,6 +18,39 @@ themes      : ['Default', 'Material', 'Fixed-width']
 
 <div class="main container">
 
+  <div class="ui first coupled modal">
+    <div class="header">
+      Modal #1
+    </div>
+    <div class="content">
+      <div class="image">
+        <i class="right arrow icon"></i>
+      </div>
+      <div class="description">
+        <p>We have more to share with you. Follow us along to modal 2</p>
+      </div>
+    </div>
+    <div class="actions">
+      <div class="primary ui button">Proceed</div>
+    </div>
+  </div>
+  <div class="ui small second coupled modal">
+    <div class="header">
+      Modal #2
+    </div>
+    <div class="content">
+      <div class="description">
+        <p>That's everything!</p>
+      </div>
+    </div>
+    <div class="actions">
+      <div class="ui approve button">
+        <i class="checkmark icon"></i>
+        All Done
+      </div>
+    </div>
+  </div>
+
   <div class="ui basic test modal">
     <div class="header">
       Archive Old Messages
@@ -295,6 +328,42 @@ themes      : ['Default', 'Material', 'Fixed-width']
       </div>
     </div>
 
+    <div class="no example">
+      <h4 class="ui header">Multiple Modals</h4>
+      <p>A modal can open a second modal. If you use <code>allowMultiple: true</code> parameter the second modal will  be opened on top of the first modal. Otherwise the modal will be closed before the second modal is opened.</p>
+      <div class="code" data-demo="true">
+      // initialize all modals
+      $('.coupled.modal')
+        .modal({
+          allowMultiple: true
+        })
+      ;
+      // open second modal on button click
+      $('.second.modal')
+        .modal('attach events', '.first.modal .button')
+      ;
+      // show first immediately
+      $('.first.modal')
+        .modal('show')
+      ;
+      </div>
+      <div class="code" data-demo="true">
+      $('.coupled.modal')
+        .modal({
+          allowMultiple: false
+        })
+      ;
+      // attach events to buttons
+      $('.second.modal')
+        .modal('attach events', '.first.modal .button')
+      ;
+      // show first now
+      $('.first.modal')
+        .modal('show')
+      ;
+      </div>
+    </div>
+
     <div class="no example">
       <h4 class="ui header">Forcing a Choice</h4>
       <p>You can disable a modal's dimmer from being closed by click to force a user to make a choice</p>
@@ -694,4 +763,3 @@ themes      : ['Default', 'Material', 'Fixed-width']
 
 </div>
 
-<link rel="stylesheet/less" type="text/css" href="/src/definitions/modules/modal.less" />

server/documents/modules/nag.html.eco

@@ -28,7 +28,7 @@ status      : 'Undocumented'
     <h2 class="ui dividing header">Usage</h2>
     <div class="no example">
       <h4 class="ui header"></h4>
-      <p>Nags are used to present a user with a one time message which will persist until a user acknowledges the message. This can be used for providing notices like the site's use of cookies, or an importan change to a site like a security breach, or an important event.</p>
+      <p>Nags are used to present a user with a one time message which will persist until a user acknowledges the message. This can be used for providing notices like the site's use of cookies, an important change to a site like a security breach.</p>
       <p>Semantic's nag component provides built in options for ensuring a nag is only displayed once. You can trigger an API endpoint on dismissal, in order to store a value in your database, or you can use localstorage or cookie value to make sure that a particular computer does not receive the nag again.</p>
     </div>
 

server/documents/modules/sidebar.html.eco

@@ -341,12 +341,12 @@ themes      : ['Default']
           <td>Toggles visibility of sidebar</td>
         </tr>
         <tr>
-          <td>is open</td>
-          <td>Returns whether sidebar is open</td>
+          <td>is visible</td>
+          <td>Returns whether sidebar is visible</td>
         </tr>
         <tr>
-          <td>is closed</td>
-          <td>Returns whether sidebar is closed</td>
+          <td>is hidden</td>
+          <td>Returns whether sidebar is hidden</td>
         </tr>
         <tr>
           <td>push page</td>

server/documents/views/card.html.eco

@@ -338,6 +338,7 @@ themes      : ['Default', 'Basic', 'Classic']
         <div class="meta">
           <span class="time">2 days ago</span>
           <span class="category">Animals</span>
+          <a>Link</a>
         </div>
       </div>
     </div>