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 +4 -4
- data/app/assets/javascripts/express_ui/application.js +4 -0
- data/app/views/express_ui/molecules/_nav.html.erb +57 -2
- data/app/views/express_ui/molecules/_nav_mega_menu.html.et +94 -0
- data/app/views/express_ui/molecules/_nav_menu.html.et +17 -0
- data/app/views/express_ui/molecules/_table_with_filtering.html.erb +2 -2
- data/app/views/express_ui/scripts/_accordion.html.et +6 -2
- data/app/views/express_ui/scripts/_datepicker.html.et +1 -1
- data/app/views/express_ui/scripts/_select.html.et +1 -14
- data/app/views/express_ui/scripts/_slider.html.et +58 -0
- data/app/views/express_ui/scripts/index.html.erb +13 -5
- data/lib/express_ui/version.rb +1 -1
- metadata +4 -2
- data/app/views/express_ui/molecules/_nav_mega_menu.html.erb +0 -74
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 889d3a9fcc568593ba371a4930ac8d20a65f5724
|
4
|
+
data.tar.gz: 1f30e7a1bbba7791d382423f5c21d705250a7f90
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
-
|
3
|
+
|
4
|
+
<table>
|
5
|
+
<thead><th>Code</th><th>Notes</th></thead>
|
6
|
+
<tbody>
|
7
|
+
<tr>
|
8
|
+
<td><code><nav class="ae-nav-main"></nav></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><ul></ul></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
|
-
<
|
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><ul></ul></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 { '
|
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 { '
|
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
|
}
|
@@ -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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
42
|
+
<%= render "express_ui/scripts/tabs" %>
|
35
43
|
</section>
|
36
44
|
</div>
|
37
45
|
</div>
|
data/lib/express_ui/version.rb
CHANGED
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.
|
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.
|
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>
|