Updates to the kitchen sinks

server/documents/elements/divider.html.eco

@@ -71,15 +71,10 @@ themes      : ['default']
     <div class="ui ignored positive message">Horizontal dividers can also be used in combination with <a href="/elements/header.html">header</a> and <a href="/elements/icon.html">icons</a> to create different styles of dividers.
     </div>
     <div class="ui ignored message">Dividers  will automatically vary the size of their dividing rules to match the length of your text</div>
-    <div class="ui segment">
-      <div class="ui form">
-        <div class="field">
-          <label>Lookup Order</label>
-          <div class="ui left labeled icon input">
-            <i class="search icon"></i>
-            <input type="text" placeholder="Order #">
-          </div>
-        </div>
+    <div class="ui center aligned compact segment">
+      <div class="ui left icon action input">
+        <i class="search icon"></i>
+        <input type="text" placeholder="Order #">
         <div class="ui blue submit button">Search</div>
       </div>
       <div class="ui horizontal divider">
@@ -103,7 +98,7 @@ themes      : ['default']
         <i class="bar chart icon"></i>
         Specifications
       </h4>
-      <table class="ui very basic definition table">
+      <table class="ui definition table">
         <tbody>
           <tr>
             <td class="two wide column">Size</td>

server/documents/elements/segment.html.eco

@@ -162,6 +162,13 @@ themes      : ['default', 'GitHub']
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Compact</h4>
+    <p>A segment may take up only as much space as is necessary</p>
+    <div class="ui compact segment">
+      <p>Pellentesque habitant morbi</p>
+    </div>
+  </div>
 
   <div class="example">
     <h4 class="ui header">Raised</h4>

server/documents/index.html.eco

@@ -144,15 +144,21 @@ type   : 'Semantic'
       <div class="column">
         <div class="no example">
           <h4 class="ui header">
-            <a href="/modules/accordion.html">Accordion</a>
+            <a href="/collections/menu.html">Menu</a>
           </h4>
-          <%- @partial('examples/accordion') %>
+          <%- @partial('examples/menu') %>
         </div>
         <div class="no example">
           <h4 class="ui header">
-            <a href="/elements/step.html">Step</a>
+            <a href="/modules/accordion.html">Divider</a>
           </h4>
-          <%- @partial('examples/step') %>
+          <%- @partial('examples/divider') %>
+        </div>
+        <div class="no example">
+          <h4 class="ui header">
+            <a href="/modules/accordion.html">Accordion</a>
+          </h4>
+          <%- @partial('examples/accordion') %>
         </div>
         <div class="no example">
           <h4 class="ui header">
@@ -180,6 +186,12 @@ type   : 'Semantic'
           </h4>
           <%- @partial('examples/label') %>
         </div>
+        <div class="no example">
+          <h4 class="ui header">
+            <a href="/elements/step.html">Step</a>
+          </h4>
+          <%- @partial('examples/step') %>
+        </div>
       </div>
       <div class="column">
         <div class="no example">
@@ -188,6 +200,12 @@ type   : 'Semantic'
           </h4>
           <%- @partial('examples/dropdown') %>
         </div>
+        <div class="no example">
+          <h4 class="ui header">
+            <a href="/elements/progress.html">Progress</a>
+          </h4>
+          <%- @partial('examples/progress') %>
+        </div>
         <div class="no example">
           <h4 class="ui header">
             <a href="/elements/segment.html">Segment</a>

server/documents/kitchen-sink.html.eco

