Fix code example copy and paste, add more kitchen sink examples

server/documents/index.html.eco

@@ -915,7 +915,7 @@ type   : 'Semantic'
         <div class="column">
           <h3 class="ui header">Enterprise Ready</h3>
           <p>Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritanceance—a developer's wet dream.</p>
-          <a class="ui large right disabled labeled icon button">
+          <a class="ui large disabled right labeled icon button">
             <i class="right chevron icon"></i>
             View Expert Guide
           </a>
@@ -923,7 +923,7 @@ type   : 'Semantic'
         <div class="column">
           <h3 class="ui header">Beginner Friendly</h3>
           <p>Don't feel comfortable tweaking everything? Download free community designed themes and use our customizer to build a package fit for your needs.</p>
-          <a class="ui large right disabled labeled icon button">
+          <a class="ui large disabled right labeled icon button">
             <i class="right chevron icon"></i>
             View Basic Guide
           </a>

server/documents/kitchen-sink.html.eco

@@ -13,6 +13,12 @@ description : 'This a work in progress and currently only includes a portion of
   <div class="ui stackable very relaxed grid">
     <div class="three column demo row">
       <div class="column">
+        <div class="no example">
+          <h4 class="ui header">
+            <a href="/collections/menu.html">Button</a>
+          </h4>
+          <%- @partial('examples/button') %>
+        </div>
         <div class="no example">
           <h4 class="ui header">
             <a href="/collections/menu.html">Menu</a>

server/files/javascript/semantic.js

@@ -733,6 +733,7 @@ semantic.ready = function() {
     initializeCode: function() {
       var
         $code        = $(this).show(),
+        $codeTag     = $('<code></code>'),
         code         = $code.html(),
         existingCode = $code.hasClass('existing'),
         evaluatedCode = $code.hasClass('evaluated'),
@@ -783,7 +784,21 @@ semantic.ready = function() {
       formattedCode = $.trim(code).replace(whiteSpace, '\n');
       formattedCode = escapeHTML(formattedCode);
 
-      $code.html(formattedCode);
+      // replace with <code>
+      $codeTag
+        .addClass($code.attr('class'))
+        .html(formattedCode)
+      ;
+
+      $code
+        .replaceWith($codeTag)
+      ;
+      $code = $codeTag;
+
+      console.log($code, formattedCode);
+      $code
+        .html(formattedCode)
+      ;
 
       // wrap
       $code = $code
@@ -799,14 +814,14 @@ semantic.ready = function() {
         $('<div>')
           .addClass('ui attached top label')
           .html('<span class="title">' + title + '</span>' + '<em>' + (displayType[contentType] || contentType) + '</em>')
-          .prependTo( $(this).closest('.segment') )
+          .prependTo( $code.closest('.segment') )
         ;
       }
       if(label) {
         $('<div>')
           .addClass('ui pointing below language label')
           .html(displayType[contentType] || contentType)
-          .insertBefore ( $(this).closest('.segment') )
+          .insertBefore ( $code.closest('.segment') )
         ;
       }
       // add run code button
@@ -817,13 +832,13 @@ semantic.ready = function() {
           .on('click', function() {
             eval(code);
           })
-          .insertBefore ( $(this).closest('.segment') )
+          .insertBefore ( $code.closest('.segment') )
         ;
       }
       // add preview if specified
       if(preview) {
         $(code)
-          .insertAfter( $(this).closest('.segment') )
+          .insertAfter( $code.closest('.segment') )
         ;
       }
 

server/files/stylesheets/semantic.css

@@ -112,14 +112,16 @@ code {
   padding: 2px 4px;
   vertical-align: baseline;
 }
-.ui.message code {
-  background-color: rgba(255, 255, 255, 0.6);
-}
-
 pre code {
   border: none;
   padding: 0px;
+  font-size: 1em;
+}
+/* Code block */
+.ui.message code {
+  background-color: rgba(255, 255, 255, 0.6);
 }
+
 p {
   margin: 1em 0em;
 }
@@ -440,6 +442,7 @@ body#example.hide {
 
   width: 55px;
   height: auto;
+  white-space: nowrap;
   overflow: hidden;
   -webkit-transition:
     0.3s width ease,
@@ -465,7 +468,8 @@ body#example.hide {
 
 #example .fixed.launch.button .text {
   position: absolute;
-  top: 15px;
+  white-space: nowrap;
+  top: auto;
   left: 54px;
   opacity: 0;
   -webkit-transition:
@@ -588,7 +592,7 @@ body#example.hide {
 #example .instructive.segment .title + em {
   float: right;
 }
-#example .label + div.code {
+#example .label + .code {
   margin-top: 1.5em;
 }
 
@@ -977,6 +981,12 @@ body#example.hide {
   margin: 0 auto !important;
   max-width: 1140px;
 }
+
+#example .demo.row .button.demo > .buttons,
+#example .demo.row .button.demo > .button,
+#example .demo.row .button.demo > .segment > .button {
+  margin-bottom: 0.5em;
+}
 #example .demo.row .ui.menu,
 #example .demo.row .ui.card {
   width: 100%;

