Fixes to popup styles, removing includeMargin from popup settings, docs popup update

server/documents/modules/popup.html.eco

@@ -44,7 +44,7 @@ themes      : ['Default']
       <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">
+      <img src="/images/avatar/small/matt.jpg" data-title="Matt" data-content="Matt has been a member since July 2014" class="ui avatar image">
     </div>
 
     <div class="example">
@@ -58,7 +58,7 @@ themes      : ['Default']
         <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.
+            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.
           </div>
         </div>
         <div class="ui two bottom attached buttons">
@@ -76,7 +76,7 @@ themes      : ['Default']
 
     <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>
+      <p>An element can display a popup that is already included in the page</p>
 
       <div class="ui card">
         <div class="image">
@@ -84,6 +84,9 @@ themes      : ['Default']
         </div>
         <div class="content">
           <div class="header">Watchmen</div>
+          <div class="description">
+            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.
+          </div>
         </div>
         <div class="ui two buttons">
           <div class="ui button">

server/documents/modules/rating.html.eco

@@ -33,23 +33,21 @@ themes      : ['Default']
     <div class="example">
       <h4 class="ui header">Rating</h4>
       <p>A basic rating </p>
-      <div class="ui rating"></div>
+      <div class="ui rating" data-max-rating="1"></div>
     </div>
 
     <div class="example">
       <h4 class="ui header">Star</h4>
       <p>A rating can use a set of star icons</p>
 
-      <div class="ui compact segment">
-        Rating
-        <div class="ui star rating"></div>
-      </div>
+      Rating
+      <div class="ui star rating" data-rating="3"></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"></div>
+      <div class="ui heart rating" data-rating="7" data-max-rating="10"></div>
     </div>
 
     <h2 class="ui dividing header">Variations</h2>
@@ -77,21 +75,24 @@ themes      : ['Default']
 
     <div class="example">
       <h3 class="ui header">Setting existing values</h3>
-      <p>Starting ratings can be set either using metadata values or the setting <code>initialRating</code>.</p>
-      <div class="ui ignored info message">If a metadata rating is specified it will automatically override any initial rating. This way you can set a default value but also allow it to be overridden.</div>
+      <p>The starting rating can be set either using metadata value <code>data-rating</code> or the setting <code>initialRating</code>.
+      <p>The maximum rating can be be set using the metadata value <code>data-max-rating</code> or the settings <code>maxRating</code>, or you can just include the icon html yourself on initialization to avoid the overhead of the <code>DOM template insertions</code>. </p>
+      <div class="ui ignored info message">If a metadata rating is specified it will automatically override the default value specified in javascript.</div>
+      <div class="code" data-type="javascript">
+      $('.toggle.example .rating')
+        .rating({
+          initialRating: 2,
+          maxRating: 4
+        })
+      ;
+      </div>
       <div class="ui very relaxed celled list">
         <div class="item">
           <img class="ui avatar image" src="/images/demo/avatar2.jpg">
           <div class="content">
             <div class="header">
               New York Dog Fair
-              <div class="ui heart rating" data-rating="2">
-                <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" data-rating="2"></div>
             </div>
             A fun day at the fair
           </div>
@@ -101,13 +102,7 @@ themes      : ['Default']
           <div class="content">
             <div class="header">
               Dog Appreciation Day
-              <div class="ui heart rating" data-rating="2">
-                <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" data-rating="2"></div>
             </div>
             I'd like to tell your dog he's great
           </div>

server/files/javascript/semantic.js

@@ -559,7 +559,7 @@ semantic.ready = function() {
     })
     .find('.button')
       .popup({
-        position  : 'top center',
+        position  : 'top right',
         variation : 'inverted'
       })
   ;

src/definitions/modules/popup.js

@@ -883,7 +883,6 @@ $.fn.popup.settings = {
   inline         : false,
   preserve       : true,
   hoverable      : false,
-  includeMargin  : false,
 
   duration       : 200,
   easing         : 'easeOutQuint',

src/definitions/modules/rating.js

@@ -101,9 +101,12 @@ $.fn.rating = function(parameters) {
 
         setup: {
           layout: function() {
+            var
+              maxRating = $module.data(metadata.maxRating) || settings.maxRating
+            ;
             module.debug('Generating icon html dynamically');
             $module
-              .html($.fn.rating.settings.templates.icon(settings.maxRating))
+              .html($.fn.rating.settings.templates.icon(maxRating))
             ;
             module.refresh();
           }
@@ -414,7 +417,8 @@ $.fn.rating.settings = {
 
 
   metadata: {
-    rating: 'rating'
+    rating    : 'rating',
+    maxRating : 'maxRating'
   },
 
   className : {

src/themes/packages/default/modules/popup.variables

@@ -10,12 +10,13 @@
 @background: @white;
 
 @maxWidth: 250px;
-@border: 1px solid rgba(0, 0, 0, 0.1);
+@borderColor: #CCCCCC;
+@borderWidth: 1px;
 @boxShadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 @color: @textColor;
 
-@verticalPadding: 0.8em;
-@horizontalPadding: 1.2em;
+@verticalPadding: 0.75em;
+@horizontalPadding: 1.25em;
 @fontWeight: normal;
 @fontStyle: normal;
 @borderRadius: 0.2em;
@@ -38,18 +39,21 @@
 @headerDistance: 0.5em;
 @headerLineHeight: 1.2;
 
+/* Content Border */
+@border: @borderWidth solid @borderColor;
+
 /* Arrow */
 @arrowBackground: @white;
 @arrowZIndex: 2;
-@arrowOffset: -(@arrowSize / 2);
+@arrowJitter: 0.05em;
+@arrowOffset: -(@arrowSize / 2) + @arrowJitter;
 
-@arrowShadowColor: rgba(0, 0, 0, 0.2);
-@arrowStroke: 1px;
+@arrowStroke: darken(@borderColor, 10);
 
-@arrowBoxShadow: 1px 1px @arrowStroke @arrowShadowColor;
-@leftArrowBoxShadow: 1px -1px @arrowStroke @arrowShadowColor;
-@rightArrowBoxShadow: -1px 1px @arrowStroke @arrowShadowColor;
-@bottomArrowBoxShadow: -1px -1px @arrowStroke @arrowShadowColor;
+@arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @borderColor;
+@leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @borderColor;
+@rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @borderColor;
+@bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @borderColor;
 
 /*-------------------
        Coupling