Fixes up dimmer demos, more module demos

server/documents/modules/dimmer.html.eco

@@ -1,6 +1,6 @@
 ---
 layout      : 'default'
-css         : ''
+css         : 'dim'
 
 element     : 'dimmer'
 elementType : 'module'
@@ -14,17 +14,6 @@ themes      : ['Default']
 <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/dimmer.less" />
 <script src="/javascript/dimmer.js"></script>
 
-<div class="ui page dimmer">
-  <div class="content">
-    <div class="center">
-      <h2 class="ui inverted icon header">
-        <i class="icon circular inverted emphasized green mail"></i>
-        You're all signed up for the weekly dog tips newsletter!
-        <div class="sub header">Your first edition will be sent on January 22</div>
-      </h2>
-    </div>
-  </div>
-</div>
 
 <%- @partial('header', { tabs: 'module' }) %>
 
@@ -34,6 +23,34 @@ themes      : ['Default']
 
     <h2 class="ui dividing header">Types</h2>
 
+    <div class="example">
+      <h4 class="ui header">Simple Dimmer</h4>
+      <p>A simple dimmer displays no content</p>
+      <div class="code">
+        // left button
+        $('.segment').dimmer('show');
+        // right button
+        $('.segment').dimmer('hide');
+      </div>
+      <div class="ui ignored info message">A dimmer will automatically be created when a dimming behavior is triggered on an element.
+      </div>
+      <div class="ui segment">
+        <h3 class="ui header">
+          Overlayable Section
+        </h3>
+        <div class="ui small images">
+          <img src="/images/wireframe/image.png">
+          <img src="/images/wireframe/image.png">
+          <img src="/images/wireframe/image.png">
+        </div>
+        <img class="ui medium wireframe image" src="/images/wireframe/media-paragraph.png">
+      </div>
+      <div class="ui ignored icon buttons">
+        <div class="ui show button"><i class="plus icon"></i></div>
+        <div class="ui hide button"><i class="minus icon"></i></div>
+      </div>
+    </div>
+
     <div class="example">
       <h4 class="ui header">Content Dimmer</h4>
       <p>A dimmer can display content</p>
@@ -42,13 +59,17 @@ themes      : ['Default']
         <h3 class="ui header">
           Overlayable Section
         </h3>
-        <img src="/images/wireframe/text-image.png">
-        <img src="/images/wireframe/text-image.png">
+        <div class="ui small images">
+          <img src="/images/wireframe/image.png">
+          <img src="/images/wireframe/image.png">
+          <img src="/images/wireframe/image.png">
+        </div>
+        <img class="ui medium wireframe image" src="/images/wireframe/media-paragraph.png">
         <div class="ui dimmer">
           <div class="content">
             <div class="center">
               <h2 class="ui inverted icon header">
-                <i class="circular red heart icon"></i>
+                <i class="heart icon"></i>
                 Dimmed Message!
               </h2>
             </div>
@@ -59,31 +80,21 @@ themes      : ['Default']
         <div class="ui show button"><i class="plus icon"></i></div>
         <div class="ui hide button"><i class="minus icon"></i></div>
       </div>
-      <div class="existing code">
-        <div class="ui dimmer">
-          <div class="content">
-            <div class="center">
-              <h2 class="ui inverted icon header">
-                <i class="icon circular inverted emphasized red heart"></i>
-                Your poodle photo uploaded successfully!
-              </h2>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
 
     <div class="example">
       <h4 class="ui header">Page Dimmer</h4>
       <p>A dimmer can be formatted to be fixed to the page</p>
-      <div class="existing code">
-      <div class="ui page dimmer">
-        <div class="content">
-          <div class="center">Hello</div>
+      <div class="existing code" data-preview="true">
+        <div class="ui page dimmer">
+          <div class="content">
+            <div class="center">Hello</div>
+          </div>
         </div>
       </div>
+      <div class="ui page button">
+        <i class="plus icon"></i>Show
       </div>
-      <div class="ui page button"><i class="plus icon"></i> Show</div>
     </div>
 
 
@@ -357,8 +368,8 @@ themes      : ['Default']
       <tbody>
         <tr>
           <td>closable</td>
