Add more popup examples, remove icons from rating examples

server/documents/modules/popup.html.eco

@@ -32,38 +32,87 @@ themes      : ['Default']
     </h2>
 
     <div class="example">
-      <h3 class="ui header">Popup</h3>
-      <p>A standard popup</p>
+      <h4 class="ui header">Content</h4>
+      <p>An element can specify popup content to appear</p>
       <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>
+      <h4 class="ui header">Title</h4>
+      <p>An element can specify popup content with a title</p>
       <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">
-      <h3 class="ui header">HTML</h3>
-      <p>A popup can be formatted with html</p>
-      <i class="circular heart icon link" data-html="Average Rating: <div class='ui star rating'><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='icon'></i><i class='icon'></i></div>"></i>
+      <h4 class="ui header">HTML</h4>
+      <p>An element can specify html for a popup</p>
+
+      <div class="ui card" data-html="<div class='header'>User Rating</div><div class='content'><div class='ui star rating'><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='icon'></i><i class='icon'></i></div></div>">
+        <div class="image">
+          <img src="/images/movies/totoro-horizontal.jpg">
+        </div>
+        <div class="content">
+          <div class="header">My Neighbor Totoro</div>
+          <div class="description">
+            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>
+        <div class="ui two bottom attached buttons">
+          <div class="ui button">
+            <i class="add icon"></i>
+            Queue
+          </div>
+          <div class="ui primary button">
+            <i class="play icon"></i>
+            Watch
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="existing example">
+      <h4 class="ui header">Pre-Existing</h4>
+      <p>An element can display a pre-existing popup that is include after it</p>
+
+      <div class="ui card">
+        <div class="image">
+          <img src="/images/movies/watchmen-horizontal.jpg">
+        </div>
+        <div class="content">
+          <div class="header">Watchmen</div>
+        </div>
+        <div class="ui two buttons">
+          <div class="ui button">
+            <i class="add icon"></i>
+            Queue
+          </div>
+          <div class="ui primary button">
+            <i class="play icon"></i>
+            Watch
+          </div>
+        </div>
+      </div>
+      <div class="ui popup">
+        <div class='header'>User Rating</div>
+        <div class="ui star rating" data-rating="3"></div>
+      </div>
     </div>
 
     <h2 class="ui dividing header">Variations</h2>
 
     <div class="example">
-      <h3 class="ui header">Width</h3>
+      <h4 class="ui header">Width</h4>
       <p>A popup can be extra wide to allow for longer content</p>
       <i class="circular heart icon link" data-content="Hello. This is a wide pop-up which allows for lots of content with additional space. You can fit a lot of words here and the paragraphs will be pretty wide." data-variation="wide"></i>
       <i class="circular heart icon link" data-content="Hello. This is a very wide pop-up which allows for lots of content with additional space. You can fit a lot of words here and the paragraphs will be pretty wide." data-variation="very wide"></i>
     </div>
 
     <div class="fluid example">
-      <h3 class="ui header">Fluid</h3>
+      <h4 class="ui header">Fluid</h4>
       <p>A fluid popup will take up the entire width of its offset container</p>
       <div class="ui button">Show fluid popup</div>
       <div class="ui fluid popup">
@@ -77,7 +126,7 @@ themes      : ['Default']
     </div>
 
     <div class="example">
-      <h3 class="ui header">Size</h3>
+      <h4 class="ui header">Size</h4>
       <p>A popup can vary in size</p>
       <i class="circular heart icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
       <i class="circular heart icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
@@ -85,7 +134,7 @@ themes      : ['Default']
     </div>
 
     <div class="example">
-      <h3 class="ui header">Inverted</h3>
+      <h4 class="ui header">Inverted</h4>
       <p>A popup can have its colors inverted</p>
       <i class="circular heart icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
     </div>

server/documents/modules/rating.html.eco

@@ -33,9 +33,7 @@ themes      : ['Default']
     <div class="example">
       <h4 class="ui header">Rating</h4>
       <p>A basic rating </p>
-      <div class="ui rating">
-        <i class="icon"></i>
-      </div>
+      <div class="ui rating"></div>
     </div>
 
     <div class="example">
@@ -44,26 +42,14 @@ themes      : ['Default']
 
       <div class="ui compact segment">
         Rating
-        <div class="ui star rating">
-          <i class="icon"></i>
-          <i class="icon"></i>
-          <i class="icon"></i>
-          <i class="icon"></i>
-          <i class="icon"></i>
-        </div>
+        <div class="ui star rating"></div>
       </div>
     </div>
 
     <div class="example">
       <h4 class="ui header">Heart</h4>
       <p>A rating can use a set of heart icons</p>
