express_ui 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 75e1e5572ca4d44eb9962fa276654364155cd277
-  data.tar.gz: 1f4bb353592ebb1bee249c9ce6f9eb77294cf741
+  metadata.gz: 889d3a9fcc568593ba371a4930ac8d20a65f5724
+  data.tar.gz: 1f30e7a1bbba7791d382423f5c21d705250a7f90
 SHA512:
-  metadata.gz: b8f97a85011fddc1e9aa973e795d0f1661ce10a9c6975289e8539a6ef9641a383c0e606b4fb29c216b24cc62c93a6e71a27974cf64c5c9e965bb916e9466f76b
-  data.tar.gz: 4e1239f77a8d21c916f791f951a5f5a7e1d704e0662724c62b064852a549084b50ee9023ca95ba89f216267bdd05c9a48d66da7c8f4355b6d9406d5d16c8ba02
+  metadata.gz: 5bd82bbc36ac2c1faa5c1e019cd5bc25b3b61e2ffaa33c1464c0552476ea5ba12659299b14087e538973ed4ca59c9b8053019ca8759a5758fcf03ad34ef0f6f6
+  data.tar.gz: 0db2620e95950be01f20ea0845722d96f529504bf4ed6b35a3bf97469730b9366ad45811dd40ca40e0fcbe3c62322e90dc3f15ba47a71d54b9103191094af840

data/app/assets/javascripts/express_ui/application.js

