express_ui 0.1.0.rc1

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

@@ -0,0 +1 @@
+_form_group_inline.html.erb

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

@@ -0,0 +1,9 @@
+<form class="ae-form-single ae-search-form">
+  <div class="ae-form-field ae-has-icon">
+    <i class="fa fa-search"></i>
+    <input class="ae-text-field ae-input-md" type="text" name="search"  placeholder="Enter a keyword" />
+  </div>
+  <div class="ae-actions">
+    <button class="ae-btn ae-btn-primary ae-btn-md" type="submit">Search</button>
+  </div>
+</form>

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

@@ -0,0 +1,69 @@
+<section>
+<p>Add class to <code>&lt;form&gt;</code> to assign a form group style.</p>
+<p>Use <code>&lt;p class=&quot;ae-hint&quot;&gt;&lt;/p&gt;</code> to add help text below an input.</p>
+
+
+<table>
+<thead>
+<tr>
+<th width="20%">Form Group Type</th>
+<th>Demo</th>
+<th width="30%">Usage</th>
+</tr>
+</thead>
+<tbody>
+
+<tr>
+<td>Horizontal Form</td>
+<td>
+  <%= render "express_ui/molecules/form_group_horizontal" %>
+</td>
+<td><p>Add <code>.ae-form-horizontal</code> to <code>&lt;form&gt;</code> to make labels and input fields stack in separate row. Forms are <code>.ae-form-horizontal</code> by default, unless noted.</p>
+</td>
+</tr>
+
+<tr>
+<td>Inline Form</td>
+<td>
+<form class="ae-form-inline">
+  <div class="ae-form-field">
+    <label for="email">Email</label>
+    <input class="ae-text-field ae-input-md" type="email" name="email" value="user@email.com" id="email" placeholder="user@email.com" />
+  </div>
+  <div class="ae-form-field">
+    <label for="password">Password</label>
+    <input class="ae-text-field ae-input-md" type="password" name="password" value="Enter password" id="password" placeholder="Enter password" />
+  </div>
+  <div class="ae-actions">
+    <button class="ae-btn ae-btn-primary ae-btn-md" type="submit">Log In</button>
+  </div>
+</form>
+</td>
+<td><p>Add <code>.ae-form-inline</code> to <code>&lt;form&gt;</code> to have labels and input fields appear side by side.</p>
+</td>
+</tr>
+
+<tr>
+<td>Single Line Form / Search Form</td>
+<td>
+  <%= render "express_ui/molecules/form_group_single_line" %>
+</td>
+<td><p>Add <code>.ae-form-single</code> to <code>&lt;form&gt;</code> to have labels, input fields, and buttons appear in a single line.</p>
+<p>Search forms are single line forms by default, and should have an input, search button, and reset button.</p>
+</td>
+</tr>
+
+
+<tr>
+<td>Form with Icons</td>
+<td>
+<form>
+  <div class="ae-form-field ae-has-icon">
+    <i class="fa fa-map-marker"></i>
+    <input class="ae-text-field ae-input-md" type="text" name="address" placeholder="Enter your address" />
+  </div>
+</form></td>
+<td><p>Icons can be used alongside input texts</p></td>
+</tr>
+
+</tbody></table></section>

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

