Merge pull request #2 from Dogfalo/master

update master
Dogfalo · Nov 14, 2015 · d0e4efe · d0e4efe
2 parents 01f09c9 + bd39b09
commit d0e4efe
Show file tree

Hide file tree

Showing 14 changed files with 710 additions and 269 deletions.
diff --git a/bin/materialize.css b/bin/materialize.css
diff --git a/bin/materialize.js b/bin/materialize.js
diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
diff --git a/forms.html b/forms.html
@@ -417,20 +417,7 @@ <h2 class="header">Select</h2>
               </div>
               <div class="col s12">
                 <br>
-                <p>You can add the class <code class="language-markup">browser-default</code> to get the browser default.</p>
-              </div>
-              <div class="col s12 m6">
-                <label>Browser Select</label>
-                <select class="browser-default">
-                  <option value="" disabled selected>Choose your option</option>
-                  <option value="1">Option 1</option>
-                  <option value="2">Option 2</option>
-                  <option value="3">Option 3</option>
-                </select>
-              </div>
-              <div class="col s12">
-                <br>
-                <p>You can add the class <code class="language-markup">icons</code> to get icons with your options. In the option you add the image source with the <code class="language-markup">data-icon</code> attribute. You can add the <code class="language-markup">left</code> or <code class="language-markup">right</code> class to align your icon. You can also add <code class="language-markup">circle</code> to your icon.</p>
+                <p>You can add icons to your options in any type of select. In the option you add the image source with the <code class="language-markup">data-icon</code> attribute. You can add the <code class="language-markup">left</code> or <code class="language-markup">right</code> class to align your icon. You can also add the <code class="language-markup">circle</code> class to your icon.</p>
               </div>
               <div class="input-field col s12 m6">
                 <select class="icons">
@@ -450,6 +437,19 @@ <h2 class="header">Select</h2>
                 </select>
                 <label>Images in select</label>
               </div>
+              <div class="col s12">
+                <br>
+                <p>You can add the class <code class="language-markup">browser-default</code> to get the browser default.</p>
+              </div>
+              <div class="col s12 m6">
+                <label>Browser Select</label>
+                <select class="browser-default">
+                  <option value="" disabled selected>Choose your option</option>
+                  <option value="1">Option 1</option>
+                  <option value="2">Option 2</option>
+                  <option value="3">Option 3</option>
+                </select>
+              </div>
             </div>
           </form>
           <div class="col s12">
@@ -488,14 +488,6 @@ <h2 class="header">Select</h2>
     &lt;label>Optgroups&lt;/label>
   &lt;/div>
 
-  &lt;label>Browser Select&lt;/label>
-  &lt;select class="browser-default">
-    &lt;option value="" disabled selected>Choose your option&lt;/option>
-    &lt;option value="1">Option 1&lt;/option>
-    &lt;option value="2">Option 2&lt;/option>
-    &lt;option value="3">Option 3&lt;/option>
-  &lt;/select>
-
   &lt;div class="input-field col s12 m6">
     &lt;select class="icons">
       &lt;option value="" disabled selected>Choose your option&lt;/option>
@@ -514,6 +506,14 @@ <h2 class="header">Select</h2>
     &lt;/select>
     &lt;label>Images in select&lt;/label>
   &lt;/div>
+
+  &lt;label>Browser Select&lt;/label>
+  &lt;select class="browser-default">
+    &lt;option value="" disabled selected>Choose your option&lt;/option>
+    &lt;option value="1">Option 1&lt;/option>
+    &lt;option value="2">Option 2&lt;/option>
+    &lt;option value="3">Option 3&lt;/option>
+  &lt;/select>
             </code></pre>
           </div>
           <div class="col s12">

diff --git a/grid.html b/grid.html
@@ -228,6 +228,8 @@ <h4>Columns live inside Rows</h4>
 
           <br>
         </div>
+
+        <!-- Grid Offsets -->
         <div id="grid-offsets" class="section scrollspy">
           <h2 class="header">Offsets</h2>
           <p>To offset, simply add <code class="language-markup">offset-s2</code> to the class where <code class="language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.</p>
@@ -237,8 +239,26 @@ <h2 class="header">Offsets</h2>
           </div>
           <pre><code class="language-markup">
     &lt;div class="row">
