Updating various examples

server/documents/collections/grid.html.eco

@@ -33,7 +33,6 @@ themes      : ['Default']
     <p>A grid is made up of columns of content with gutters to provide negative space between columns.</p>
 
     <div class="ui ignored message">
-      <p>A grid does not necessarily need to specify rows. Content will automatically flow to the next row when all the grid columns are taken in the current row.</p>
     </div>
     <div class="ui ignored info message">
       <p>All grid systems must assume an arbitrary amount of column rows. Semantic's default theme assumes <b>16 columns</b></p>
@@ -41,27 +40,55 @@ themes      : ['Default']
 
      <div class="ui grid">
       <div class="four wide column">
-        <div class="ui segment">
-        </div>
+        <div class="ui segment"></div>
       </div>
       <div class="four wide column">
-        <div class="ui segment">
-        </div>
+        <div class="ui segment"></div>
       </div>
       <div class="four wide column">
-        <div class="ui segment">
-        </div>
+        <div class="ui segment"></div>
       </div>
       <div class="four wide column">
-        <div class="ui segment">
-        </div>
+        <div class="ui segment"></div>
       </div>
     </div>
   </div>
 
   <div class="highlighted example">
-    <h4 class="ui header">Grid with Rows</h4>
-    <p>A grid can wrap groups of columns into rows</p>
+    <h4 class="ui header">Automatic Row Flow</h4>
+    <p>A grid does not necessarily need to specify rows. Content will automatically flow to the next row when all the grid columns are taken in the current row.</p>
+
+     <div class="ui grid">
+      <div class="four wide column">
+        <div class="ui segment"></div>
+      </div>
+      <div class="four wide column">
+        <div class="ui segment"></div>
+      </div>
+      <div class="four wide column">
+        <div class="ui segment"></div>
+      </div>
+      <div class="four wide column">
+        <div class="ui segment"></div>
+      </div>
+      <div class="four wide column">
+        <div class="ui segment"></div>
+      </div>
+      <div class="four wide column">
+        <div class="ui segment"></div>
+      </div>
+      <div class="four wide column">
+        <div class="ui segment"></div>
+      </div>
+      <div class="four wide column">
+        <div class="ui segment"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="highlighted example">
+    <h4 class="ui header">Specifying Rows</h4>
+    <p>Specifying rows for your grid, allows the bottom and top rows to sit flush with the edge of the grid, and allows you to use row variations</p>
     <div class="ui ignored message">
       The bottom and top rows, when rows are specified will sit flush with the edge of the grid.</p>
     </div>
@@ -74,34 +101,27 @@ themes      : ['Default']
     <div class="ui grid">
       <div class="ui four column row">
         <div class="column">
-          <div class="ui segment">
-          </div>
+          <div class="ui segment"></div>
         </div>
         <div class="column">
-          <div class="ui segment">
-          </div>
+          <div class="ui segment"></div>
         </div>
         <div class="column">
-          <div class="ui segment">
-          </div>
+          <div class="ui segment"></div>
         </div>
         <div class="column">
-          <div class="ui segment">
-          </div>
+          <div class="ui segment"></div>
         </div>
       </div>
-      <div class="ui row">
+      <div class="ui divided row">
         <div class="three wide column">
-          <div class="ui segment">
-          </div>
+          <div class="ui segment"></div>
         </div>
         <div class="eight wide column">
-          <div class="ui segment">
-          </div>
+          <div class="ui segment"></div>
         </div>
         <div class="five wide column">
-          <div class="ui segment">
-          </div>
+          <div class="ui segment"></div>
         </div>
       </div>
     </div>
@@ -123,28 +143,38 @@ themes      : ['Default']
       <div class="column">
         <div class="ui two column fitted grid">
           <div class="column">
-            <div class="ui segment">
-            </div>
+            <div class="ui segment"></div>
           </div>
           <div class="column">
-            <div class="ui segment">
-            </div>
+            <div class="ui segment"></div>
           </div>
         </div>
       </div>
       <div class="column">
         <div class="ui fitted grid">
           <div class="eight wide column">
-            <div class="ui segment">
-            </div>
+            <div class="ui segment"></div>
           </div>
           <div class="eight wide column">
-            <div class="ui segment">
-            </div>
+            <div class="ui segment"></div>
           </div>
         </div>
       </div>
     </div>
+    <div class="ui four column grid">
+      <div class="column">
+          <div class="ui segment"></div>
+      </div>
+      <div class="column">
+          <div class="ui segment"></div>
+      </div>
+      <div class="column">
+          <div class="ui segment"></div>
+      </div>
+      <div class="column">
+          <div class="ui segment"></div>
+      </div>
+    </div>
   </div>
 
   <h2 class="ui dividing header">Types</h2>

server/documents/modules/popup.html.eco

@@ -34,14 +34,17 @@ themes      : ['Default']
     <div class="example">
       <h3 class="ui header">Popup</h3>
       <p>A standard popup</p>