@@ -0,0 +1,99 @@
+---
+layout      : 'default'
+css         : 'custom'
+title       : 'Kitchen Sink'
+type        : 'Semantic'
+description : 'Examples of most UI elements'
+---
+
+
+<%- @partial('header') %>
+
+<div class="ui stackable very relaxed page grid">
+  <div class="three column demo row">
+    <div class="column">
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/collections/menu.html">Menu</a>
+        </h4>
+        <%- @partial('examples/menu') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/modules/accordion.html">Divider</a>
+        </h4>
+        <%- @partial('examples/divider') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/modules/accordion.html">Accordion</a>
+        </h4>
+        <%- @partial('examples/accordion') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/collections/message.html">Message</a>
+        </h4>
+        <%- @partial('examples/message') %>
+      </div>
+    </div>
+    <div class="column">
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/views/card.html">Card</a>
+        </h4>
+        <%- @partial('examples/card') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/views/feed.html">Feed</a>
+        </h4>
+        <%- @partial('examples/feed') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/elements/label.html">Label</a>
+        </h4>
+        <%- @partial('examples/label') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/elements/step.html">Step</a>
+        </h4>
+        <%- @partial('examples/step') %>
+      </div>
+    </div>
+    <div class="column">
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/modules/dropdown.html">Dropdown</a>
+        </h4>
+        <%- @partial('examples/dropdown') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/elements/progress.html">Progress</a>
+        </h4>
+        <%- @partial('examples/progress') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/elements/segment.html">Segment</a>
+        </h4>
+        <%- @partial('examples/segment') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/elements/input.html">Input</a>
+        </h4>
+        <%- @partial('examples/input') %>
+      </div>
+      <div class="no example">
+        <h4 class="ui header">
+          <a href="/modules/checkbox.html">Checkbox</a>
+        </h4>
+        <%- @partial('examples/checkbox') %>
+      </div>
+    </div>
+  </div>
+</div>

server/files/javascript/home.js

@@ -61,6 +61,7 @@ semantic.home.ready = function() {
     .dropdown('setting', 'action', 'activate')
   ;
 
+
   $('.card .dimmer')
     .dimmer({
       on: 'hover'

server/files/stylesheets/home.css

@@ -574,13 +574,6 @@
 #example.index .feature.stripe p {
   min-height: 100px;
 }
-#example.index .demo h4 {
-  font-weight: bold !important;
-  margin: 0em 0em 1em !important;
-}
-#example.index .demo .ui.label:not(.empty) {
-  margin-bottom: 1em;
-}
 #example .stripe .ui.vertical.divider {
   font-size: 1rem;
 }

server/files/stylesheets/semantic.css

@@ -878,6 +878,32 @@ body#example.hide {
   }
 }
 
+
+/*--------------
+      Demo
+---------------*/
+
+
+#example .demo.row {
+  margin: 0 auto;
+  max-width: 1100px;
+}
+#example .demo.row .menu,
+#example .demo.row .card {
+  width: 100%;
+}
+#example .demo.row h4 {
+  font-weight: bold !important;
+  margin: 0em 0em 1em !important;
+}
+#example .demo.row .example {
+  clear: both;
+  z-index: 1;
+}
+#example .demo.row .ui.label:not(.empty) {
+  margin-bottom: 1em;
+}
+
 /*--------------
       Card
 ---------------*/

server/partials/examples/accordion.html

@@ -45,25 +45,25 @@
         <div class="grouped fields">
           <div class="field">
             <div class="ui radio checkbox">
-              <input type="checkbox" name="color">
+              <input type="radio" name="color">
               <label>Red</label>
             </div>
           </div>
           <div class="field">
             <div class="ui radio checkbox">
-              <input type="checkbox" name="color">
+              <input type="radio" name="color">
               <label>Orange</label>
             </div>
           </div>
           <div class="field">
             <div class="ui radio checkbox">
-              <input type="checkbox" name="color">
+              <input type="radio" name="color">
               <label>Green</label>
             </div>
           </div>
           <div class="field">
             <div class="ui radio checkbox">
-              <input type="checkbox" name="color">
+              <input type="radio" name="color">
               <label>Blue</label>
             </div>
           </div>

server/partials/examples/divider.html

@@ -0,0 +1,14 @@
+<div class="ui center aligned segment">
+  <div class="ui button">A</div>
+  <div class="ui horizontal divider">and</div>
+  <div class="teal ui button">B</div>
+</div>
+<div class="ui two column stackable center aligned grid segment">
+  <div class="column">
+    <div class="ui button">A</div>
+  </div>
+  <div class="ui vertical divider">or</div>
+  <div class="column">
+    <div class="teal ui button">B</div>
+  </div>
+</div>

server/partials/examples/label.html

@@ -12,7 +12,7 @@
 <div class="ui two item fluid menu">
   <a class="item">
     <i class="icon mail"></i> Messages
-    <div class="floating ui red label">22</div>
+    <div class="floating ui label">22</div>
   </a>
   <a class="item">
     <i class="icon users"></i> Friends
