express_ui 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 75e1e5572ca4d44eb9962fa276654364155cd277
4
- data.tar.gz: 1f4bb353592ebb1bee249c9ce6f9eb77294cf741
3
+ metadata.gz: 889d3a9fcc568593ba371a4930ac8d20a65f5724
4
+ data.tar.gz: 1f30e7a1bbba7791d382423f5c21d705250a7f90
5
5
  SHA512:
6
- metadata.gz: b8f97a85011fddc1e9aa973e795d0f1661ce10a9c6975289e8539a6ef9641a383c0e606b4fb29c216b24cc62c93a6e71a27974cf64c5c9e965bb916e9466f76b
7
- data.tar.gz: 4e1239f77a8d21c916f791f951a5f5a7e1d704e0662724c62b064852a549084b50ee9023ca95ba89f216267bdd05c9a48d66da7c8f4355b6d9406d5d16c8ba02
6
+ metadata.gz: 5bd82bbc36ac2c1faa5c1e019cd5bc25b3b61e2ffaa33c1464c0552476ea5ba12659299b14087e538973ed4ca59c9b8053019ca8759a5758fcf03ad34ef0f6f6
7
+ data.tar.gz: 0db2620e95950be01f20ea0845722d96f529504bf4ed6b35a3bf97469730b9366ad45811dd40ca40e0fcbe3c62322e90dc3f15ba47a71d54b9103191094af840
@@ -20,6 +20,10 @@ $(document).ready(function() {
20
20
  $('.ae-calendar').fullCalendar();
21
21
  $('.ae-select').select2();
22
22
  $('.ae-accordion-trigger').QuickAccord();
23
+ $('.ae-open-mega-menu').click(function() {
24
+ $(this).siblings( '.ae-nav-mega-menu-content' ).toggleClass('ae-hidden');
25
+ return false;
26
+ });
23
27
  $('.ae-open-filter').click(function() {
24
28
  $(this).parent().siblings( '.ae-table-filter' ).toggleClass('ae-hidden');
25
29
  return false;
@@ -1,9 +1,64 @@
1
1
  <section>
2
2
  <h4>Basic Menu</h4>
3
- <p>Uses basic list</p>
3
+
4
+ <table>
5
+ <thead><th>Code</th><th>Notes</th></thead>
6
+ <tbody>
7
+ <tr>
8
+ <td><code>&lt;nav class="ae-nav-main"&gt;&lt;/nav&gt;</code></td>
9
+ <td><p>Required. Wrap the nav and content in this parent class.</p></td>
10
+ </tr>
11
+ <tr>
12
+ <td><code>.ae-list-inline <br /> .ae-list-block</code> <br /></td>
13
+ <td><p>Optional. Display nav in a <code>&lt;ul&gt;&lt;/ul&gt;</code>. Can be in block or list. </p></td>
14
+ </tr>
15
+ <tr>
16
+ <td><code>.ae-nav-item</code></td>
17
+ <td><p>Required. Each nav item in the list should have this class. </code> </p></td>
18
+ </tr>
19
+ <tr>
20
+ <td><code>.ae-nav-right <br /> .ae-nav-left</code></td>
21
+ <td><p>Optional. Align the nav left or right.</p></td>
22
+ </tr>
23
+
24
+ </tbody>
25
+ </table>
26
+
27
+
28
+ <%= render "express_ui/molecules/nav_menu" %>
29
+
30
+
4
31
  <h4>Mega Menu</h4>
5
32
 
6
- <p>Choose between <code>ae-nav-mega-menu-list</code> or <code>ae-nav-mega-menu-list-icon</code></p>
33
+ <table>
34
+ <thead><th>Code</th><th>Notes</th></thead>
35
+ <tbody>
36
+ <tr>
37
+ <td><code>.ae-mega-menu</code></td>
38
+ <td><p>Required. Wrap the mega menu trigger and content in this parent class.</p></td>
39
+ </tr>
40
+ <tr>
41
+ <td><code>.ae-nav-mega-menu-content</code></td>
42
+ <td><p>Required. Contains the mega menu.</p></td>
43
+ </tr>
44
+ <tr>
45
+ <td><code>.ae-open-mega-menu</code></td>
46
+ <td><p>Required. Opens the mega menu.</p></td>
47
+ </tr>
48
+ <tr>
49
+ <td><code>.ae-nav-mega-menu-list</code></td>
50
+ <td><p>Required. Each nav item in the list should have this class. </code> </p></td>
51
+ </tr>
52
+
53
+ <tr>
54
+ <td><code>.ae-nav-mega-menu-list</code> <br />
55
+ <code>.ae-nav-mega-menu-list-icons</code></td>
56
+ <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>
57
+ </tr>
58
+
59
+ </tbody>
60
+
61
+ </table>
7
62
 
8
63
  <div class="ae-demo-container">
9
64
  <%= render "express_ui/molecules/nav_mega_menu" %>
@@ -0,0 +1,94 @@
1
+ code_demo {
2
+ %Q{
3
+ div(class: 'ae-mega-menu') {
4
+ a(href: '#', class:'ae-btn ae-btn-primary ae-open-mega-menu') { 'Open Mega Menu List' }
5
+ div(class: 'ae-nav-mega-menu-content ae-hidden') {
6
+
7
+ h3(class: 'ae-mega-menu-title') {
8
+ text_node 'Modules'
9
+ a(href: '#', class:'ae-mega-menu-close ae-u-float-right') { '×' }
10
+ }
11
+
12
+ ul(class: 'ae-list-block ae-nav-mega-menu-list') {
13
+ li(class: 'active ae-nav-mega-menu-item') {
14
+ a(href: '#') { 'Express Admin' }
15
+ }
16
+ li(class: 'ae-nav-mega-menu-item') {
17
+ a(href: '#') { 'Express Auth' }
18
+ }
19
+ li(class: 'ae-nav-mega-menu-item') {
20
+ a(href: '#') { 'Express Billing' }
21
+ }
22
+
23
+ }
24
+ }
25
+ }
26
+
27
+ div(class: 'ae-mega-menu') {
28
+ a(href: '#', class:'ae-btn ae-btn-primary ae-open-mega-menu') { 'Open Mega Menu List with Big Icons' }
29
+ div(class: 'ae-nav-mega-menu-content ae-hidden') {
30
+
31
+ h3(class: 'ae-mega-menu-title') {
32
+ text_node 'Modules'
33
+ a(href: '#', class:'ae-mega-menu-close ae-u-float-right') { '×' }
34
+ }
35
+
36
+ ul(class: 'ae-list-inline ae-nav-mega-menu-list-icons') {
37
+ li(class: 'active ae-nav-mega-menu-item') {
38
+ a(href: '#') {
39
+ image_tag 'appexpress/express_admin.svg', class: 'nav-logo', width: '60', alt: 'Express Admin'
40
+ text_node 'Express Admin'
41
+ }
42
+ }
43
+ li(class: ' ae-nav-mega-menu-item') {
44
+ a(href: '#') {
45
+ image_tag 'appexpress/express_auth.svg', class: 'nav-logo', width: '60', alt: 'Express Auth'
46
+ text_node 'Express Auth'
47
+ }
48
+ }
49
+ li(class: ' ae-nav-mega-menu-item') {
50
+ a(href: '#') {
51
+ image_tag 'appexpress/express_billing.svg', class: 'nav-logo', width: '60', alt: 'Express Billing'
52
+ text_node 'Express Billing '
53
+ }
54
+ }
55
+
56
+ }
57
+ }
58
+ }
59
+
60
+ div(class: 'ae-mega-menu') {
61
+ a(href: '#', class:'ae-btn ae-btn-primary ae-open-mega-menu') { 'Open Mega Menu List with Small Icons' }
62
+ div(class: 'ae-nav-mega-menu-content ae-hidden') {
63
+
64
+ h3(class: 'ae-mega-menu-title') {
65
+ text_node 'Modules'
66
+ a(href: '#', class:'ae-mega-menu-close ae-u-float-right') { '×' }
67
+ }
68
+
69
+ ul(class: 'ae-list-block ae-nav-mega-menu-list') {
70
+ li(class: 'active ae-nav-mega-menu-item') {
71
+ a(href: '#') {
72
+ image_tag 'appexpress/express_admin.svg', class: 'nav-logo', width: '60', alt: 'Express Admin'
73
+ text_node 'Express Admin'
74
+ }
75
+ }
76
+ li(class: ' ae-nav-mega-menu-item') {
77
+ a(href: '#') {
78
+ image_tag 'appexpress/express_auth.svg', class: 'nav-logo', width: '60', alt: 'Express Auth'
79
+ text_node 'Express Auth'
80
+ }
81
+ }
82
+ li(class: ' ae-nav-mega-menu-item') {
83
+ a(href: '#') {
84
+ image_tag 'appexpress/express_billing.svg', class: 'nav-logo', width: '60', alt: 'Express Billing'
85
+ text_node 'Express Billing '
86
+ }
87
+ }
88
+
89
+ }
90
+ }
91
+ }
92
+
93
+ }
94
+ }
@@ -0,0 +1,17 @@
1
+ code_demo {
2
+ %Q{
3
+ nav(class: 'ae-nav-main') {
4
+ ul(class: 'ae-list-inline') {
5
+ li(class: 'active ae-nav-item') {
6
+ a(href: '#') { 'Express Admin' }
7
+ }
8
+ li(class: 'ae-nav-item') {
9
+ a(href: '#') { 'Express Auth' }
10
+ }
11
+ li(class: 'ae-nav-item') {
12
+ a(href: '#') { 'Express Billing' }
13
+ }
14
+ }
15
+ }
16
+ }
17
+ }
@@ -59,7 +59,7 @@
59
59
  <form class="ae-form-single">
60
60
  <div class="ae-form-field ae-has-icon">
61
61
  <i class="fa fa-calendar"></i>
62
- <input class="ae-text-field ae-input-md" type="text" name="datepicker" placeholder="Select a date" />
62
+ <input class="ae-datepicker ae-text-field ae-input-md" type="text" name="datepicker" placeholder="Select a date" />
63
63
  </div>
64
64
  </form>
65
65
  </div>
@@ -68,7 +68,7 @@
68
68
  <form class="ae-form-single">
69
69
  <div class="ae-form-field ae-has-icon">
70
70
  <i class="fa fa-calendar"></i>
71
- <input class="ae-text-field ae-input-md" type="text" name="datepicker" placeholder="Select a date" />
71
+ <input class="ae-datepicker ae-text-field ae-input-md" type="text" name="datepicker" placeholder="Select a date" />
72
72
  </div>
73
73
  </form>
74
74
  </div>
@@ -18,13 +18,17 @@ table {
18
18
  }
19
19
  tr {
20
20
  td {
21
- code { '<a href="#ae-accordion1" class="ae-accordion-trigger ae-btn ae-btn-primary expanded" data-accord-group="ae-accordion-group">Accordion 1</a>' }
21
+ code { '
22
+ <a href="#ae-accordion1" class="ae-accordion-trigger ae-btn ae-btn-primary expanded" data-accord-group="ae-accordion-group">Accordion 1</a>'
23
+ }
22
24
  }
23
25
  td { "Required mark-up. The link that opens the accordion content." }
24
26
  }
25
27
  tr {
26
28
  td {
27
- code { '<div id="ae-accordion1" class="ae-accordion-content"></div>' }
29
+ code { '
30
+ <div id="ae-accordion1" class="ae-accordion-content"></div>'
31
+ }
28
32
  }
29
33
  td { "Required mark-up. The div that has the accordion content" }
30
34
  }
@@ -18,7 +18,7 @@ table {
18
18
  }
19
19
  tr {
20
20
  td {
21
- code { '<input class="ae-datepicker"></input>' }
21
+ code { '<input class="ae-datepicker" type="text""></input>' }
22
22
  }
23
23
  td { "Required mark-up. The Javascript inserts the datepicker through this class." }
24
24
  }
@@ -24,17 +24,4 @@ table {
24
24
  td { "Required. Select2 transforms this select into a dropdown list." }
25
25
  }
26
26
  }
27
- }
28
-
29
-
30
- code_demo {
31
- %Q{
32
- form() {
33
- select(class: 'ae-select', name: 'select', id: 'select-sample') {
34
- option(value: "option1") { 'Option 1' }
35
- option(value: "option2") { 'Option 2' }
36
- }
37
- }
38
- }
39
- }
40
-
27
+ }
@@ -0,0 +1,58 @@
1
+ para {
2
+ 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.'
3
+ a(href: 'https://github.com/IonDen/ion.rangeSlider', title: 'ionRangeSlider documentation') { 'See documentation' }
4
+ text_node 'and usage guidelines.'
5
+ }
6
+
7
+ table {
8
+ thead {
9
+ th { "Code" }
10
+ th { "Notes" }
11
+ }
12
+ tbody {
13
+ tr {
14
+ td {
15
+ code { "$('#ae-single-slider').ionRangeSlider();" }
16
+ }
17
+ td { "Required Javascript. This script initializes the default, single range slider." }
18
+ }
19
+
20
+ tr {
21
+ td {
22
+ code {
23
+ "$('#ae-double-slider').ionRangeSlider({
24
+ type: 'double',
25
+ min: 0,
26
+ max: 5000,
27
+ from: 1000,
28
+ to: 4000,
29
+ });"
30
+ }
31
+ }
32
+ td { "Required Javascript. This script initializes the double range slider, sets the minimum and maximum values and other customization values." }
33
+ }
34
+
35
+
36
+ tr {
37
+ td {
38
+ code { '<input id="ae-single-slider" type="text"></input>' }
39
+ }
40
+ td { "Required mark-up. The Javascript inserts the single slider through this ID." }
41
+ }
42
+
43
+ tr {
44
+ td {
45
+ code { '<input id="ae-double-slider" type="text"></input>' }
46
+ }
47
+ td { "Required mark-up. The Javascript inserts the double slider through this ID." }
48
+ }
49
+ }
50
+ }
51
+
52
+ code_demo {
53
+ %Q{
54
+ input(id: 'ae-double-slider', type: 'text')
55
+ input(id: 'ae-single-slider', type: 'text')
56
+ }
57
+ }
58
+
@@ -8,16 +8,15 @@
8
8
  <div class="js-anchorific-content">