-      <i class="heart circular icon link" data-content="Hello, I am a pop-up."></i>
-      <i class="heart circular icon link" title="Hello, I am a pop-up."></i>
+      <div class="ui icon button" data-content="Add users to your feed">
+        <i class="add icon"></i>
+      </div>
     </div>
 
     <div class="example">
       <h3 class="ui header">Title</h3>
       <p>A popup can be formatted with a title</p>
-      <img src="/images/demo/avatar.jpg" data-title="PonyDog22" data-content="Ponydog has been a member for 22 days" class="ui avatar image"> PonyDog22
+      <img src="/images/avatar/small/elliot.jpg" data-title="Elliot Fu" data-content="Elliot has been a member since July 2012" class="ui avatar image">
+      <img src="/images/avatar/small/stevie.jpg" data-title="Stevie Feliciano" data-content="Stevie has been a member since August 2013" class="ui avatar image">
+      <img src="/images/avatar/small/matt.jpg" data-title="Matt" data-content="Matth has been a member since July 2014" class="ui avatar image">
     </div>
 
     <div class="example">

server/documents/views/item.html.eco

@@ -33,80 +33,78 @@ themes      : ['Default']
     <p>A group of items.</p>
     <div class="ui items segment">
       <div class="item">
-        <div class="image">
-          <img src="/images/logos/arrowhead.png">
+        <div class="ui small image">
+          <img src="/images/movies/12years.jpg">
         </div>
-        <div class="middle aligned content">
-          <a class="header">Arrowhead Valley Camp</a>
+        <div class="content">
+          <a class="header">12 Years a Slave</a>
           <div class="meta">
-            <span class="price">$1200</span>
-            <span class="stay">1 Month</span>
+            <span class="cinema">Union Square 14</span>
           </div>
           <div class="description">
-            This camp in the Hudson Valley is perfect for teenagers from 10-14.
+            In the pre-Civil War United States, Solomon Northup, a free black man from upstate New York, is abducted and sold into slavery. Facing cruelty as well as unexpected kindnesses Solomon struggles not only to stay alive, but to retain his dignity. In the twelfth year of his unforgettable odyssey, Solomon’s chance meeting with a Canadian abolitionist will forever alter his life.
           </div>
           <div class="extra">
-            <span class="right floated amenities ui label">
-              <i class="child icon"></i>
-              Child Friendly
-            </span>
+            <div class="ui right floated disabled red button">Sold Out</div>
+            <div class="ui horizontal label">IMAX</div>
+            <div class="ui horizontal label"><i class="globe icon"></i> Additional Languages</div>
             <span class="available">
-              <i class="red check icon"></i>
-              0 Spots Available
+              <i class="red remove icon"></i>
+              Tickets Unavailable
             </span>
           </div>
         </div>
       </div>
       <div class="item">
-        <div class="image">
-          <img src="/images/logos/big-buck.png">
+        <div class="ui small image">
+          <img src="/images/movies/totoro.jpg">
         </div>
-        <div class="middle aligned content">
-          <a class="header">Buck's Homebrew Stayaway</a>
+        <div class="content">
+          <a class="header">My Neighbor Totoro</a>
           <div class="meta">
-            <span class="price">$1000</span>
-            <span class="stay">2 Weeks</span>
+            <span class="cinema">IFC Cinema</span>
           </div>
           <div class="description">
-            This adult stay away from home camp will teach you everything you need to know about forestry and homebrew.
+            Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by Totoros, magical spirits of the forest. When the youngest runs away from home, the older sister seeks help from the spirits to find her.
           </div>
           <div class="extra">
-            <span class="right floated amenities ui label">
-              <i class="male icon"></i>
-              Adults-Only
-            </span>
+            <div class="ui right floated primary button">
+              Buy tickets
+              <i class="right chevron icon"></i>
+            </div>
+            <div class="ui horizontal label">Limited</div>
             <span class="available">
               <i class="green check icon"></i>
-              2 Spots Available
+              10 Seats Avaiable
             </span>
           </div>
         </div>
       </div>
       <div class="item">
-        <div class="image">
-          <img src="/images/logos/sunset.png">
+        <div class="ui small image">
+          <img src="/images/movies/watchmen.jpg">
         </div>
-        <div class="middle aligned content">
-          <a class="header">Greek Astrology Camp</a>
+        <div class="content">
+          <a class="header">Watchmen</a>
           <div class="meta">
-            <span class="price">$1600</span>
-            <span class="stay">6 Weeks</span>
+            <span class="cinema">IFC</span>
           </div>
           <div class="description">
-            Learn astrology the old fashioned way in this stayaway camp for kids aged 8-17.
+            In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated. The reunited heroes set out to prevent their own destruction, but in doing so uncover a sinister plot that puts all of humanity in grave danger.
           </div>
           <div class="extra">
-            <span class="right floated amenities ui label">
-              <i class="child icon"></i>
-              Child Friendly
-            </span>
+            <div class="ui right floated primary button">
+              Buy tickets
+              <i class="right chevron icon"></i>
+            </div>
             <span class="available">
               <i class="green check icon"></i>
-              25 Spots Available
+              40 Seats Avaiable
             </span>
           </div>
         </div>
       </div>
+
     </div>
   </div>
 