@@ -20,6 +20,10 @@ $(document).ready(function() {
   $('.ae-calendar').fullCalendar();
   $('.ae-select').select2();
   $('.ae-accordion-trigger').QuickAccord();
+  $('.ae-open-mega-menu').click(function() {
+    $(this).siblings( '.ae-nav-mega-menu-content' ).toggleClass('ae-hidden');
+    return false;
+  });
   $('.ae-open-filter').click(function() {
     $(this).parent().siblings( '.ae-table-filter' ).toggleClass('ae-hidden');
   	return false;

data/app/views/express_ui/molecules/_nav.html.erb

@@ -1,9 +1,64 @@
 <section>
 <h4>Basic Menu</h4>
-<p>Uses basic list</p>
+
+<table>
+<thead><th>Code</th><th>Notes</th></thead>
+<tbody>
+	<tr>
+		<td><code>&lt;nav class="ae-nav-main"&gt;&lt;/nav&gt;</code></td>
+		<td><p>Required. Wrap the nav and content in this parent class.</p></td>
+	</tr>
+	<tr>
+		<td><code>.ae-list-inline <br /> .ae-list-block</code> <br /></td>
+		<td><p>Optional. Display nav in a <code>&lt;ul&gt;&lt;/ul&gt;</code>. Can be in block or list. </p></td>
+	</tr>
+	<tr>
+		<td><code>.ae-nav-item</code></td>
+		<td><p>Required. Each nav item in the list should have this class. </code> </p></td>
+	</tr>
+	<tr>
+		<td><code>.ae-nav-right <br /> .ae-nav-left</code></td>
+		<td><p>Optional. Align the nav left or right.</p></td>
+	</tr>
+
+</tbody>
+</table>
+
+
+<%= render "express_ui/molecules/nav_menu" %>
+
+
 <h4>Mega Menu</h4>
 
-<p>Choose between <code>ae-nav-mega-menu-list</code>  or <code>ae-nav-mega-menu-list-icon</code></p>
+<table>
+<thead><th>Code</th><th>Notes</th></thead>
+<tbody>
+	<tr>
+		<td><code>.ae-mega-menu</code></td>
+		<td><p>Required. Wrap the mega menu trigger and content in this parent class.</p></td>
+	</tr>
+	<tr>
+		<td><code>.ae-nav-mega-menu-content</code></td>
+		<td><p>Required. Contains the mega menu.</p></td>
+	</tr>
+	<tr>
+		<td><code>.ae-open-mega-menu</code></td>
+		<td><p>Required. Opens the mega menu.</p></td>
+	</tr>
+	<tr>
+		<td><code>.ae-nav-mega-menu-list</code></td>
+		<td><p>Required. Each nav item in the list should have this class. </code> </p></td>
+	</tr>
+
+	<tr>
+		<td><code>.ae-nav-mega-menu-list</code> <br />
+		<code>.ae-nav-mega-menu-list-icons</code></td>
+		<td><p>Required at least 1. The menu should contain a <code>&lt;ul&gt;&lt;/ul&gt;</code> that has at least 1 of these classes. </p></td>
+	</tr>
+
+</tbody>
+
+</table>
 
 <div class="ae-demo-container">
 	<%= render "express_ui/molecules/nav_mega_menu" %>

data/app/views/express_ui/molecules/_nav_mega_menu.html.et

@@ -0,0 +1,94 @@
+code_demo {
+  %Q{
+    div(class: 'ae-mega-menu') {
+      a(href: '#', class:'ae-btn ae-btn-primary ae-open-mega-menu') { 'Open Mega Menu List' }
+      div(class: 'ae-nav-mega-menu-content ae-hidden') {
+
+        h3(class: 'ae-mega-menu-title') {
+          text_node 'Modules'
+          a(href: '#', class:'ae-mega-menu-close ae-u-float-right') { '×' }
+        }
+
+        ul(class: 'ae-list-block ae-nav-mega-menu-list') {
+          li(class: 'active ae-nav-mega-menu-item') {
+            a(href: '#') { 'Express Admin' }
+          }
+          li(class: 'ae-nav-mega-menu-item') {
+            a(href: '#') { 'Express Auth' }
+          }
+          li(class: 'ae-nav-mega-menu-item') {
+            a(href: '#') { 'Express Billing' }
+          }
+
+        }
+      }
+    }
+
+    div(class: 'ae-mega-menu') {
+      a(href: '#', class:'ae-btn ae-btn-primary ae-open-mega-menu') { 'Open Mega Menu List with Big Icons' }
+      div(class: 'ae-nav-mega-menu-content ae-hidden') {
+
+        h3(class: 'ae-mega-menu-title') {
+          text_node 'Modules'
+          a(href: '#', class:'ae-mega-menu-close ae-u-float-right') { '×' }
+        }
+
+        ul(class: 'ae-list-inline ae-nav-mega-menu-list-icons') {
+          li(class: 'active ae-nav-mega-menu-item') {
+            a(href: '#') {
+              image_tag 'appexpress/express_admin.svg', class: 'nav-logo', width: '60', alt: 'Express Admin'
+              text_node 'Express Admin'
+            }
+          }
+          li(class: ' ae-nav-mega-menu-item') {
+            a(href: '#') {
+              image_tag 'appexpress/express_auth.svg', class: 'nav-logo', width: '60', alt: 'Express Auth'
+              text_node 'Express Auth'
+            }
+          }
+          li(class: ' ae-nav-mega-menu-item') {
+            a(href: '#') {
+              image_tag 'appexpress/express_billing.svg', class: 'nav-logo', width: '60', alt: 'Express Billing'
+              text_node 'Express Billing  '
+            }
+          }
+
+        }
+      }
+    }
+
+    div(class: 'ae-mega-menu') {
+      a(href: '#', class:'ae-btn ae-btn-primary ae-open-mega-menu') { 'Open Mega Menu List with Small Icons' }
+      div(class: 'ae-nav-mega-menu-content ae-hidden') {
+
+        h3(class: 'ae-mega-menu-title') {
+          text_node 'Modules'
+          a(href: '#', class:'ae-mega-menu-close ae-u-float-right') { '×' }
+        }
+
+        ul(class: 'ae-list-block ae-nav-mega-menu-list') {
+          li(class: 'active ae-nav-mega-menu-item') {
+            a(href: '#') {
+              image_tag 'appexpress/express_admin.svg', class: 'nav-logo', width: '60', alt: 'Express Admin'
+              text_node 'Express Admin'
+            }
+          }
+          li(class: ' ae-nav-mega-menu-item') {
+            a(href: '#') {
+              image_tag 'appexpress/express_auth.svg', class: 'nav-logo', width: '60', alt: 'Express Auth'
+              text_node 'Express Auth'
+            }
+          }
+          li(class: ' ae-nav-mega-menu-item') {
+            a(href: '#') {
+              image_tag 'appexpress/express_billing.svg', class: 'nav-logo', width: '60', alt: 'Express Billing'
+              text_node 'Express Billing  '
+            }
+          }
+
+        }
+      }
+    }
+
+  }
+}

data/app/views/express_ui/molecules/_nav_menu.html.et

@@ -0,0 +1,17 @@
+code_demo {
+	%Q{
+	  nav(class: 'ae-nav-main') {
+	    ul(class: 'ae-list-inline') {
+	      li(class: 'active ae-nav-item') {
+	        a(href: '#') { 'Express Admin' }
+	      }
+	      li(class: 'ae-nav-item') {
+	        a(href: '#') { 'Express Auth' }
+	      }
+	      li(class: 'ae-nav-item') {
+	        a(href: '#') { 'Express Billing' }
+	      }
+	    }
+	  }
+	}
+}

data/app/views/express_ui/molecules/_table_with_filtering.html.erb

@@ -59,7 +59,7 @@
                 <form class="ae-form-single">
                   <div class="ae-form-field ae-has-icon">
                     <i class="fa fa-calendar"></i>
-                    <input class="ae-text-field ae-input-md" type="text" name="datepicker"  placeholder="Select a date" />
+                    <input class="ae-datepicker ae-text-field ae-input-md" type="text" name="datepicker"  placeholder="Select a date" />
                   </div>
                 </form>
               </div>
@@ -68,7 +68,7 @@
                 <form class="ae-form-single">
                   <div class="ae-form-field ae-has-icon">
                     <i class="fa fa-calendar"></i>
-                    <input class="ae-text-field ae-input-md" type="text" name="datepicker"  placeholder="Select a date" />
+                    <input class="ae-datepicker ae-text-field ae-input-md" type="text" name="datepicker"  placeholder="Select a date" />
                   </div>
                 </form>
               </div>

data/app/views/express_ui/scripts/_accordion.html.et

@@ -18,13 +18,17 @@ table {
     }
     tr {
       td {
-        code { '<a href="#ae-accordion1" class="ae-accordion-trigger ae-btn ae-btn-primary expanded" data-accord-group="ae-accordion-group">Accordion 1</a>' }
+        code { '
+          <a href="#ae-accordion1" class="ae-accordion-trigger ae-btn ae-btn-primary expanded" data-accord-group="ae-accordion-group">Accordion 1</a>'
+        }
       }
       td { "Required mark-up. The link that opens the accordion content." }
     }
     tr {
       td {
-        code { '<div id="ae-accordion1" class="ae-accordion-content"></div>' }
+        code { '
+          <div id="ae-accordion1" class="ae-accordion-content"></div>'
+        }
       }
       td { "Required mark-up. The div that has the accordion content" }
     }

data/app/views/express_ui/scripts/_datepicker.html.et

@@ -18,7 +18,7 @@ table {
     }
     tr {
       td {
-        code { '<input class="ae-datepicker"></input>' }
+        code { '<input class="ae-datepicker" type="text""></input>' }
       }
       td { "Required mark-up. The Javascript inserts the datepicker through this class." }
     }

data/app/views/express_ui/scripts/_select.html.et

@@ -24,17 +24,4 @@ table {
       td { "Required. Select2 transforms this select into a dropdown list." }
     }
   }
-}
-
-
-code_demo {
-  %Q{
-    form() {
-      select(class: 'ae-select', name: 'select', id: 'select-sample') {
-        option(value: "option1") { 'Option 1' }
-        option(value: "option2") { 'Option 2' }
-      }
-    }
-  }
-}
-
+}

data/app/views/express_ui/scripts/_slider.html.et

@@ -0,0 +1,58 @@
+para {
+  text_node 'ExpressUI uses ionRangeSlider to render single and double-range sliders. A single slider uses one knob that users can move to select a value within a range, while a double slider lets users move two knobs to select minimum and maximum values within a range.'
+  a(href: 'https://github.com/IonDen/ion.rangeSlider', title: 'ionRangeSlider documentation') { 'See documentation' }
+  text_node 'and usage guidelines.'
+}
+
+table {
+  thead {
+    th { "Code" }
+    th { "Notes" }
+  }
+  tbody {
+    tr {
+      td {
+        code { "$('#ae-single-slider').ionRangeSlider();" }
+      }
+      td { "Required Javascript. This script initializes the default, single range slider." }
+    }
+
+    tr {
+      td {
+        code {
+          "$('#ae-double-slider').ionRangeSlider({
+         		type: 'double',
+						min: 0,
+						max: 5000,
+						from: 1000,
+						to: 4000,
+        	});"
+        }
+      }
+      td { "Required Javascript. This script initializes the double range slider, sets the minimum and maximum values and other customization values." }
+    }
+
+
+    tr {
+      td {
+        code { '<input id="ae-single-slider" type="text"></input>' }
+      }
+      td { "Required mark-up. The Javascript inserts the single slider through this ID." }
+    }
+
+    tr {
+      td {
+        code { '<input id="ae-double-slider" type="text"></input>' }
+      }
+      td { "Required mark-up. The Javascript inserts the double slider through this ID." }
+    }
+  }
+}
+
+code_demo {
+  %Q{
+  	input(id: 'ae-double-slider', type: 'text')
+  	input(id: 'ae-single-slider', type: 'text')
+  }
+}
+