9
9
  <h2>Accordion</h2>
10
10
  <section>
11
- <%= render "express_ui/scripts/accordion" %>
11
+ <%= render "express_ui/scripts/accordion" %>
12
12
  </section>
13
13
  <h2>Calendar</h2>
14
14
  <section>
15
15
  <%= render "express_ui/scripts/calendar" %>
16
16
  </section>
17
-
18
17
  <h2>Carousel</h2>
19
18
  <section>
20
- <%= render "express_ui/scripts/carousel" %>
19
+ <%= render "express_ui/scripts/carousel" %>
21
20
  </section>
22
21
  <h2>Datepicker</h2>
23
22
  <section>
@@ -25,13 +24,22 @@
25
24
  </section>
26
25
  <h2>Pop-up</h2>
27
26
  <section>
28
- <%= render "express_ui/scripts/popup" %>
27
+ <%= render "express_ui/scripts/popup" %>
29
28
  </section>
29
+
30
30
  <h2>Select</h2>
31
+ <section>
31
32
  <%#= render "express_ui/scripts/select" %>
33
+ </section>
34
+
35
+ <h2>Slider</h2>
36
+ <section>
37
+ <%= render "express_ui/scripts/slider" %>
38
+ </section>
39
+
32
40
  <h2>Tabs</h2>