@@ -325,36 +323,79 @@ themes      : ['Default']
       <i class="info icon"></i>
       The following example uses <a href="/elements/segment.html">ui</a> for legibility only. This is not necessary for using <code>ui items</code>
     </div>
-    <div class="ui divided items segment">
-      <div class="item" href="http://www.dog.com">
-        <div class="content">
-          <a class="header">Cute Dog</a>
+    <div class="ui items segment">
+      <div class="item">
+        <div class="image">
+          <img src="/images/logos/arrowhead.png">
+        </div>
+        <div class="middle aligned content">
+          <a class="header">Arrowhead Valley Camp</a>
           <div class="meta">
-            <span class="category">Animals</span>
+            <span class="price">$1200</span>
+            <span class="stay">1 Month</span>
           </div>
           <div class="description">
-            Click to view more information about this dog at dog.com
+            This camp in the Hudson Valley is perfect for teenagers from 10-14.
           </div>
           <div class="extra">
-            <div class="author">
-              <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
-            </div>
+            <span class="right floated amenities ui label">
+              <i class="child icon"></i>
+              Child Friendly
+            </span>
+            <span class="available">
+              <i class="red check icon"></i>
+              0 Spots Available
+            </span>
           </div>
         </div>
       </div>
-      <div class="item" href="http://www.dog.com">
-        <div class="content">
-          <a class="header">Magic Dog</a>
+      <div class="item">
+        <div class="image">
+          <img src="/images/logos/big-buck.png">
+        </div>
+        <div class="middle aligned content">
+          <a class="header">Buck's Homebrew Stayaway</a>
           <div class="meta">
-            <span class="category">Animals</span>
+            <span class="price">$1000</span>
+            <span class="stay">2 Weeks</span>
           </div>
           <div class="description">
-            Click to view more information about a magic dog at dog.com
+            This adult stay away from home camp will teach you everything you need to know about forestry and homebrew.
           </div>
           <div class="extra">
-            <div class="author">
-              <img class="ui avatar image" src="/images/demo/photo.jpg"> Dog Doggington
-            </div>
+            <span class="right floated amenities ui label">
+              <i class="male icon"></i>
+              Adults-Only
+            </span>
+            <span class="available">
+              <i class="green check icon"></i>
+              2 Spots Available
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="image">
+          <img src="/images/logos/sunset.png">
+        </div>
+        <div class="middle aligned content">
+          <a class="header">Greek Astrology Camp</a>
+          <div class="meta">
+            <span class="price">$1600</span>
+            <span class="stay">6 Weeks</span>
+          </div>
+          <div class="description">
+            Learn astrology the old fashioned way in this stayaway camp for kids aged 8-17.
+          </div>
+          <div class="extra">
+            <span class="right floated amenities ui label">
+              <i class="child icon"></i>
+              Child Friendly
+            </span>
+            <span class="available">
+              <i class="green check icon"></i>
+              25 Spots Available
+            </span>
           </div>
         </div>
       </div>

server/files/javascript/semantic.js

@@ -485,7 +485,7 @@ semantic.ready = function() {
       editorSession.setUseSoftTabs(true);
       codeHeight = editorSession.getScreenLength() * editor.renderer.lineHeight + padding;
       $(this)
-        // .height(codeHeight + 'px')
+        .height(codeHeight + 'px')
         .wrap('<div class="ui ' + name + ' segment">')
       ;
       // add label
@@ -564,12 +564,12 @@ semantic.ready = function() {
       })
   ;
 
-/*  $(window)
+  $(window)
     .on('resize', function() {
       clearTimeout(handler.timer);
       handler.timer = setTimeout(handler.resizeCode, 500);
     })
-  ;*/
+  ;
 
   $downloadDropdown
     .dropdown({

server/files/stylesheets/semantic.css

@@ -1042,7 +1042,7 @@ body#example.hide {
   position: relative;
   background: none;
 }
-#example div.code .ace_scroller {
+/*#example div.code .ace_scroller {
   position: relative;
 }
 #example div.code .ace_content {
@@ -1051,7 +1051,7 @@ body#example.hide {
 }
 #example div.code .ace_layer {
   position: relative;
-}
+}*/
 #example div.code .ace_gutter,
 #example div.code .ace_scroller {
   background-color: transparent;
@@ -1240,13 +1240,23 @@ body#example.hide {
 #example .ui.type.cards .image .grid {
   -webkit-animation: grid 15s ease infinite;
   -moz-animation: grid 15s ease infinite;
+  animation: grid 15s ease infinite;
   background-color: #F6F6F6;
-  margin: 0em auto;
   box-shadow:
     0px 0px 0px 1px rgba(0, 0, 0, 0.1),
     0px 1px 2px 0px rgba(0, 0, 0, 0.1)
   ;
 }
+#example .highlighted.example > .grid {
+  margin: 0em auto;
+}
+#example .highlighted.example .grid .grid {
+  -webkit-animation: none;
+  -moz-animation: none;
+  animation: none;
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0.02);
+}
 #example .highlighted.example .grid .row,
 #example .ui.type.cards .image .grid .row {
   border-top: 1px solid #DDDDDD;