-          <td class="six wide">true</td>
-          <td>Whether clicking on the dimmer should close it automatically</td>
+          <td class="six wide">auto</td>
+          <td>Whether clicking on the dimmer should hide the dimmer (Defaults to true when <code>settings.on</code> is not <code>hover</code></td>
         </tr>
         <tr>
           <td>on</td>

server/documents/modules/transition.html.eco

@@ -439,6 +439,11 @@ type        : 'UI Module'
           <td>transitioned element</td>
           <td>Callback on each transition that changes visibility to hidden</td>
         </tr>
+        <tr>
+          <td>start</td>
+          <td>transitioned element</td>
+          <td>Callback on animation start, useful for queued animations</td>
+        </tr>
         <tr>
           <td>complete</td>
           <td>transitioned element</td>

server/files/javascript/dimmer.js

@@ -5,6 +5,7 @@ semantic.dimmer.ready = function() {
 
   // selector cache
   var
+    $pageDimmer = $('.demo.page.dimmer'),
     $examples   = $('.example'),
     $showButton = $examples.find('.show.button'),
     $pageButton = $examples.find('.page.button'),
@@ -18,24 +19,28 @@ semantic.dimmer.ready = function() {
     show: function() {
       $(this)
         .closest('.example')
-        .find('.segment')
+        .children('.segment:not(.instructive)')
           .dimmer('show')
       ;
     },
     hide: function() {
       $(this)
         .closest('.example')
-        .find('.segment')
+        .children('.segment:not(.instructive)')
           .dimmer('hide')
       ;
     },
     page: function() {
-      $('body > .page')
+      $('body > .demo.page.dimmer')
         .dimmer('show')
       ;
     }
   };
-  
+
+  $pageDimmer
+    .dimmer()
+  ;
+
   $pageButton
     .on('click', handler.page)
   ;

server/files/javascript/semantic.js

@@ -795,7 +795,6 @@ semantic.ready = function() {
       ;
       $code = $codeTag;
 
-      console.log($code, formattedCode);
       $code
         .html(formattedCode)
       ;

server/files/stylesheets/semantic.css

@@ -237,6 +237,9 @@ a:hover {
 #example.divider .ui.grid {
   position: relative;
 }
+#example.dim .segment .wireframe.image {
+  margin-bottom: 0em;
+}
 
 
 #example .download.menu {

server/layouts/default.html.eco

@@ -357,31 +357,10 @@
       </div>
     </div>
   </div>
-  <div class="ui basic language modal">
-    <i class="close icon"></i>
-    <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
-    <div class="content">
-      <div class="middle aligned image">
-        <i class="world icon"></i>
-      </div>
-      <div class="description">
-        <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
-        <div class="ui inverted indicating progress">
-          <div class="bar"></div>
-        </div>
-        <p>We need your help to make Semantic available to  people who speak your language.</p>
-        <p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team please <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
-        </p>
-      </div>
-    </div>
-    <div class="actions">
-      <div class="ui inverted cancel button">No Thanks</div>
-      <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help" target="_blank" class="ui inverted approve teal button">
-        <i class="mail icon"></i>
-        Help Translate
-      </a>
-    </div>
-  </div>
+
+  <%- @partial('language-modal') %>
+  <%- @partial('dimmer-demo') %>
+
   <script src="/javascript/library/less.js"></script>
 </body>
 

server/partials/dimmer-demo.html

@@ -0,0 +1,11 @@
+<div class="ui demo page dimmer">
+  <div class="content">
+    <div class="center">
+      <h2 class="ui inverted icon header">
+        <i class="mail icon"></i>
+        Dimmer Message
+        <div class="sub header">Dimmer sub-header</div>
+      </h2>
+    </div>
+  </div>
+</div>

server/partials/language-modal.html

@@ -0,0 +1,25 @@
+<div class="ui basic language modal">
+  <i class="close icon"></i>
+  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
+  <div class="content">
+    <div class="middle aligned image">
+      <i class="world icon"></i>
+    </div>
+    <div class="description">
+      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
+      <div class="ui inverted indicating progress">
+        <div class="bar"></div>
+      </div>
+      <p>We need your help to make Semantic available to  people who speak your language.</p>
+      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team please <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
+      </p>
+    </div>
+  </div>
+  <div class="actions">
+    <div class="ui inverted cancel button">No Thanks</div>
+    <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help" target="_blank" class="ui inverted approve teal button">
+      <i class="mail icon"></i>
+      Help Translate
+    </a>
+  </div>
+</div>