33
41
  <section>
34
- <%= render "express_ui/scripts/tabs" %>
42
+ <%= render "express_ui/scripts/tabs" %>
35
43
  </section>
36
44
  </div>
37
45
  </div>
@@ -1,3 +1,3 @@
1
1
  module ExpressUi
2
- VERSION = '0.2.1'
2
+ VERSION = '0.3.0'
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: express_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.1
4
+ version: 0.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Steven Talcott Smith
@@ -240,7 +240,8 @@ files:
240
240
  - app/views/express_ui/molecules/_forms_select.html.erb
241
241
  - app/views/express_ui/molecules/_lists.html.et
242
242
  - app/views/express_ui/molecules/_nav.html.erb
243
- - app/views/express_ui/molecules/_nav_mega_menu.html.erb
243
+ - app/views/express_ui/molecules/_nav_mega_menu.html.et
244
+ - app/views/express_ui/molecules/_nav_menu.html.et
244
245
  - app/views/express_ui/molecules/_table.html.erb
245
246
  - app/views/express_ui/molecules/_table_with_filtering.html.erb
246
247
  - app/views/express_ui/organisms/_header.html.erb
@@ -254,6 +255,7 @@ files:
254
255
  - app/views/express_ui/scripts/_datepicker.html.et
255
256
  - app/views/express_ui/scripts/_popup.html.et