-      &lt;div class="col s12 grid-example">&lt;span class="flow-text">This div is 12-columns wide on all screen sizes&lt;/span>&lt;/div>
-      &lt;div class="col s6 offset-s6 grid-example">&lt;span class="flow-text">6-columns (offset-by-6)&lt;/span>&lt;/div>
+      &lt;div class="col s12">&lt;span class="flow-text">This div is 12-columns wide on all screen sizes&lt;/span>&lt;/div>
+      &lt;div class="col s6 offset-s6">&lt;span class="flow-text">6-columns (offset-by-6)&lt;/span>&lt;/div>
+    &lt;/div>
+          </code></pre>
+        </div>
+
+        <br>
+
+        <!-- Grid push and pull -->
+        <div id="grid-push" class="section scrollspy">
+          <h2 class="header">Push and Pull</h2>
+          <p>You can easily change the order of your columns with push and pull. Simply add <code class="language-markup">push-s2</code> or <code class="language-markup">pull-s2</code> to the class where <code class="language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.</p>
+          <div class="row">
+            <div class="col s7 push-s5 grid-example"><span style="font-size: 14px;">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
+            <div class="col s5 pull-s7 grid-example"><span style="font-size: 14px;">5-columns wide pulled to the left by 7-columns.</span></div>
+          </div>
+          <pre><code class="language-markup">
+    &lt;div class="row">
+      &lt;div class="col s7 push-s5">&lt;span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.&lt;/span>&lt;/div>
+      &lt;div class="col s5 pull-s7">&lt;span class="flow-text">5-columns wide pulled to the left by 7-columns.&lt;/span>&lt;/div>
     &lt;/div>
           </code></pre>
         </div>
@@ -557,6 +577,7 @@ <h4>More Responsive Grid Examples</h4>
             <li><a href="#grid-container">Container</a></li>
             <li><a href="#grid-intro">Introduction</a></li>
             <li><a href="#grid-offsets">Offsets</a></li>
+            <li><a href="#grid-push">Push and Pull</a></li>
             <li><a href="#grid-layouts">Creating Layouts</a></li>
             <li><a href="#grid-responsive">Responsive Layouts</a></li>
           </ul>

diff --git a/jade/page-contents/forms_content.html b/jade/page-contents/forms_content.html
@@ -306,20 +306,7 @@ <h2 class="header">Select</h2>
               </div>
               <div class="col s12">
                 <br>
-                <p>You can add the class <code class="language-markup">browser-default</code> to get the browser default.</p>
-              </div>
-              <div class="col s12 m6">
-                <label>Browser Select</label>
-                <select class="browser-default">
-                  <option value="" disabled selected>Choose your option</option>
-                  <option value="1">Option 1</option>
-                  <option value="2">Option 2</option>
-                  <option value="3">Option 3</option>
-                </select>
-              </div>
-              <div class="col s12">
-                <br>
-                <p>You can add the class <code class="language-markup">icons</code> to get icons with your options. In the option you add the image source with the <code class="language-markup">data-icon</code> attribute. You can add the <code class="language-markup">left</code> or <code class="language-markup">right</code> class to align your icon. You can also add <code class="language-markup">circle</code> to your icon.</p>
+                <p>You can add icons to your options in any type of select. In the option you add the image source with the <code class="language-markup">data-icon</code> attribute. You can add the <code class="language-markup">left</code> or <code class="language-markup">right</code> class to align your icon. You can also add the <code class="language-markup">circle</code> class to your icon.</p>
               </div>
               <div class="input-field col s12 m6">
                 <select class="icons">
@@ -339,6 +326,19 @@ <h2 class="header">Select</h2>
                 </select>
                 <label>Images in select</label>
               </div>
+              <div class="col s12">
+                <br>
+                <p>You can add the class <code class="language-markup">browser-default</code> to get the browser default.</p>
+              </div>
+              <div class="col s12 m6">
+                <label>Browser Select</label>
+                <select class="browser-default">
+                  <option value="" disabled selected>Choose your option</option>
+                  <option value="1">Option 1</option>
+                  <option value="2">Option 2</option>
+                  <option value="3">Option 3</option>
+                </select>
+              </div>
             </div>
           </form>
           <div class="col s12">
@@ -377,14 +377,6 @@ <h2 class="header">Select</h2>
     &lt;label>Optgroups&lt;/label>
   &lt;/div>
 
-  &lt;label>Browser Select&lt;/label>
-  &lt;select class="browser-default">
-    &lt;option value="" disabled selected>Choose your option&lt;/option>
-    &lt;option value="1">Option 1&lt;/option>
-    &lt;option value="2">Option 2&lt;/option>
-    &lt;option value="3">Option 3&lt;/option>
-  &lt;/select>
-
   &lt;div class="input-field col s12 m6">
     &lt;select class="icons">
       &lt;option value="" disabled selected>Choose your option&lt;/option>