data/app/views/express_ui/scripts/index.html.erb

@@ -8,16 +8,15 @@
     <div class="js-anchorific-content">
       <h2>Accordion</h2>
       <section>
-  	    <%= render "express_ui/scripts/accordion" %>
+        <%= render "express_ui/scripts/accordion" %>
       </section>
       <h2>Calendar</h2>
       <section>
         <%= render "express_ui/scripts/calendar" %>
       </section>
-
       <h2>Carousel</h2>
       <section>
-  	    <%= render "express_ui/scripts/carousel" %>
+        <%= render "express_ui/scripts/carousel" %>
       </section>
       <h2>Datepicker</h2>
       <section>
@@ -25,13 +24,22 @@
       </section>
       <h2>Pop-up</h2>
       <section>
-  	    <%= render "express_ui/scripts/popup" %>
+        <%= render "express_ui/scripts/popup" %>
       </section>
+
       <h2>Select</h2>
+      <section>
         <%#= render "express_ui/scripts/select" %>
+      </section>
+
+      <h2>Slider</h2>
+      <section>
+        <%= render "express_ui/scripts/slider" %>
+      </section>
+
       <h2>Tabs</h2>
       <section>
-  	    <%= render "express_ui/scripts/tabs" %>
+        <%= render "express_ui/scripts/tabs" %>
       </section>
     </div>
   </div>