256
257
  - app/views/express_ui/scripts/_select.html.et
258
+ - app/views/express_ui/scripts/_slider.html.et
257
259
  - app/views/express_ui/scripts/_tabs.html.et
258
260
  - app/views/express_ui/scripts/index.html.erb
259
261
  - app/views/express_ui/shared/_header.html.erb
@@ -1,74 +0,0 @@
1
- <div class="ae-mega-menu">
2
- <a href="#" class="ae-btn ae-btn-primary">Open Mega Menu List</a>
3
- <div class="ae-nav-mega-menu-content">
4
- <h3 class="ae-mega-menu-title">
5
- Modules
6
- <a href="#" class="ae-mega-menu-close ae-u-float-right">×</a>
7
- </h3>
8
- <ul class="ae-list-block ae-nav-mega-menu-list">
9
- <li class="active ae-nav-mega-menu-item">
10
- <a href="#">Express Admin
11
- </a>
12
- </li>
13
- <li class="ae-nav-mega-menu-item">
14
- <a href="#">Express Auth
15
- </a>
16
- </li>
17
- <li class="ae-nav-mega-menu-item">
18
- <a href="#">Express Billing
19
- </a>
20
- </li>
21
-
22
- </ul>
23
- </div>
24
- </div>
25
-
26
-
27
- <div class="ae-mega-menu">
28
- <a href="#" class="ae-btn ae-btn-primary">Open Mega Menu with Big Icons</a>
29
- <div class="ae-nav-mega-menu-content">
30
- <h3 class="ae-mega-menu-title">
31
- Modules
32
- <a href="#" class="ae-mega-menu-close ae-u-float-right">×</a>
33
- </h3>
34
- <ul class="ae-list-inline ae-nav-mega-menu-list-icons">
35
- <li class="active ae-nav-mega-menu-item">
36
- <a href="#"><%= image_tag("appexpress/express_admin.svg", :alt => "Express Admin", :width => "60") %>Express Admin
37
- </a>
38
- </li>
39
- <li class="ae-nav-mega-menu-item">
40
- <a href="#"><%= image_tag("appexpress/express_auth.svg", :alt => "Express Auth", :width => "60") %>Express Auth
41
- </a>
42
- </li>
43
- <li class="ae-nav-mega-menu-item">
44
- <a href="#"><%= image_tag("appexpress/express_billing.svg", :alt => "Express Billing", :width => "60") %>Express Billing
45
- </a>
46
- </li>
47
- </ul>
48
- </div>
49
- </div>
50
-
51
- <div class="ae-mega-menu">
52
- <a href="#" class="ae-btn ae-btn-primary">Open Mega Menu List with Small Icons</a>
53
- <div class="ae-nav-mega-menu-content">
54
- <h3 class="ae-mega-menu-title">
55
- Modules
56
- <a href="#" class="ae-mega-menu-close ae-u-float-right">×</a>
57
- </h3>
58
- <ul class="ae-list-block ae-nav-mega-menu-list">
59
- <li class="active ae-nav-mega-menu-item">
60
- <a href="#"><%= image_tag("appexpress/express_admin.svg", :alt => "Express Admin", :width => "60") %>Express Admin
61
- </a>
62
- </li>
63
- <li class="ae-nav-mega-menu-item">
64
- <a href="#"><%= image_tag("appexpress/express_auth.svg", :alt => "Express Auth", :width => "60") %>Express Auth
65
- </a>
66
- </li>
67
- <li class="ae-nav-mega-menu-item">
68
- <a href="#"><%= image_tag("appexpress/express_billing.svg", :alt => "Express Billing", :width => "60") %>Express Billing
69
- </a>
70
- </li>
71
-
72
- </ul>
73
- </div>
74
- </div>