server/partials/examples/button.html

@@ -0,0 +1,87 @@
+<div class="button demo">
+  <div class="ui button">
+    View
+  </div>
+  <div class="ui primary button">
+    <i class="shop icon"></i> Add to Cart
+  </div>
+  <div class="ui secondary button">
+    <i class="save icon"></i> Save for Later
+  </div>
+  <div class="ui labeled icon button">
+    <i class="star icon"></i>
+    Rate
+  </div>
+  <div class="ui basic button">Basic</div>
+
+  <div class="ui fitted hidden divider"></div>
+
+  <div class="ui animated button">
+    <div class="visible content">Horizontal</div>
+    <div class="hidden content">
+      Hidden
+    </div>
+  </div>
+  <div class="ui vertical animated button">
+    <div class="visible content">Vertical</div>
+    <div class="hidden content">
+      Hidden
+    </div>
+  </div>
+  <div class="ui animated fade button">
+    <div class="visible content">Fade In</div>
+    <div class="hidden content">
+      Hidden
+    </div>
+  </div>
+
+  <div class="ui fitted hidden divider"></div>
+  <div class="ui buttons">
+    <div class="ui button">1</div>
+    <div class="ui button">2</div>
+    <div class="ui button">3</div>
+  </div>
+
+  <div class="ui buttons">
+    <div class="ui button">Cancel</div>
+    <div class="or"></div>
+    <div class="ui positive button">Save</div>
+  </div>
+
+  <div class="ui icon buttons">
+    <div class="ui button"><i class="align left icon"></i></div>
+    <div class="ui button"><i class="align center icon"></i></div>
+    <div class="ui button"><i class="align right icon"></i></div>
+    <div class="ui button"><i class="align justify icon"></i></div>
+  </div>
+
+  <div class="ui fitted hidden divider"></div>
+  <div class="ui blue button">Blue</div>
+  <div class="ui red button">Red</div>
+  <div class="ui teal button">Teal</div>
+
+  <div class="ui fitted hidden divider"></div>
+  <div class="ui blue basic button">Blue</div>
+  <div class="ui red basic button">Red</div>
+  <div class="ui teal basic button">Teal</div>
+
+  <div class="ui inverted segment">
+    <div class="ui inverted button">Inverted</div>
+    <div class="ui inverted blue button">Blue</div>
+    <div class="ui inverted red button">Red</div>
+    <div class="ui fitted hidden divider"></div>
+    <div class="ui inverted basic button">Basic</div>
+    <div class="ui inverted blue basic button">Blue</div>
+    <div class="ui inverted red basic button">Red</div>
+  </div>
+</div>
+<script type="text/javascript">
+$('.button.demo .follow')
+  .state({
+    text: {
+      inactive : 'Follow',
+      active   : 'Following'
+    }
+  })
+;
+</script>

server/partials/examples/feed.html

@@ -19,4 +19,96 @@
       You added Username to the group <a>Group Name</a>
     </div>
   </div>
+  <div class="event">
+    <div class="label">
+      <img src="/images/wireframe/square-image.png">
+    </div>
+    <div class="content">
+      <div class="date">
+        Time period ago
+      </div>
+      <div class="summary">
+        <a>Userrname</a> added <a>new photos</a>
+      </div>
+      <div class="extra images">
+        <a><img src="/images/wireframe/image.png"></a>
+      </div>
+      <div class="meta">
+        <a class="like">
+          <i class="like icon"></i> 1 Like
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="ui hidden divider"></div>
+<div class="ui feed">
+  <div class="event">
+    <div class="label">
+      <i class="pencil icon"></i>
+    </div>
+    <div class="content">
+      <div class="summary">
+        You wrote something
+        <div class="date">
+          Time period ago
+        </div>
+      </div>
+      <div class="extra text">
+        Blockquote
+      </div>
+      <div class="meta">
+        <a>Metadata</a>
+        <a>Metadata</a>
+      </div>
+    </div>
+  </div>
+  <div class="event">
+    <div class="label">
+      <i class="photo icon"></i>
+    </div>
+    <div class="content">
+      <div class="summary">
+        You uploaded a photo
+        <div class="date">
+          Time period ago
+        </div>
+      </div>
+      <div class="meta">
+        <a>Metadata</a>
+        <a>Metadata</a>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="ui hidden divider"></div>
+<div class="ui feed">
+  <div class="event">
+    <div class="content">
+      <div class="summary">
+         <a>Elliot Fu</a> added <a>Jenny Hess</a> as a friend
+      </div>
+    </div>
+  </div>
+  <div class="event">
+    <div class="content">
+      <div class="summary">
+         <a>Stevie Feliciano</a> added <a>Elliot Fu</a> as a friend
+      </div>
+    </div>
+  </div>
+  <div class="event">
+    <div class="content">
+      <div class="summary">
+         <a>Helen Troy</a> added <a>Christian Rocha</a> as a friend
+      </div>
+    </div>
+  </div>
+  <div class="event">
+    <div class="content">
+      <div class="summary">
+         <a>Christian Rocha</a> signed up for the site.
+      </div>
+    </div>
+  </div>
 </div>