data/lib/express_ui/version.rb

@@ -1,3 +1,3 @@
 module ExpressUi
-  VERSION = '0.2.1'
+  VERSION = '0.3.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: express_ui
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
 platform: ruby
 authors:
 - Steven Talcott Smith
@@ -240,7 +240,8 @@ files:
 - app/views/express_ui/molecules/_forms_select.html.erb
 - app/views/express_ui/molecules/_lists.html.et
 - app/views/express_ui/molecules/_nav.html.erb
-- app/views/express_ui/molecules/_nav_mega_menu.html.erb
+- app/views/express_ui/molecules/_nav_mega_menu.html.et
+- app/views/express_ui/molecules/_nav_menu.html.et
 - app/views/express_ui/molecules/_table.html.erb
 - app/views/express_ui/molecules/_table_with_filtering.html.erb
 - app/views/express_ui/organisms/_header.html.erb
@@ -254,6 +255,7 @@ files:
 - app/views/express_ui/scripts/_datepicker.html.et
 - app/views/express_ui/scripts/_popup.html.et
 - app/views/express_ui/scripts/_select.html.et
+- app/views/express_ui/scripts/_slider.html.et
 - app/views/express_ui/scripts/_tabs.html.et
 - app/views/express_ui/scripts/index.html.erb
 - app/views/express_ui/shared/_header.html.erb