@@ -403,6 +395,14 @@ <h2 class="header">Select</h2>
     &lt;/select>
     &lt;label>Images in select&lt;/label>
   &lt;/div>
+
+  &lt;label>Browser Select&lt;/label>
+  &lt;select class="browser-default">
+    &lt;option value="" disabled selected>Choose your option&lt;/option>
+    &lt;option value="1">Option 1&lt;/option>
+    &lt;option value="2">Option 2&lt;/option>
+    &lt;option value="3">Option 3&lt;/option>
+  &lt;/select>
             </code></pre>
           </div>
           <div class="col s12">

diff --git a/jade/page-contents/grid_content.html b/jade/page-contents/grid_content.html
@@ -118,6 +118,8 @@ <h4>Columns live inside Rows</h4>
 
           <br>
         </div>
+
+        <!-- Grid Offsets -->
         <div id="grid-offsets" class="section scrollspy">
           <h2 class="header">Offsets</h2>
           <p>To offset, simply add <code class="language-markup">offset-s2</code> to the class where <code class="language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.</p>
@@ -127,8 +129,26 @@ <h2 class="header">Offsets</h2>
           </div>
           <pre><code class="language-markup">
     &lt;div class="row">
-      &lt;div class="col s12 grid-example">&lt;span class="flow-text">This div is 12-columns wide on all screen sizes&lt;/span>&lt;/div>
-      &lt;div class="col s6 offset-s6 grid-example">&lt;span class="flow-text">6-columns (offset-by-6)&lt;/span>&lt;/div>
+      &lt;div class="col s12">&lt;span class="flow-text">This div is 12-columns wide on all screen sizes&lt;/span>&lt;/div>
+      &lt;div class="col s6 offset-s6">&lt;span class="flow-text">6-columns (offset-by-6)&lt;/span>&lt;/div>
+    &lt;/div>
+          </code></pre>
+        </div>
+
+        <br>
+
+        <!-- Grid push and pull -->
+        <div id="grid-push" class="section scrollspy">
+          <h2 class="header">Push and Pull</h2>
+          <p>You can easily change the order of your columns with push and pull. Simply add <code class="language-markup">push-s2</code> or <code class="language-markup">pull-s2</code> to the class where <code class="language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.</p>
+          <div class="row">
+            <div class="col s7 push-s5 grid-example"><span style="font-size: 14px;">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
+            <div class="col s5 pull-s7 grid-example"><span style="font-size: 14px;">5-columns wide pulled to the left by 7-columns.</span></div>
+          </div>
+          <pre><code class="language-markup">
+    &lt;div class="row">
+      &lt;div class="col s7 push-s5">&lt;span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.&lt;/span>&lt;/div>
+      &lt;div class="col s5 pull-s7">&lt;span class="flow-text">5-columns wide pulled to the left by 7-columns.&lt;/span>&lt;/div>
     &lt;/div>
           </code></pre>
         </div>
@@ -447,6 +467,7 @@ <h4>More Responsive Grid Examples</h4>
             <li><a href="#grid-container">Container</a></li>
             <li><a href="#grid-intro">Introduction</a></li>
             <li><a href="#grid-offsets">Offsets</a></li>
+            <li><a href="#grid-push">Push and Pull</a></li>
             <li><a href="#grid-layouts">Creating Layouts</a></li>
             <li><a href="#grid-responsive">Responsive Layouts</a></li>
           </ul>

diff --git a/js/cards.js b/js/cards.js
@@ -21,6 +21,7 @@
         }
       }
 
+      $('.card-reveal').closest('.card').css('overflow', 'hidden');
 
     });
 