@@ -25,19 +25,19 @@
   <a class="ui left red corner label">
     <i class="heart icon"></i>
   </a>
-  <img src="/images/avatar/large/jenny.jpg">
+  <img src="/images/avatar/large/daniel.jpg">
 </div>
 <div class="ui left floated tiny image">
   <a class="ui left yellow corner label">
     <i class="star icon"></i>
   </a>
-  <img src="/images/avatar/large/daniel.jpg">
+  <img src="/images/avatar/large/christian.jpg">
 </div>
 <div class="ui left floated tiny image">
   <a class="ui right corner label">
     <i class="close icon"></i>
   </a>
-  <img src="/images/avatar/large/christian.jpg">
+  <img src="/images/avatar/large/jenny.jpg">
 </div>
 
 <div class="ui hidden divider"></div>

server/partials/examples/menu.html

@@ -0,0 +1,38 @@
+<div class="ui vertical menu">
+  <a class="active teal item">
+    Inbox
+    <div class="ui teal label">1</div>
+  </a>
+  <a class="item">
+    Trash
+    <div class="ui label">1</div>
+  </a>
+  <div class="item">
+    <div class="ui transparent icon input">
+      <input type="text" placeholder="Search mail...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+</div>
+<div class="ui secondary vertical menu">
+  <a class="active item">
+    Inbox
+  </a>
+  <a class="item">
+    Starred
+  </a>
+  <a class="item">
+    Trash
+  </a>
+</div>
+<div class="ui secondary pointing vertical menu">
+  <a class="active item">
+    Inbox
+  </a>
+  <a class="item">
+    Starred
+  </a>
+  <a class="item">
+    Trash
+  </a>
+</div>

server/partials/examples/message.html

@@ -22,3 +22,16 @@
 <div class="ui bottom attached message">
   Bottom attached
 </div>
+
+<script type="text/javascript">
+$(document)
+  .ready(function(){
+    $('.message .close')
+      .on('click', function() {
+        $(this).closest('.message').transition('scale');
+      })
+    ;
+
+  })
+;
+</script>

server/partials/examples/progress.html

@@ -0,0 +1,66 @@
+<div class="ui basic progress">
+  <div class="bar">
+    <div class="progress"></div>
+  </div>
+  <div class="label">Uploading Files</div>
+</div>
+
+
+<div class="ui indicating progress">
+  <div class="bar"></div>
+  <div class="label">Funding</div>
+</div>
+
+<div class="ui teal file progress" data-value="3" data-total="20">
+  <div class="bar">
+    <div class="progress"></div>
+  </div>
+  <div class="label"></div>
+</div>
+
+<script type="text/javascript">
+$(document)
+  .ready(function(){
+    $('.basic.progress')
+      .progress({
+        label   : false,
+        value   : Math.floor(Math.random() * 5) + 1,
+        text    : {
+          active  : '{percent}% Complete',
+          success : 'Done!'
+        }
+      })
+    ;
+    $('.indicating.progress')
+      .progress({
+        label   : false,
+        total   : 10,
+        value   : Math.floor(Math.random() * 5) + 1,
+        text    : {
+          active  : '{percent}% Funded',
+          success : 'Project Funded!'
+        }
+      })
+    ;
+    $('.file.progress')
+      .progress({
+        label: 'ratio',
+        text: {
+          active  : 'Adding {value} of {total} photos',
+          success : '{total} Photos Uploaded!'
+        }
+      })
+    ;
+    var progress = function() {
+      $('.ui.progress').progress('increment');
+      setTimeout(progress, (Math.random() * 2000) + 300);
+    };
+    setTimeout(progress, 1000);
+
+    setInterval(function() {
+      $('.ui.progress').progress('reset');
+    }, 30000);
+
+  })
+;
+</script>

server/partials/examples/segment.html

@@ -1,3 +1,9 @@
 <div class="ui piled segment"></div>
 <div class="ui stacked segment"></div>
-<div class="ui raised segment"></div>
+<div class="ui raised segment"></div>
+<div class="ui secondary segment"></div>
+<div class="ui tertiary segment"></div>
+<div class="ui compact stacked segment"></div>
+<div class="ui top attached segment"></div>
+<div class="ui attached segment"></div>
+<div class="ui bottom attached segment"></div>