data/app/views/express_ui/molecules/_nav_mega_menu.html.erb

@@ -1,74 +0,0 @@
-<div class="ae-mega-menu">
-  <a href="#" class="ae-btn ae-btn-primary">Open Mega Menu List</a>
-  <div class="ae-nav-mega-menu-content">
-    <h3 class="ae-mega-menu-title">
-    Modules
-      <a href="#" class="ae-mega-menu-close ae-u-float-right">×</a>
-    </h3>
-    <ul class="ae-list-block ae-nav-mega-menu-list">
-      <li class="active ae-nav-mega-menu-item">
-        <a href="#">Express Admin
-        </a>
-      </li>
-      <li class="ae-nav-mega-menu-item">
-        <a href="#">Express Auth
-        </a>
-      </li>
-      <li class="ae-nav-mega-menu-item">
-        <a href="#">Express Billing
-        </a>
-      </li>
-
-    </ul>
-  </div>
-</div>
-
-
-<div class="ae-mega-menu">
-  <a href="#" class="ae-btn ae-btn-primary">Open Mega Menu with Big Icons</a>
-  <div class="ae-nav-mega-menu-content">
-    <h3 class="ae-mega-menu-title">
-    Modules
-      <a href="#" class="ae-mega-menu-close ae-u-float-right">×</a>
-    </h3>
-    <ul class="ae-list-inline ae-nav-mega-menu-list-icons">
-      <li class="active ae-nav-mega-menu-item">
-        <a href="#"><%= image_tag("appexpress/express_admin.svg", :alt => "Express Admin", :width => "60") %>Express Admin
-        </a>
-      </li>
-      <li class="ae-nav-mega-menu-item">
-        <a href="#"><%= image_tag("appexpress/express_auth.svg", :alt => "Express Auth", :width => "60") %>Express Auth
-        </a>
-      </li>
-      <li class="ae-nav-mega-menu-item">
-        <a href="#"><%= image_tag("appexpress/express_billing.svg", :alt => "Express Billing", :width => "60") %>Express Billing
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-
-<div class="ae-mega-menu">
-  <a href="#" class="ae-btn ae-btn-primary">Open Mega Menu List with Small Icons</a>
-  <div class="ae-nav-mega-menu-content">
-    <h3 class="ae-mega-menu-title">
-    Modules
-      <a href="#" class="ae-mega-menu-close ae-u-float-right">×</a>
-    </h3>
-    <ul class="ae-list-block ae-nav-mega-menu-list">
-      <li class="active ae-nav-mega-menu-item">
-        <a href="#"><%= image_tag("appexpress/express_admin.svg", :alt => "Express Admin", :width => "60") %>Express Admin
-        </a>
-      </li>
-      <li class="ae-nav-mega-menu-item">
-        <a href="#"><%= image_tag("appexpress/express_auth.svg", :alt => "Express Auth", :width => "60") %>Express Auth
-        </a>
-      </li>
-      <li class="ae-nav-mega-menu-item">
-        <a href="#"><%= image_tag("appexpress/express_billing.svg", :alt => "Express Billing", :width => "60") %>Express Billing
-        </a>
-      </li>
-
-    </ul>
-  </div>
-</div>