modal fixes

Former-commit-id: 224027841b
Former-commit-id: 56af6df3bf

build/minified/modules/modal.js

@@ -56,10 +56,13 @@ $.fn.modal = function(parameters) {
       modal  = {
 
         initialize: function() {
-          modal.verbose('Initializing modal');
+          modal.verbose('Attaching events');
           $closeButton
             .on('click', modal.event.close)
           ;
+          modal.cache.sizes();
+
+          modal.verbose('Creating dimmer');
           $context
             .dimmer({
               closable: settings.closable,
@@ -81,12 +84,11 @@ $.fn.modal = function(parameters) {
           $dimmer = $context.children(selector.dimmer);
           if( $modal.parent()[0] !== $dimmer[0] ) {
             modal.debug('Moving element inside dimmer', $context);
-            $modal
+            $modal = $modal
               .detach()
               .appendTo($dimmer)
             ;
           }
-          modal.cache.sizes();
           modal.instantiate();
         },
 
@@ -140,6 +142,7 @@ $.fn.modal = function(parameters) {
         },
 
         show: function() {
+          modal.debug('Showing modal');
           modal.set.type();
           modal.set.position();
           modal.hideAll();
@@ -153,10 +156,12 @@ $.fn.modal = function(parameters) {
               .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
+          modal.debug('Triggering dimmer');
           $context.dimmer('show');
         },
 
         hide: function() {
+          modal.debug('Hiding modal');
           // remove keyboard detection
           $document
             .off('keyup.' + namespace)
@@ -209,6 +214,7 @@ $.fn.modal = function(parameters) {
                 ? $(window).height()
                 : $context.height()
             };
+            console.log($modal);
             modal.debug('Caching modal and container sizes', modal.cache);
           }
         },
@@ -240,7 +246,7 @@ $.fn.modal = function(parameters) {
             }
           },
           position: function() {
-            modal.verbose('Centering modal on page');
+            modal.verbose('Centering modal on page', modal.cache.height / 2);
             if(modal.can.fit()) {
               $modal
                 .css({

build/packaged/modules/modal.js

@@ -56,10 +56,13 @@ $.fn.modal = function(parameters) {
       modal  = {
 
         initialize: function() {
-          modal.verbose('Initializing modal');
+          modal.verbose('Attaching events');
           $closeButton
             .on('click', modal.event.close)
           ;
+          modal.cache.sizes();
+
+          modal.verbose('Creating dimmer');
           $context
             .dimmer({
               closable: settings.closable,
@@ -81,12 +84,11 @@ $.fn.modal = function(parameters) {
           $dimmer = $context.children(selector.dimmer);
           if( $modal.parent()[0] !== $dimmer[0] ) {
             modal.debug('Moving element inside dimmer', $context);
-            $modal
+            $modal = $modal
               .detach()
               .appendTo($dimmer)
             ;
           }
-          modal.cache.sizes();
           modal.instantiate();
         },
 
@@ -140,6 +142,7 @@ $.fn.modal = function(parameters) {
         },
 
         show: function() {
+          modal.debug('Showing modal');
           modal.set.type();
           modal.set.position();
           modal.hideAll();
@@ -153,10 +156,12 @@ $.fn.modal = function(parameters) {
               .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
+          modal.debug('Triggering dimmer');
           $context.dimmer('show');
         },
 
         hide: function() {
+          modal.debug('Hiding modal');
           // remove keyboard detection
           $document
             .off('keyup.' + namespace)
@@ -209,6 +214,7 @@ $.fn.modal = function(parameters) {
                 ? $(window).height()
                 : $context.height()
             };
+            console.log($modal);
             modal.debug('Caching modal and container sizes', modal.cache);
           }
         },
@@ -240,7 +246,7 @@ $.fn.modal = function(parameters) {
             }
           },
           position: function() {
-            modal.verbose('Centering modal on page');
+            modal.verbose('Centering modal on page', modal.cache.height / 2);
             if(modal.can.fit()) {
               $modal
                 .css({

build/uncompressed/elements/step.css

@@ -31,7 +31,7 @@
   z-index: 2;
   content: '';
   top: 0em;
-  right: -1.48em;
+  right: -1.45em;
   border-bottom: 1.5em solid transparent;
   border-left: 1.5em solid #FFFFFF;
   border-top: 1.5em solid transparent;

build/uncompressed/modules/modal.css

@@ -77,6 +77,9 @@
   vertical-align: middle;
   box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
 }
+.ui.modal > .content p {
+  line-height: 1.6;
+}
 /*--------------
      Actions
 ---------------*/

build/uncompressed/modules/modal.js

@@ -56,10 +56,13 @@ $.fn.modal = function(parameters) {
       modal  = {
 
         initialize: function() {
-          modal.verbose('Initializing modal');
+          modal.verbose('Attaching events');
           $closeButton
             .on('click', modal.event.close)
           ;
+          modal.cache.sizes();
+
+          modal.verbose('Creating dimmer');
           $context
             .dimmer({
               closable: settings.closable,
@@ -81,12 +84,11 @@ $.fn.modal = function(parameters) {
           $dimmer = $context.children(selector.dimmer);
           if( $modal.parent()[0] !== $dimmer[0] ) {
             modal.debug('Moving element inside dimmer', $context);
-            $modal
+            $modal = $modal
               .detach()
               .appendTo($dimmer)
             ;
           }
-          modal.cache.sizes();
           modal.instantiate();
         },
 
@@ -140,6 +142,7 @@ $.fn.modal = function(parameters) {
         },
 
         show: function() {
+          modal.debug('Showing modal');
           modal.set.type();
           modal.set.position();
           modal.hideAll();
@@ -153,10 +156,12 @@ $.fn.modal = function(parameters) {
               .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
+          modal.debug('Triggering dimmer');
           $context.dimmer('show');
         },
 
         hide: function() {
+          modal.debug('Hiding modal');
           // remove keyboard detection
           $document
             .off('keyup.' + namespace)
@@ -209,6 +214,7 @@ $.fn.modal = function(parameters) {
                 ? $(window).height()
                 : $context.height()
             };
+            console.log($modal);
             modal.debug('Caching modal and container sizes', modal.cache);
           }
         },
@@ -240,7 +246,7 @@ $.fn.modal = function(parameters) {
             }
           },
           position: function() {
-            modal.verbose('Centering modal on page');
+            modal.verbose('Centering modal on page', modal.cache.height / 2);
             if(modal.can.fit()) {
               $modal
                 .css({

node/src/documents/modules/modal.html

@@ -42,7 +42,7 @@ type   : 'UI Module'
         <img class="ui medium image" src="/images/demo/avatar2.jpg">
       </div>
       <div class="right">
-        <div class="ui header">Are you sure you want to upload that photo?</div>
+        <div class="ui header">Are you sure you want to upload that?</div>
         <p>I mean it's not really the best profile photo.</p>
         <p>It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.</p>
       </div>

node/src/documents/modules/rating.html

@@ -81,7 +81,7 @@ type   : 'UI Module'
 
   <div class="example">
     <h4 class="ui header">Star</h4>
-    <p>A star rating uses a set of star glyphs to show a rating</p>
+    <p>A rating can use a set of star icons</p>
     <div class="ui star rating">
       <i class="icon"></i>
       <i class="icon"></i>
@@ -93,7 +93,7 @@ type   : 'UI Module'
 
   <div class="example">
     <h4 class="ui header">Heart</h4>
-    <p>A heart rating uses a set of heart glyphs to show a rating</p>
+    <p>A rating can use a set of heart icons</p>
     <div class="ui heart rating">
       <i class="icon"></i>
       <i class="icon"></i>

node/src/files/components/semantic/elements/step.css

@@ -31,7 +31,7 @@
   z-index: 2;
   content: '';
   top: 0em;
-  right: -1.48em;
+  right: -1.45em;
   border-bottom: 1.5em solid transparent;
   border-left: 1.5em solid #FFFFFF;
   border-top: 1.5em solid transparent;

node/src/files/components/semantic/modules/modal.css

@@ -77,6 +77,9 @@
   vertical-align: middle;
   box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
 }
+.ui.modal > .content p {
+  line-height: 1.6;
+}
 /*--------------
      Actions
 ---------------*/

node/src/files/components/semantic/modules/modal.js

@@ -56,10 +56,13 @@ $.fn.modal = function(parameters) {
       modal  = {
 
         initialize: function() {
-          modal.verbose('Initializing modal');
+          modal.verbose('Attaching events');
           $closeButton
             .on('click', modal.event.close)
           ;
+          modal.cache.sizes();
+
+          modal.verbose('Creating dimmer');
           $context
             .dimmer({
               closable: settings.closable,
@@ -81,12 +84,11 @@ $.fn.modal = function(parameters) {
           $dimmer = $context.children(selector.dimmer);
           if( $modal.parent()[0] !== $dimmer[0] ) {
             modal.debug('Moving element inside dimmer', $context);
-            $modal
+            $modal = $modal
               .detach()
               .appendTo($dimmer)
             ;
           }
-          modal.cache.sizes();
           modal.instantiate();
         },
 
@@ -140,6 +142,7 @@ $.fn.modal = function(parameters) {
         },
 
         show: function() {
+          modal.debug('Showing modal');
           modal.set.type();
           modal.set.position();
           modal.hideAll();
@@ -153,10 +156,12 @@ $.fn.modal = function(parameters) {
               .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
+          modal.debug('Triggering dimmer');
           $context.dimmer('show');
         },
 
         hide: function() {
+          modal.debug('Hiding modal');
           // remove keyboard detection
           $document
             .off('keyup.' + namespace)
@@ -209,6 +214,7 @@ $.fn.modal = function(parameters) {
                 ? $(window).height()
                 : $context.height()
             };
+            console.log($modal);
             modal.debug('Caching modal and container sizes', modal.cache);
           }
         },
@@ -240,7 +246,7 @@ $.fn.modal = function(parameters) {
             }
           },
           position: function() {
-            modal.verbose('Centering modal on page');
+            modal.verbose('Centering modal on page', modal.cache.height / 2);
             if(modal.can.fit()) {
               $modal
                 .css({

node/src/files/stylesheets/semantic.css

@@ -282,7 +282,7 @@ a:hover {
 #example .masthead {
   text-align: center;
   background: #00B5AD url(/images/tile-bg.png) repeat fixed 0% 0%;
-  margin-top: 40px;
+  margin-top: 38px;
   padding: 50px 0px;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 0px;

src/modules/modal.js

@@ -56,10 +56,13 @@ $.fn.modal = function(parameters) {
       modal  = {
 
         initialize: function() {
-          modal.verbose('Initializing modal');
+          modal.verbose('Attaching events');
           $closeButton
             .on('click', modal.event.close)
           ;
+          modal.cache.sizes();
+
+          modal.verbose('Creating dimmer');
           $context
             .dimmer({
               closable: settings.closable,
@@ -81,12 +84,11 @@ $.fn.modal = function(parameters) {
           $dimmer = $context.children(selector.dimmer);
           if( $modal.parent()[0] !== $dimmer[0] ) {
             modal.debug('Moving element inside dimmer', $context);
-            $modal
+            $modal = $modal
               .detach()
               .appendTo($dimmer)
             ;
           }
-          modal.cache.sizes();
           modal.instantiate();
         },
 
@@ -140,6 +142,7 @@ $.fn.modal = function(parameters) {
         },
 
         show: function() {
+          modal.debug('Showing modal');
           modal.set.type();
           modal.set.position();
           modal.hideAll();
@@ -153,10 +156,12 @@ $.fn.modal = function(parameters) {
               .fadeIn(settings.duration, settings.easing, modal.set.active)
             ;
           }
+          modal.debug('Triggering dimmer');
           $context.dimmer('show');
         },
 
         hide: function() {
+          modal.debug('Hiding modal');
           // remove keyboard detection
           $document
             .off('keyup.' + namespace)
@@ -209,6 +214,7 @@ $.fn.modal = function(parameters) {
                 ? $(window).height()
                 : $context.height()
             };
+            console.log($modal);
             modal.debug('Caching modal and container sizes', modal.cache);
           }
         },
@@ -240,7 +246,7 @@ $.fn.modal = function(parameters) {
             }
           },
           position: function() {
-            modal.verbose('Centering modal on page');
+            modal.verbose('Centering modal on page', modal.cache.height / 2);
             if(modal.can.fit()) {
               $modal
                 .css({

src/modules/modal.less

@@ -98,6 +98,9 @@
 
   box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
 }
+.ui.modal > .content p {
+  line-height: 1.6;
+}
 
 /*--------------
      Actions