-      <div class="ui heart rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui heart rating"></div>
     </div>
 
     <h2 class="ui dividing header">Variations</h2>
@@ -71,61 +57,19 @@ themes      : ['Default']
     <div class="example">
       <h4 class="ui header">Size</h4>
       <p>A rating can vary in size</p>
-      <div class="ui mini star rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui mini star rating"></div>
       <div class="ignored hidden ui divider"></div>
-      <div class="ui tiny star rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui tiny star rating"></div>
       <div class="ignored hidden ui divider"></div>
-      <div class="ui small star rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui small star rating"></div>
       <div class="ignored hidden ui divider"></div>
-      <div class="ui star rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui star rating"></div>
       <div class="ignored hidden ui divider"></div>
-      <div class="ui large star rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui large star rating"></div>
       <div class="ignored hidden ui divider"></div>
-      <div class="ui huge star rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui huge star rating"></div>
       <div class="ignored hidden ui divider"></div>
-      <div class="ui massive star rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui massive star rating"></div>
     </div>
   </div>
 
@@ -221,13 +165,7 @@ themes      : ['Default']
       ;
     </div>
     <div class="code" data-type="html">
-      <div class="ui rating">
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-        <i class="icon"></i>
-      </div>
+      <div class="ui rating"></div>
     </div>
 
     <h2 class="ui dividing header">Behavior</h2>

server/files/javascript/popup.js

@@ -11,7 +11,6 @@ semantic.popup.ready = function() {
   ;
   $popup
     .popup({
-      preserve: true,
       className: {
         popup: 'ignored ui popup'
       }
@@ -24,6 +23,18 @@ semantic.popup.ready = function() {
     })
   ;
 
+  $('.existing.example .rating')
+    .rating()
+  ;
+
+  $('.existing.example .card')
+    .popup({
+      className: {
+        popup: 'ignored ui popup'
+      }
+    })
+  ;
+
 
 };
 

server/files/stylesheets/semantic.css

@@ -1168,16 +1168,16 @@ body#example.hide {
 }
 
 #example .example:first-child,
-#example h2 ~ .example,
-#example h3 ~ .example,
-#example h4 ~ .example {
+#example h2 + .example,
+#example h3 + .example,
+#example h4 + .example {
   margin-top: 0px;
   padding-top: 0px;
   border-top: none;
 }
-#example h2 ~ .example i.code,
-#example h3 ~ .example i.code,
-#example h4 ~ .example i.code {
+#example h2 + .example i.code,
+#example h3 + .example i.code,
+#example h4 + .example i.code {
   top: 0px;
 }
 #example .example > h4 {
@@ -1188,8 +1188,8 @@ body#example.hide {
   clear: both;
 }
 #example .example {
-  margin: 1em 0em 1.5em;
-  padding: 1em 0em;
+  margin: 2em 0em;
+  padding: 0em;
 /*  clear: both;*/
   position: relative;
   -webkit-tap-highlight-color: transparent;

src/definitions/collections/grid.less

@@ -425,23 +425,27 @@ body > .ui.grid:not(.page) {
 -----------------------*/
 
 .ui.relaxed.grid > .column:not(.row),
-.ui.relaxed.grid > .row > .column {
+.ui.relaxed.grid > .row > .column,
+.ui.grid > .relaxed.row > .column {
   padding-left: @relaxedGutterWidth;
   padding-right: @relaxedGutterWidth;
 }
 
 .ui.very.relaxed.grid > .column:not(.row),
-.ui.very.relaxed.grid > .row > .column {
+.ui.very.relaxed.grid > .row > .column,
+.ui.grid > .very.relaxed.row > .column {
   padding-left: @veryRelaxedGutterWidth;
   padding-right: @veryRelaxedGutterWidth;
 }
 
 /* Coupling with UI Divider */
-.ui.relaxed.grid .row + .ui.divider {
+.ui.relaxed.grid .row + .ui.divider,
+.ui.grid .relaxed.row + .ui.divider {
   margin-left: @relaxedGutterWidth;
   margin-right: @relaxedGutterWidth;
 }
-.ui.very.relaxed.grid .row + .ui.divider {
+.ui.very.relaxed.grid .row + .ui.divider,
+.ui.grid .very.relaxed.row + .ui.divider {
   margin-left: @veryRelaxedGutterWidth;
   margin-right: @veryRelaxedGutterWidth;
 }