@@ -0,0 +1,209 @@
+<section>
+<h4>Basic Usage</h4>
+<p><strong>Required</strong>. Form elements should be wrapped in a <code>&lt;form&gt;&lt;div class=&quot;ae-form-field&quot;&gt;&lt;/div&gt;&lt;/form&gt;</code> to ensure that proper semantics are followed. This also ensures proper styling is applied. See <a href="http://w3c.github.io/html/semantics.html#forms" title="Form semantics at w3c">http://w3c.github.io/html/semantics.html#forms</a>.</p>
+
+<h4>Input Fields</h4>
+
+<table>
+<thead>
+<tr>
+<th>Input Type</th>
+<th>Demo</th>
+<th>Usage</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>text</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+      <input class="ae-text-field  ae-input-sm" type="text" name="text" value="Enter a word" placeholder="Enter some text" />
+   </div>
+  </form>
+</td>
+<td>Alphanumeric</td>
+</tr>
+<tr>
+<td><code>number</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field ae-input-sm" type="number" name="number" value="+63 000 0000000" placeholder="Enter a phone number" />
+   </div>
+  </form>
+</td>
+<td>Numeric</td>
+</tr>
+<tr>
+<td><code>email</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field  ae-input-sm" type="email" name="email" value="user@email.com" placeholder="user@email.com" />
+   </div>
+  </form>
+</td>
+<td>user@email.com</td>
+</tr>
+<tr>
+<td><code>url</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field  ae-input-sm" type="url" name="url" value="http://" placeholder="http://" />
+   </div>
+  </form>
+</td>
+<td>http://</td>
+</tr>
+<tr>
+<td><code>search</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field  ae-input-sm" type="search" name="search" value="Enter a search word" placeholder="Enter a search word" />
+   </div>
+  </form>
+</td>
+<td>Alphanumeric</td>
+</tr>
+<tr>
+<td><code>date</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field  ae-input-sm" type="date" name="date" value="Select date" placeholder="Select date" />
+   </div>
+  </form>
+</td>
+<td>MM/DD/YYY</td>
+</tr>
+<tr>
+<td><code>time</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field  ae-input-sm" type="time" name="time" value="Select time" placeholder="Select time" />
+   </div>
+  </form>
+</td>
+<td>HH:MM AM/PM</td>
+</tr>
+<tr>
+<td><code>month</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field  ae-input-sm" type="month" name="month" value="Select month and year" placeholder="Select month and year" />
+   </div>
+  </form>
+</td>
+<td>Month YYYY</td>
+</tr>
+<tr>
+<td><code>color</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field  ae-input-sm" type="color" name="color" value="Select color" placeholder="Select color" />
+   </div>
+  </form>
+</td>
+<td>Color picker</td>
+</tr>
+<tr>
+<td><code>range</code></td>
+<td>
+  <form>
+    <div class="ae-form-field">
+    <input class="ae-text-field  ae-input-sm" type="range" name="range" value="Select range" placeholder="Select range" />
+   </div>
+  </form>
+</td>
+<td>Range</td>
+</tr>
+<tr>
+<td><code>&lt;textarea&gt;&lt;/textarea&gt;</code></td>
+<td>
+<form>
+  <div class="ae-form-field">
+    <textarea class="ae-textarea  ae-input-sm" type="textarea" name="textarea" rows="5" cols="100"></textarea>
+  </div>
+</form></td>
+<td><p>Specify value for <code>rows</code> and <code>cols</code> attributes.</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+
+<h4>Input Sizes</h4>
+<table>
+  <thead>
+    <th>Size</th>
+    <th>Demo</th>
+    <th>Usage</th>
+  </thead>
+  <tbody>
+    <tr>
+        <td>Small</td>
+        <td><form>
+          <div class="ae-form-field">
+        <input class="ae-text-field ae-input-sm" value="Small input" placeholder="Small input" type="text"></input>  </div>
+        </form>
+        </td>
+        <td><code>.ae-input-sm</code></td>
+    </tr>
+    <tr>
+        <td>Medium</td>
+        <td><form>
+          <div class="ae-form-field">
+        <input class="ae-text-field ae-input-md" value="Medium input" placeholder="Medium input" type="text"></input>  </div>
+        </form>
+        </td>
+        <td><code>.ae-input-md</code></td>
+    </tr>
+    <tr>
+        <td>Large</td>
+        <td><form>
+          <div class="ae-form-field">
+        <input class="ae-text-field ae-input-lg" value="Large input" placeholder="Large input" type="text"></input>  </div>
+        </form>
+        </td>
+        <td><code>.ae-input-lg</code></td>
+    </tr>
+  </tbody>
+</table>
+
+
+<h4>Radio and Checkbox</h4>
+<p>Add <code>checked</code> attribute to set default selected. Using <code>label</code> will activate the radio upon clicking the text beside it. See <a href="#">Forms in Molecules</a>.</p>
+<p>Express UI uses Font Awesome icons and CSS to style checkboxes and radio buttons.</p>
+
+<br />
+
+<%= render "express_ui/molecules/forms_radio" %>
+
+<br />
+
+<%= render "express_ui/molecules/forms_checkbox" %>
+
+<h4>Select</h4>
+<p>Add <code>input-size</code> in <code>select</code> to change select form height and font size.</p>
+<%= render "express_ui/molecules/forms_select" %>
+
+<h4>Switch</h4>
+<p>Source:https://proto.io/freebies/onoff/</p>
+<form>
+  <div class="ae-form-field">
+    <div class="ae-switch">
+        <input type="checkbox" name="switch" class="ae-switch-checkbox" id="ae-switch" checked>
+        <label class="ae-switch-label" for="ae-switch">
+            <span class="ae-switch-inner"></span>
+            <span class="ae-switch-button"></span>
+        </label>
+    </div>
+  </div>
+</form>
+</section>

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

