Updating docs for card/item/popup

server/documents/views/card.html.eco

@@ -273,9 +273,7 @@ themes      : ['Default', 'Basic']
   <div class="example">
     <h4 class="ui header">Link</h4>
     <p>A card can contain contain links as images, headers, or inside content</p>
-    <div class="ui yellow message">
-      <i class="star icon"></i>
-      To make the entire content of a card link, check out the link variation below
+    <div class="ui yellow message">To make the entire content of a card link, check out the link variation below
     </div>
     <div class="ui card">
       <a class="image" href="#">
@@ -309,9 +307,7 @@ themes      : ['Default', 'Basic']
             <i class="like icon"></i>
             Like
           </span>
-          <span class="star">
-            <i class="star icon"></i>
-            Favorite
+          <span class="star">Favorite
           </span>
         </div>
       </div>
@@ -448,66 +444,74 @@ themes      : ['Default', 'Basic']
     <div class="ui four cards">
       <div class="card">
         <div class="image">
-          <img src="/images/avatar/large/elliot.jpg">
+          <img src="/images/movies/12years.jpg">
         </div>
-        <div class="content">
-          <a class="header">Elliot Fu</a>
+        <div class="extra">
+          Rating:
+          <div class="ui star rating" data-rating="4"></div>
         </div>
       </div>
       <div class="card">
         <div class="image">
-          <img src="/images/avatar/large/helen.jpg">
+          <img src="/images/movies/totoro.jpg">
         </div>
-        <div class="content">
-          <a class="header">Helen Troy</a>
+        <div class="extra">
+          Rating:
+          <div class="ui star rating" data-rating="2"></div>
         </div>
       </div>
       <div class="card">
         <div class="image">
-          <img src="/images/avatar/large/jenny.jpg">
+          <img src="/images/movies/watchmen.jpg">
         </div>
-        <div class="content">
-          <a class="header">Jenny Hess</a>
+        <div class="extra">
+          Rating:
+          <div class="ui star rating" data-rating="3"></div>
         </div>
       </div>
       <div class="card">
         <div class="image">
-          <img src="/images/avatar/large/veronika.jpg">
+          <img src="/images/movies/happiness.jpg">
         </div>
-        <div class="content">
-          <a class="header">Veronika Ossi</a>
+        <div class="extra">
+          Rating:
+          <div class="ui star rating" data-rating="4"></div>
         </div>
       </div>
       <div class="card">
         <div class="image">
-          <img src="/images/avatar/large/stevie.jpg">
+          <img src="/images/movies/adaptation.jpg">
         </div>
-        <div class="content">
-          <a class="header">Stevie Feliciano</a>
+        <div class="extra">
+          Rating:
+          <div class="ui star rating" data-rating="3"></div>
         </div>
       </div>
       <div class="card">
         <div class="image">
-          <img src="/images/avatar/large/steve.jpg">
+          <img src="/images/movies/sherlock.jpg">
         </div>
-        <div class="content">
-          <a class="header">Steve Jobes</a>
+        <div class="extra">
+          Rating:
+          <div class="ui star rating" data-rating="3"></div>
         </div>
       </div>
       <div class="card">
         <div class="image">
-          <img src="/images/avatar/large/justen.jpg">
+          <img src="/images/movies/hemingway.jpg">
         </div>
-        <div class="content">
-          <a class="header">Justen Kitsune</a>
+        <div class="extra">
+          Rating:
+          <div class="ui star rating" data-rating="4"></div>
         </div>
       </div>
       <div class="card">
         <div class="image">
-          <img src="/images/avatar/large/daniel.jpg">
+          <img src="/images/movies/1942.jpg">
         </div>
-        <div class="content">
-          <a class="header">Daniel Louise</a>
+        <div class="extra">
+          Rating:
+          <div class="ui star rating" data-rating="4"></div>
         </div>
       </div>
     </div>

server/documents/views/item.html.eco

@@ -33,7 +33,7 @@ themes      : ['Default']
     <p>A group of items.</p>
     <div class="ui items segment">
       <div class="item">
-        <div class="ui small image">
+        <div class="image">
           <img src="/images/movies/12years.jpg">
         </div>
         <div class="content">
@@ -56,7 +56,7 @@ themes      : ['Default']
         </div>
       </div>
       <div class="item">
-        <div class="ui small image">
+        <div class="image">
           <img src="/images/movies/totoro.jpg">
         </div>
         <div class="content">
@@ -81,7 +81,7 @@ themes      : ['Default']
         </div>
       </div>
       <div class="item">
-        <div class="ui small image">
+        <div class="image">
           <img src="/images/movies/watchmen.jpg">
         </div>
         <div class="content">
@@ -104,7 +104,6 @@ themes      : ['Default']
           </div>
         </div>
       </div>
-
     </div>
   </div>
 
@@ -116,26 +115,20 @@ themes      : ['Default']
     <div class="ui items segment">
       <div class="item">
         <div class="content">
-          <div class="header">Arrowhead Valley Camp</div>
-          <div class="description">
-            This camp in the Hudson Valley is perfect for teenagers from 10-14.
-          </div>
+          <div class="header">12 Amazing Secrets for Long Life</div>
+          <div class="description">You won't believe how well it works.</div>
         </div>
       </div>
       <div class="item">
         <div class="content">
-          <div class="header">Buck's Homebrew Stayaway</div>
-          <div class="description">
-            This adult stay away from home camp will teach you everything you need to know about  forestry and homebrew.
-          </div>
+          <div class="header">The Last Words of a Dying Astronaut</div>
+          <div class="description">Inspirational words shared by someone truly special.</div>
         </div>
       </div>
       <div class="item">
         <div class="content">
-          <div class="header">Astrology Camp</div>
-          <div class="description">
-            Learn astrology the old fashioned way in this stayaway camp for kids aged 8-17.
-          </div>
+          <div class="header">A Funny Trick to Becoming Rich</div>
+          <div class="description">This is an easy way anyone can become rich</div>
         </div>
       </div>
     </div>

server/files/javascript/card.js

@@ -5,7 +5,7 @@ semantic.card.ready = function() {
 
   // selector cache
   var
-    $icon = $('.card .icon, .card .corner.label'),
+    $icon = $('.card .corner.label'),
     handler
   ;
 
@@ -14,6 +14,10 @@ semantic.card.ready = function() {
 
   };
 
+  $('.ui.rating')
+    .rating()
+  ;
+
   $icon
     .state()
   ;