Updating docs

Gruntfile.js

@@ -31,6 +31,14 @@ module.exports = function(grunt) {
       'karma:travis'
     ],
 
+    specTasks = [
+      // generate code docs
+      'docco:generate',
+
+      // copies spec files over to docs
+      'copy:specToDocs'
+    ],
+
     buildTasks = [
       // clean build directory
       'clean:build',
@@ -65,8 +73,6 @@ module.exports = function(grunt) {
       // creates custom license in header
       'cssmin:addBanner',
 
-      // generate code docs
-      'docco:generate',
 
       // cleans previous generated release
       'clean:release',
@@ -80,9 +86,6 @@ module.exports = function(grunt) {
       // create rtl release
       'cssjanus:rtl',
 
-      // copies spec files over to docs
-      'copy:specToDocs',
-
       // copies examples over to docs
       'copy:examplesToDocs',
 
@@ -563,6 +566,7 @@ module.exports = function(grunt) {
   grunt.initConfig(config);
   grunt.registerTask('default', defaultTasks);
   grunt.registerTask('build', buildTasks);
+  grunt.registerTask('spec', specTasks);
   grunt.registerTask('test', testTasks);
 
   // compiles only changed less files <https://npmjs.org/package/grunt-contrib-watch>

RELEASE NOTES.md

@@ -8,6 +8,7 @@
 - **List** - Adds documentation for module format
 - **List** - Adds onTabInit for local tabs on first load
 - **List** - Popups can now have a different target than itself
+- **Modal** - Modal hide can be cancelled from ``onApprove`` and ``onDeny`` by returning false from callback
 
 **Docs**
 - **Popup** - Adds more popup examples
@@ -28,6 +29,7 @@
 - **Popup** - Popup will not reshow a visible popup on hover
 
 **Updates**
+- **Accordion** - Reduces vertical padding on basic accordion content
 - **Header** - Block header now uses RGBA instead of solid color by default
 - **Label** - Ribbon labels now have a shadow color
 - **List** - Horizontal padding on icon list slightly increased, fixes to icon position

build/less/modules/modal.js

@@ -63,6 +63,11 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
+          if(typeof $.fn.dimmer === undefined) {
+            module.error(error.dimmer);
+            return;
+          }
+
           $dimmable = $context
             .dimmer({
               closable : false,
@@ -580,6 +585,7 @@ $.fn.modal.settings = {
     deny     : '.actions .negative, .actions .cancel'
   },
   error : {
+    dimmer : 'UI Dimmer, a required component is not included in this page',
     method : 'The method you called is not defined.'
   },
   className : {

build/less/views/list.less

@@ -68,7 +68,7 @@ ol.ui.list li,
 
 /* Icon */
 .ui.list .item > .icon {
-  display: inline-block;
+  display: table-cell;
   margin: 0em;
   padding: 0.1em 0.5em 0em 0em;
   vertical-align: top;
@@ -99,7 +99,7 @@ ol.ui.list li,
   line-height: 1.2;
 }
 .ui.list .item > .icon + .content {
-  display: inline-block;
+  display: table-cell;
   vertical-align: top;
   padding-left: 0.5em;
 }

build/minified/modules/modal.js

@@ -63,6 +63,11 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
+          if(typeof $.fn.dimmer === undefined) {
+            module.error(error.dimmer);
+            return;
+          }
+
           $dimmable = $context
             .dimmer({
               closable : false,
@@ -580,6 +585,7 @@ $.fn.modal.settings = {
     deny     : '.actions .negative, .actions .cancel'
   },
   error : {
+    dimmer : 'UI Dimmer, a required component is not included in this page',
     method : 'The method you called is not defined.'
   },
   className : {

build/packaged/css/semantic.css

@@ -14283,7 +14283,7 @@ ol.ui.list li,
 }
 /* Icon */
 .ui.list .item > .icon {
-  display: inline-block;
+  display: table-cell;
   margin: 0em;
   padding: 0.1em 0.5em 0em 0em;
   vertical-align: top;
@@ -14311,7 +14311,7 @@ ol.ui.list li,
   line-height: 1.2;
 }
 .ui.list .item > .icon + .content {
-  display: inline-block;
+  display: table-cell;
   vertical-align: top;
   padding-left: 0.5em;
 }

build/packaged/javascript/semantic.js

@@ -5324,6 +5324,11 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
+          if(typeof $.fn.dimmer === undefined) {
+            module.error(error.dimmer);
+            return;
+          }
+
           $dimmable = $context
             .dimmer({
               closable : false,
@@ -5841,6 +5846,7 @@ $.fn.modal.settings = {
     deny     : '.actions .negative, .actions .cancel'
   },
   error : {
+    dimmer : 'UI Dimmer, a required component is not included in this page',
     method : 'The method you called is not defined.'
   },
   className : {

build/uncompressed/modules/modal.js

@@ -63,6 +63,11 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
+          if(typeof $.fn.dimmer === undefined) {
+            module.error(error.dimmer);
+            return;
+          }
+
           $dimmable = $context
             .dimmer({
               closable : false,
@@ -580,6 +585,7 @@ $.fn.modal.settings = {
     deny     : '.actions .negative, .actions .cancel'
   },
   error : {
+    dimmer : 'UI Dimmer, a required component is not included in this page',
     method : 'The method you called is not defined.'
   },
   className : {

build/uncompressed/views/list.css

@@ -57,7 +57,7 @@ ol.ui.list li,
 }
 /* Icon */
 .ui.list .item > .icon {
-  display: inline-block;
+  display: table-cell;
   margin: 0em;
   padding: 0.1em 0.5em 0em 0em;
   vertical-align: top;
@@ -85,7 +85,7 @@ ol.ui.list li,
   line-height: 1.2;
 }
 .ui.list .item > .icon + .content {
-  display: inline-block;
+  display: table-cell;
   vertical-align: top;
   padding-left: 0.5em;
 }

rtl/less/modules/modal.js

@@ -63,6 +63,11 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
+          if(typeof $.fn.dimmer === undefined) {
+            module.error(error.dimmer);
+            return;
+          }
+
           $dimmable = $context
             .dimmer({
               closable : false,
@@ -580,6 +585,7 @@ $.fn.modal.settings = {
     deny     : '.actions .negative, .actions .cancel'
   },
   error : {
+    dimmer : 'UI Dimmer, a required component is not included in this page',
     method : 'The method you called is not defined.'
   },
   className : {

rtl/less/views/list.less

@@ -68,7 +68,7 @@ ol.ui.list li,
 
 /* Icon */
 .ui.list .item > .icon {
-  display: inline-block;
+  display: table-cell;
   margin: 0em;
   padding: 0.1em 0em 0em 0.5em;
   vertical-align: top;
@@ -99,7 +99,7 @@ ol.ui.list li,
   line-height: 1.2;
 }
 .ui.list .item > .icon + .content {
-  display: inline-block;
+  display: table-cell;
   vertical-align: top;
   padding-right: 0.5em;
 }

rtl/minified/modules/modal.js

@@ -63,6 +63,11 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
+          if(typeof $.fn.dimmer === undefined) {
+            module.error(error.dimmer);
+            return;
+          }
+
           $dimmable = $context
             .dimmer({
               closable : false,
@@ -580,6 +585,7 @@ $.fn.modal.settings = {
     deny     : '.actions .negative, .actions .cancel'
   },
   error : {
+    dimmer : 'UI Dimmer, a required component is not included in this page',
     method : 'The method you called is not defined.'
   },
   className : {

rtl/packaged/css/semantic.css

@@ -14283,7 +14283,7 @@ ol.ui.list li,
 }
 /* Icon */
 .ui.list .item > .icon {
-  display: inline-block;
+  display: table-cell;
   margin: 0em;
   padding: 0.1em 0em 0em 0.5em;
   vertical-align: top;
@@ -14311,7 +14311,7 @@ ol.ui.list li,
   line-height: 1.2;
 }
 .ui.list .item > .icon + .content {
-  display: inline-block;
+  display: table-cell;
   vertical-align: top;
   padding-right: 0.5em;
 }

rtl/packaged/javascript/semantic.js

@@ -5324,6 +5324,11 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
+          if(typeof $.fn.dimmer === undefined) {
+            module.error(error.dimmer);
+            return;
+          }
+
           $dimmable = $context
             .dimmer({
               closable : false,
@@ -5841,6 +5846,7 @@ $.fn.modal.settings = {
     deny     : '.actions .negative, .actions .cancel'
   },
   error : {
+    dimmer : 'UI Dimmer, a required component is not included in this page',
     method : 'The method you called is not defined.'
   },
   className : {

rtl/uncompressed/modules/modal.js

@@ -63,6 +63,11 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
+          if(typeof $.fn.dimmer === undefined) {
+            module.error(error.dimmer);
+            return;
+          }
+
           $dimmable = $context
             .dimmer({
               closable : false,
@@ -580,6 +585,7 @@ $.fn.modal.settings = {
     deny     : '.actions .negative, .actions .cancel'
   },
   error : {
+    dimmer : 'UI Dimmer, a required component is not included in this page',
     method : 'The method you called is not defined.'
   },
   className : {

rtl/uncompressed/views/list.css

@@ -57,7 +57,7 @@ ol.ui.list li,
 }
 /* Icon */
 .ui.list .item > .icon {
-  display: inline-block;
+  display: table-cell;
   margin: 0em;
   padding: 0.1em 0em 0em 0.5em;
   vertical-align: top;
@@ -85,7 +85,7 @@ ol.ui.list li,
   line-height: 1.2;
 }
 .ui.list .item > .icon + .content {
-  display: inline-block;
+  display: table-cell;
   vertical-align: top;
   padding-right: 0.5em;
 }

server/documents/elements/button.html.eco

@@ -122,27 +122,27 @@ type        : 'UI Element'
     <p>A button can be formatted to link to a social website</p>
     <div class="ui facebook button">
       <i class="facebook icon"></i>
-      Log-in with Facebook
+      Facebook
     </div>
     <div class="ui twitter button">
       <i class="twitter icon"></i>
-      Sign-up with Twitter
+      Twitter
     </div>
     <div class="ui google plus button">
       <i class="google plus icon"></i>
-      Share on Google Plus
+      Google Plus
     </div>
     <div class="ui linkedin button">
       <i class="linkedin icon"></i>
-      Associate your LinkedIn
+      LinkedIn
     </div>
     <div class="ui instagram button">
       <i class="instagram icon"></i>
-      Import from Instagram
+      Instagram
     </div>
     <div class="ui youtube button">
       <i class="youtube icon"></i>
-      Watch on YouTube
+      YouTube
     </div>
   </div>
 

server/documents/index.html.eco

@@ -15,7 +15,7 @@ type   : 'Semantic'
   <div class="ui page grid">
     <div class="column">
       <div class="introduction">
-        <h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.6.5</a></h1>
+        <h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.7.0</a></h1>
         <h2 class="ui header">UI is the vocabulary of the web.</h2>
         <p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
         <a class="ui black large labeled launch icon button"><i class="icon list layout"></i> View UI</a>

server/documents/module.html.eco

@@ -51,9 +51,14 @@ type        : 'Semantic'
         </div>
       </div>
     </div>
-    <a class="ui secondary labeled icon button" href="/spec/docs/module.commented.html">
-      <i class="book icon"></i>
-      View Commented Design Pattern
+    <div class="ui divider"></div>
+    <a href="/spec/docs/modal.commented.html" class="ui large secondary labeled icon button">
+      <i class="info icon"></i>
+      Real World Commented Example
+    </a>
+    <a href="/spec/docs/module.commented.html" class="ui large black labeled icon button">
+      <i class="info icon"></i>
+      Commented Design Pattern
     </a>
   </div>
   <div class="ui tab" data-tab="init">
@@ -204,8 +209,7 @@ type        : 'Semantic'
     <p>Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object</p>
 
     <h3 class="ui header">Common Settings</h3>
-    <p>That means class names, selectors, error output, dom metadata etc can all be controlled by altering the settings object.</p>
-    <p>The following is a list of common settings usually found in each javascript module.
+    <p>The following is a list of common settings usually found in javascript modules.
     <table class="ui celled sortable definition table segment">
       <thead>
         <th>Name</th>
@@ -218,15 +222,15 @@ type        : 'Semantic'
         </tr>
         <tr>
           <td>debug</td>
-          <td>Provides standard debug output to console.</td>
+          <td>Whether to provide standard debug output to console.</td>
         </tr>
         <tr>
           <td>performance</td>
-          <td>Provides performance logging to console of internal method calls.</td>
+          <td>Whether to provide performance logging to console of internal method calls.</td>
         </tr>
         <tr>
           <td>verbose</td>
-          <td>Provides extra debug output to console</td>
+          <td>Whether to provide extra debug output to console</td>
         </tr>
         <tr>
           <td>namespace</td>
@@ -242,7 +246,7 @@ type        : 'Semantic'
         </tr>
         <tr>
           <td>classNames</td>
-          <td>An object containing all classnames used in the module.</td>
+          <td>An object containing all class names used in the module.</td>
         </tr>
         <tr>
           <td>errors</td>

server/documents/modules/accordion.html.eco

@@ -131,12 +131,12 @@ type        : 'UI Module'
               <input placeholder="Last Name" type="text">
             </div>
           </div>
-          <div class="title">
-            <i class="icon dropdown"></i>
-            Optional Details
-          </div>
-          <div class="content">
-            <div class="field">
+          <div class="field">
+            <div class="title">
+              <i class="icon dropdown"></i>
+              Optional Details
+            </div>
+            <div class="content">
               <label>Maiden Name</label>
               <input placeholder="Maiden Name" type="text">
             </div>

server/files/javascript/semantic.js

@@ -374,7 +374,6 @@ semantic.ready = function() {
           .each(handler.initializeCode)
         ;
         $existingCode
-          .filter(':visible')
           .each(handler.createAnnotation)
         ;
       }