@@ -0,0 +1,20 @@
+<form>
+  <div class="ae-form-field">
+    <div>
+      <input class="ae-checkbox-field" type="checkbox" name="cars" value="volvo" id="volvo" checked="checked" />
+      <label for="volvo">Volvo</label>
+    </div>
+    <div>
+      <input class="ae-checkbox-field" type="checkbox" name="cars" value="saab" id="saab"  />
+      <label for="saab">Saab</label>
+    </div>
+    <div>
+      <input class="ae-checkbox-field" type="checkbox" name="cars" value="mercedes" id="mercedes"  />
+      <label for="mercedes">Mercedes</label>
+    </div>
+    <div>
+      <input class="ae-checkbox-field" type="checkbox" name="cars" value="audi" id="audi"  />
+      <label for="audi">Audi</label>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,12 @@
+<form>
+  <div class="ae-form-field">
+    <div>
+      <input class="ae-radio-field" type="radio" name="gender" value="male" id="gender1" checked="checked" />
+      <label for="gender1">Male</label>
+    </div>
+    <div>
+      <input class="ae-radio-field" type="radio" name="gender" value="female"  id="gender2"  />
+      <label for="gender2">Female</label>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,11 @@
+<form>
+  <div class="ae-form-field">
+    <label for="select">Filter</label>
+    <select class="ae-input-md" name="select" id="select">
+      <option value="volvo">Volvo</option>
+      <option value="saab">Saab</option>
+      <option value="mercedes">Mercedes</option>
+      <option value="audi">Audi</option>
+    </select>
+  </div>
+</form>

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

@@ -0,0 +1,11 @@
+<section>
+<h4>Basic Menu</h4>
+<p>Uses basic list</p>
+<h4>Mega Menu</h4>
+
+<p>Choose between <code>ae-nav-mega-menu-list</code>  or <code>ae-nav-mega-menu-list-icon</code></p>
+
+<div class="ae-demo-container">
+	<%= render "express_ui/molecules/nav_mega_menu" %>
+</div>
+</section>

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

@@ -0,0 +1,74 @@
+<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>

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

@@ -0,0 +1,93 @@
+<section>
+<p>To make tables responsive, wrap the <code>&lt;table&gt;&lt;/table&gt;</code> inside a <code>&lt;div&gt;&lt;/div&gt;</code> with class <code>.ae-table-responsive</code></p>
+<p>'Data tables require a <code>&lt;thead&gt;</code> at all times. When possible, clicking the <code>&lt;thead&gt;</code> should sort the table. Tables should optionally be given a title.</p>
+
+
+<table>
+  <thead>
+    <th><a href="#" title="Username"><i class="fa fa-user"></i> User</a></th>
+    <th><a href="#" title="User's birthday"><i class="fa fa-birthday-cake"></i> Birthday</a></th>
+    <th><a href="#" title="User's mobile number"><i class="fa fa-mobile"></i> Mobile</a></th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Anna</td>
+      <td>01-01-1990</td>
+      <td>+63 917 0000000</td>
+    </tr>
+    <tr>
+      <td>Bryan</td>
+      <td>02-01-1990</td>
+      <td>+63 918 0000000</td>
+    </tr>
+    <tr>
+      <td>Carol</td>
+      <td>03-01-1990</td>
+      <td>+63 919 0000000</td>
+    </tr>
+  </tbody>
+</table>
+
+<p>Use <code>.ae-table-unstyled</code> class for unstyled tables. This class disables row background colors.</p>
+
+<p>Use <code>.ae-table-fixed-width</code> to set equal widths to cells</p>
+
+
+    <h4>Table with Actions</h4>
+
+    <div class="demo-container">
+      <div class="ae-table-responsive">
+        <table>
+          <thead>
+            <th><a href="#" title="created_at">Created At </a></th>
+            <th width="30%"><a href="#" title="address">Address</a></th>
+            <th><a href="#" title="contract_effective_date">Contract Effective Date </a></th>
+            <th><a href="#" title="closing_date">Closing Date</a></th>
+            <th><a href="#" title="owner">Owner</a></th>
+            <th><a href="#" title="creation_step">Creation Step</a></th>
+            <th><a href="#" title="paid">Paid</a></th>
+            <th width="15%"><a href="#" title="action">Actions</a></th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>January 07, 2016  </td>
+              <td><a href="#">658 NW 9th Ct, Boca Raton, FL 33486, USA</a></td>
+              <td>January 07, 2016  </td>
+              <td>January 29, 2016  </td>
+              <td></td>
+              <td>step_2</td>
+              <td>false</td>
+              <td><button type="button" value="Delete" class="ae-btn ae-btn-danger">Delete</button></td>
+            </tr>
+            <tr>
+              <td>January 07, 2016  </td>
+              <td><a href="#">2714 Southern Parkway West</a></td>
+              <td>January 07, 2016  </td>
+              <td>January 29, 2016  </td>
+              <td></td>
+              <td>step_2</td>
+              <td>false</td>
+              <td><a href="#">View</a></td>
+            </tr>
+            <tr>
+              <td>Small Office</td>
+              <td>Top Producer</td>
+              <td>$1,299.00</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <h4>Table with Filtering</h4>
+    <p>There is an option to filter through a table.</p>
+
+    <div class="demo-container">
+      <%= render "express_ui/molecules/table_with_filtering" %>
+    </div>
+
+    <h4>Empty Table</h4>
+
+<p>Recommended reading on designing tables: <a href="https://medium.com/mission-log/design-better-data-tables-430a30a00d8c#.28lwzzybi" title="Design better data tables">Design better data tables</a></p></section>
+
+