diff --git a/js/collapsible.js b/js/collapsible.js
@@ -1,4 +1,4 @@
-(function ($) {
+  (function ($) {
   $.fn.collapsible = function(options) {
     var defaults = {
         accordion: undefined
@@ -95,38 +95,36 @@
 
 
 
-      if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
-        // Add click handler to only direct collapsible header children
-        $panel_headers = $this.find('> li > .collapsible-header');
-        $panel_headers.on('click.collapse', function (e) {
-          var element = $(e.target);
+      // Add click handler to only direct collapsible header children
+      $this.on('click.collapse', '> li > .collapsible-header', function(e) {
+        var $header = $(this),
+            element = $(e.target);
 
-          if (isChildrenOfPanelHeader(element)) {
-            element = getPanelHeader(element);
-          }
+        if (isChildrenOfPanelHeader(element)) {
+          element = getPanelHeader(element);
+        }
 
-          element.toggleClass('active');
+        element.toggleClass('active');
+
+        if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
           accordionOpen(element);
-        });
-        // Open first active
+        } else { // Handle Expandables
+          expandableOpen(element);
+
+          if ($header.hasClass('active')) {
+            expandableOpen($header);
+          }
+        }
+      });
+
+      // Open first active
+      var $panel_headers = $this.find('> li > .collapsible-header');
+      if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
         accordionOpen($panel_headers.filter('.active').first());
       }
       else { // Handle Expandables
-        $panel_headers.each(function () {
-          // Add click handler to only direct collapsible header children
-          $(this).on('click.collapse', function (e) {
-            var element = $(e.target);
-            if (isChildrenOfPanelHeader(element)) {
-              element = getPanelHeader(element);
-            }
-            element.toggleClass('active');
-            expandableOpen(element);
-          });
-          // Open any bodies that have the active class
-          if ($(this).hasClass('active')) {
-            expandableOpen($(this));
-          }
-
+        $panel_headers.filter('.active').each(function() {
+          expandableOpen($(this));
         });
       }
 

diff --git a/js/forms.js b/js/forms.js
@@ -307,6 +307,36 @@
         label = selectOptions.first();
       }
 
+      // Function that renders and appends the option taking into
+      // account type and possible image icon.
+      var appendOptionWithIcon = function(select, option, type) {
+        // Add disabled attr if disabled
+        var disabledClass = (option.is(':disabled')) ? 'disabled ' : '';
+
+        // add icons
+        var icon_url = option.data('icon');
+        var classes = option.attr('class');
+        if (!!icon_url) {
+          var classString = '';
+          if (!!classes) classString = ' class="' + classes + '"';
+
+          // Check for multiple type.
+          if (type === 'multiple') {
+            options.append($('<li class="' + disabledClass + '"><img src="' + icon_url + '"' + classString + '><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'));
+          } else {
+            options.append($('<li class="' + disabledClass + '"><img src="' + icon_url + '"' + classString + '><span>' + option.html() + '</span></li>'));
+          }
+          return true;
+        }
+
+        // Check for multiple type.
+        if (type === 'multiple') {
+          options.append($('<li class="' + disabledClass + '"><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'));
+        } else {
+          options.append($('<li class="' + disabledClass + '"><span>' + option.html() + '</span></li>'));
+        }
+      };
+
       /* Create dropdown structure. */
       if (selectOptGroups.length) {
         // Check for optgroup
@@ -315,37 +345,17 @@
           options.append($('<li class="optgroup"><span>' + $(this).attr('label') + '</span></li>'));
 
           selectOptions.each(function() {
-            var disabledClass = ($(this).is(':disabled')) ? 'disabled ' : '';
-
-            // Add icons
-            if ($select.hasClass('icons')) {
-              var icon_url = $(this).data('icon');
-              var classes = $(this).attr('class');
-              if (!!icon_url) {
-                options.append($('<li class="' + disabledClass + '"><img src="' + icon_url + '" class="' + classes + '"><span>' + $(this).html() + '</span></li>'));
-                return true;
-              }
-            }
-            options.append($('<li class="' + disabledClass + '"><span>' + $(this).html() + '</span></li>'));
+            appendOptionWithIcon($select, $(this));
           });
         });
       } else {
         selectOptions.each(function () {
-          // Add disabled attr if disabled
           var disabledClass = ($(this).is(':disabled')) ? 'disabled ' : '';
           if (multiple) {
-            options.append($('<li class="' + disabledClass + '"><span><input type="checkbox"' + disabledClass + '/><label></label>' + $(this).html() + '</span></li>'));
+            appendOptionWithIcon($select, $(this), 'multiple');
+
           } else {
-            // Add icons
-            if ($select.hasClass('icons')) {
-              var icon_url = $(this).data('icon');
-              var classes = $(this).attr('class');
-              if (!!icon_url) {
-                options.append($('<li class="' + disabledClass + '"><img src="' + icon_url + '" class="' + classes + '"><span>' + $(this).html() + '</span></li>'));
-                return true;
-              }
-            }
-            options.append($('<li class="' + disabledClass + '"><span>' + $(this).html() + '</span></li>'));
+            appendOptionWithIcon($select, $(this));
           }
         });
       }