express_ui 0.4.2 → 0.5.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/sidebar.js +5 -0
- data/app/assets/stylesheets/express_ui/application.sass +1 -0
- data/app/assets/stylesheets/express_ui/mixins/_express_ui.sass +2 -2
- data/app/assets/stylesheets/express_ui/molecules/_progress_indicator.sass +99 -0
- data/app/assets/stylesheets/express_ui/organisms/_header.sass +9 -2
- data/app/assets/stylesheets/express_ui/organisms/_sidebar.sass +5 -3
- data/app/assets/stylesheets/express_ui/templates/_master_detail.sass +38 -2
- data/app/controllers/express_ui/pages_controller.rb +13 -1
- data/app/views/express_ui/molecules/_progress_indicator.html.et +56 -0
- data/app/views/express_ui/pages/admin.html.erb +13 -0
- data/app/views/express_ui/pages/details/_detail_1.html.erb +1 -0
- data/app/views/express_ui/pages/show_detail.js.erb +1 -0
- data/app/views/express_ui/styleguide/index.html.erb +4 -1
- data/app/views/express_ui/uicomponents/_pages.html.erb +4 -0
- data/app/views/layouts/express_ui/master_detail_fixed.html.erb +13 -2
- data/config/routes.rb +3 -0
- data/lib/express_ui/version.rb +1 -1
- data/vendor/assets/javascripts/sidebar.js +6 -0
- metadata +9 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a560320aa93759dfc68ade128da3dd6de81dc343
|
|
4
|
+
data.tar.gz: 18d262f3704412aad30f3611d7d54b84fc0b2bf0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a04c4cebac311a0dd1aeb2fd3ce202101e2cd9772a9c6a9a394e92ff6a0f7aa1b5ddf7d1b42b473452289813971a8f2e2f991986d1f256087577aa515eb239d8
|
|
7
|
+
data.tar.gz: d0b7cf41f2a1c825ed9272809b3ee916f02535847a438f5411ec5449db63bfcfbcdb89ecfb736272b15212127a2f0e5765476ef243c68ea9daed108b546ca759
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
.ae-progress-indicator
|
|
2
|
+
text-align: center
|
|
3
|
+
margin: 1em 0
|
|
4
|
+
|
|
5
|
+
&.ae-progress-check
|
|
6
|
+
.ae-progress-points
|
|
7
|
+
ol, li
|
|
8
|
+
counter-increment: none
|
|
9
|
+
|
|
10
|
+
&:before
|
|
11
|
+
@include icon-font
|
|
12
|
+
line-height: 1.6
|
|
13
|
+
color: $primary-color
|
|
14
|
+
content: ""
|
|
15
|
+
|
|
16
|
+
&.ae-progress-point-done
|
|
17
|
+
&:before
|
|
18
|
+
content: "\f00c"
|
|
19
|
+
&.ae-progress-point-current
|
|
20
|
+
&:before
|
|
21
|
+
content: "\f111"
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
.ae-progress-point
|
|
25
|
+
.ae-progress-heading
|
|
26
|
+
max-width: 100px
|
|
27
|
+
color: darken($gray-background, 15%)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
.ae-progress-points
|
|
31
|
+
display: flex
|
|
32
|
+
flex-direction: row
|
|
33
|
+
flex-wrap: nowrap
|
|
34
|
+
justify-content: center
|
|
35
|
+
align-items: center
|
|
36
|
+
align-content: stretch
|
|
37
|
+
ol
|
|
38
|
+
li
|
|
39
|
+
counter-increment: item
|
|
40
|
+
&:before
|
|
41
|
+
content: counter(item)
|
|
42
|
+
|
|
43
|
+
ol, ul
|
|
44
|
+
display: flex
|
|
45
|
+
flex-direction: row
|
|
46
|
+
flex-wrap: nowrap
|
|
47
|
+
justify-content: center
|
|
48
|
+
align-items: flex-start
|
|
49
|
+
align-content: stretch
|
|
50
|
+
position: relative
|
|
51
|
+
|
|
52
|
+
li
|
|
53
|
+
list-style: none
|
|
54
|
+
position: relative
|
|
55
|
+
padding: 0em 1em
|
|
56
|
+
|
|
57
|
+
&:first-child:after
|
|
58
|
+
margin-left: 50%
|
|
59
|
+
|
|
60
|
+
&:after
|
|
61
|
+
border-top: 7px solid $gray-background
|
|
62
|
+
position: absolute
|
|
63
|
+
width: 100%
|
|
64
|
+
content: ""
|
|
65
|
+
left: 0
|
|
66
|
+
z-index: 1
|
|
67
|
+
top: 1.2rem
|
|
68
|
+
margin-left: -50%
|
|
69
|
+
|
|
70
|
+
&:before
|
|
71
|
+
float: none
|
|
72
|
+
display: block
|
|
73
|
+
z-index: 2
|
|
74
|
+
position: relative
|
|
75
|
+
width: 3rem
|
|
76
|
+
border: 2px solid $gray-background
|
|
77
|
+
background: $gray-background
|
|
78
|
+
@include border-radius(50px)
|
|
79
|
+
margin: 0 auto
|
|
80
|
+
text-align: center
|
|
81
|
+
padding: 0
|
|
82
|
+
height: 3rem
|
|
83
|
+
@include font-size(32px, 24px)
|
|
84
|
+
|
|
85
|
+
&.ae-progress-point-done
|
|
86
|
+
.ae-progress-heading
|
|
87
|
+
color: $body-color
|
|
88
|
+
&:after
|
|
89
|
+
border-top-color: $primary-color
|
|
90
|
+
&:before
|
|
91
|
+
border: 2px solid $primary-color
|
|
92
|
+
|
|
93
|
+
&.ae-progress-point-current
|
|
94
|
+
.ae-progress-heading
|
|
95
|
+
color: $body-color
|
|
96
|
+
&:after
|
|
97
|
+
border-top-color: $primary-color
|
|
98
|
+
&:before
|
|
99
|
+
border: 2px solid $primary-color
|
|
@@ -10,7 +10,8 @@ header
|
|
|
10
10
|
|
|
11
11
|
@include tablet-max
|
|
12
12
|
text-align: center
|
|
13
|
-
height:
|
|
13
|
+
height: auto
|
|
14
|
+
min-height: 70px
|
|
14
15
|
max-height: 100%
|
|
15
16
|
|
|
16
17
|
.ae-logo
|
|
@@ -41,13 +42,19 @@ header
|
|
|
41
42
|
& + .ae-container
|
|
42
43
|
margin-top: ($header-max-height/2.75)
|
|
43
44
|
|
|
45
|
+
& + [class*="ae-template-master-"]
|
|
46
|
+
@include tablet-max
|
|
47
|
+
z-index: 99
|
|
48
|
+
margin-top: $header-max-height !important
|
|
49
|
+
|
|
44
50
|
@include tablet-max
|
|
45
51
|
z-index: 99
|
|
46
52
|
|
|
47
53
|
|
|
48
|
-
& + [class*="ae-template-"]
|
|
54
|
+
& + [class*="ae-template-"]
|
|
49
55
|
margin-top: $header-height
|
|
50
56
|
|
|
51
57
|
@include tablet-max
|
|
52
58
|
z-index: 99
|
|
53
59
|
margin-top: $header-max-height
|
|
60
|
+
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
.ae-show-left-sidebar
|
|
2
2
|
@include tablet-max
|
|
3
3
|
position: fixed
|
|
4
|
-
left:
|
|
4
|
+
left: 0
|
|
5
5
|
top: $header-max-height
|
|
6
|
-
right:
|
|
6
|
+
right: 0
|
|
7
7
|
z-index: 99
|
|
8
|
-
margin-right:
|
|
8
|
+
margin-right: auto
|
|
9
|
+
margin-left: auto
|
|
9
10
|
margin-top: 20px
|
|
11
|
+
width: 100px
|
|
10
12
|
|
|
11
13
|
.ae-sidebar-left
|
|
12
14
|
background-color: $primary-color
|
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
.ae-template-master-detail, .ae-template-master-detail-fixed
|
|
2
|
+
@include tablet-max
|
|
3
|
+
.ae-sidebar-left
|
|
4
|
+
display: none
|
|
5
|
+
left: 10px
|
|
6
|
+
margin-top: 2em
|
|
7
|
+
right: 10px
|
|
8
|
+
width: auto !important
|
|
9
|
+
z-index: 99
|
|
10
|
+
height: auto !important
|
|
11
|
+
|
|
12
|
+
.ae-sidebar-right
|
|
13
|
+
display: none
|
|
14
|
+
|
|
15
|
+
.ae-content
|
|
16
|
+
left: 0 !important
|
|
17
|
+
right: 0 !important
|
|
18
|
+
|
|
19
|
+
.ae-container
|
|
20
|
+
position: fixed
|
|
21
|
+
left: 15%
|
|
22
|
+
right: 30%
|
|
23
|
+
height: 100%
|
|
24
|
+
width: auto
|
|
25
|
+
|
|
26
|
+
@include tablet-max
|
|
27
|
+
width: 100%
|
|
28
|
+
left: 0
|
|
29
|
+
right: 0
|
|
30
|
+
|
|
31
|
+
|
|
1
32
|
.ae-template-master-detail
|
|
2
33
|
@include sidebar(15%)
|
|
3
34
|
@include sidebar-right(30%)
|
|
@@ -18,7 +49,6 @@
|
|
|
18
49
|
|
|
19
50
|
.ae-content
|
|
20
51
|
padding: $container-padding $container-padding*4
|
|
21
|
-
width: $container
|
|
22
52
|
|
|
23
53
|
.ae-code-block
|
|
24
54
|
@include tablet
|
|
@@ -32,6 +62,7 @@
|
|
|
32
62
|
align-items: stretch
|
|
33
63
|
max-width: 100%
|
|
34
64
|
height: 100%
|
|
65
|
+
margin-top: 0 !important
|
|
35
66
|
|
|
36
67
|
.ae-sidebar-left
|
|
37
68
|
position: fixed
|
|
@@ -43,9 +74,14 @@
|
|
|
43
74
|
right: 0
|
|
44
75
|
|
|
45
76
|
.ae-content
|
|
46
|
-
position: absolute
|
|
47
77
|
padding: $container-padding $container-padding*4
|
|
48
78
|
|
|
49
79
|
.ae-code-block
|
|
50
80
|
@include tablet
|
|
51
81
|
width: auto
|
|
82
|
+
|
|
83
|
+
.ae-close-detail
|
|
84
|
+
position: absolute
|
|
85
|
+
top: 0
|
|
86
|
+
right: 0
|
|
87
|
+
|
|
@@ -3,7 +3,7 @@ require_dependency "express_ui/application_controller"
|
|
|
3
3
|
module ExpressUi
|
|
4
4
|
class PagesController < ApplicationController
|
|
5
5
|
layout "express_ui/styleguide"
|
|
6
|
-
|
|
6
|
+
protect_from_forgery except: :show_detail
|
|
7
7
|
|
|
8
8
|
def register
|
|
9
9
|
end
|
|
@@ -17,5 +17,17 @@ module ExpressUi
|
|
|
17
17
|
def static
|
|
18
18
|
end
|
|
19
19
|
|
|
20
|
+
def admin
|
|
21
|
+
render layout: 'express_ui/master_detail_fixed'
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
def show_detail
|
|
25
|
+
@partial_name = "express_ui/pages/details/#{params[:name]}"
|
|
26
|
+
|
|
27
|
+
respond_to do |format|
|
|
28
|
+
format.js { render layout: false }
|
|
29
|
+
end
|
|
30
|
+
end
|
|
31
|
+
|
|
20
32
|
end
|
|
21
33
|
end
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
table {
|
|
2
|
+
thead {
|
|
3
|
+
th { "Code" }
|
|
4
|
+
th { "Notes" }
|
|
5
|
+
}
|
|
6
|
+
tbody {
|
|
7
|
+
tr {
|
|
8
|
+
td {
|
|
9
|
+
code { ".ae-progress-indicator" }
|
|
10
|
+
}
|
|
11
|
+
td { "Required Class. This class adds progress indicator. Progress indicator shows numbers by default. " }
|
|
12
|
+
}
|
|
13
|
+
tr {
|
|
14
|
+
td {
|
|
15
|
+
code { ".ae-progress-indicator .ae-progress-check" }
|
|
16
|
+
}
|
|
17
|
+
td { "Optional Class. This class replaces numbers with checks for done points and a dot for the current point." }
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
code_demo {
|
|
24
|
+
%Q{
|
|
25
|
+
div(class: 'ae-progress-indicator ae-progress-check') {
|
|
26
|
+
div(class: 'ae-progress-points') {
|
|
27
|
+
ol {
|
|
28
|
+
li(class: 'ae-progress-point ae-progress-point-done') {
|
|
29
|
+
para(class: 'ae-progress-heading') { 'Club Name' }
|
|
30
|
+
}
|
|
31
|
+
li(class: 'ae-progress-point ae-progress-point-current') {
|
|
32
|
+
para(class: 'ae-progress-heading') { 'Club Info' }
|
|
33
|
+
}
|
|
34
|
+
li(class: 'ae-progress-point') {
|
|
35
|
+
para(class: 'ae-progress-heading') { 'Select Plan' }
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
div(class: 'ae-progress-indicator') {
|
|
41
|
+
div(class: 'ae-progress-points') {
|
|
42
|
+
ol {
|
|
43
|
+
li(class: 'ae-progress-point ae-progress-point-done') {
|
|
44
|
+
para(class: 'ae-progress-heading') { 'Club Name' }
|
|
45
|
+
}
|
|
46
|
+
li(class: 'ae-progress-point ae-progress-point-current') {
|
|
47
|
+
para(class: 'ae-progress-heading') { 'Club Info' }
|
|
48
|
+
}
|
|
49
|
+
li(class: 'ae-progress-point') {
|
|
50
|
+
para(class: 'ae-progress-heading') { 'Select Plan' }
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<%= link_to 'Open detail', ui_components_pages_admin_detail_path(name: 'detail_1'), remote: true %>
|
|
2
|
+
|
|
3
|
+
<% content_for :sidebar do %>
|
|
4
|
+
<nav>
|
|
5
|
+
<ul>
|
|
6
|
+
<li><a href="#">Sidebar Nav</a></li>
|
|
7
|
+
</ul>
|
|
8
|
+
</nav>
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
<% content_for :page_title do %>
|
|
12
|
+
Express UI Admin Page
|
|
13
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<p>Detail content</p>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
$(".js-ae-sidebar-right").html("<div class='ae-sidebar ae-sidebar-right'><a href='#' class='ae-btn ae-btn-md ae-btn-primary ae-btn-border js-ae-hide-right-sidebar ae-close-detail'>Close</a><%= j (render partial: @partial_name) %></div>");
|
|
@@ -55,6 +55,10 @@
|
|
|
55
55
|
<li><h3>Nav</h3>
|
|
56
56
|
<%= render "express_ui/molecules/nav" %>
|
|
57
57
|
</li>
|
|
58
|
+
<li><h3>Pagination</h3></li>
|
|
59
|
+
<li><h3>Progress Indicator</h3>
|
|
60
|
+
<%= render "express_ui/molecules/progress_indicator" %>
|
|
61
|
+
</li>
|
|
58
62
|
<li><h3>Table</h3>
|
|
59
63
|
<%= render "express_ui/molecules/table" %>
|
|
60
64
|
</li>
|
|
@@ -63,7 +67,6 @@
|
|
|
63
67
|
|
|
64
68
|
<h2>Organisms</h2>
|
|
65
69
|
|
|
66
|
-
<h2>Pagination</h2>
|
|
67
70
|
<ul>
|
|
68
71
|
<li>Dialog</li>
|
|
69
72
|
<li> <h3>Header</h3>
|
|
@@ -1,10 +1,21 @@
|
|
|
1
1
|
<html>
|
|
2
2
|
<%= render partial: 'layouts/express_ui/head' %>
|
|
3
3
|
<body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
|
|
4
|
+
|
|
4
5
|
<header>
|
|
5
|
-
<%= content_for(:header) || render(partial: 'shared/header') rescue nil %>
|
|
6
|
+
<%= content_for(:header) || render(partial: 'express_ui/shared/header') rescue nil %>
|
|
6
7
|
</header>
|
|
8
|
+
|
|
7
9
|
<div class="ae-template-master-detail-fixed">
|
|
10
|
+
<a href="#" class="ae-mobile-only ae-btn ae-btn-primary ae-show-left-sidebar ae-btn-sm js-ae-show-left-sidebar"><i class="fa fa-bars"></i> Show More</a>
|
|
11
|
+
|
|
12
|
+
<div class="ae-sidebar ae-sidebar-left js-ae-sidebar">
|
|
13
|
+
<%= content_for(:sidebar) rescue nil %>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div class="js-ae-sidebar-right">
|
|
17
|
+
</div>
|
|
18
|
+
|
|
8
19
|
<div class="ae-container">
|
|
9
20
|
<div class="ae-content">
|
|
10
21
|
<%= yield %>
|
|
@@ -12,7 +23,7 @@
|
|
|
12
23
|
</div>
|
|
13
24
|
</div>
|
|
14
25
|
<footer>
|
|
15
|
-
<%= content_for(:footer) || render(partial: 'shared/footer') rescue nil %>
|
|
26
|
+
<%= content_for(:footer) || render(partial: 'express_ui/shared/footer') rescue nil %>
|
|
16
27
|
</footer>
|
|
17
28
|
</body>
|
|
18
29
|
</head>
|
data/config/routes.rb
CHANGED
|
@@ -17,4 +17,7 @@ ExpressUi::Engine.routes.draw do
|
|
|
17
17
|
get '/ui_components/pages/login', to: 'pages#login'
|
|
18
18
|
get '/ui_components/pages/static', to: 'pages#static'
|
|
19
19
|
|
|
20
|
+
get '/ui_components/pages/admin/', to: 'pages#admin'
|
|
21
|
+
get '/ui_components/pages/admin/detail', to: 'pages#show_detail'
|
|
22
|
+
|
|
20
23
|
end
|
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.5.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Steven Talcott Smith
|
|
@@ -10,7 +10,7 @@ authors:
|
|
|
10
10
|
autorequire:
|
|
11
11
|
bindir: bin
|
|
12
12
|
cert_chain: []
|
|
13
|
-
date: 2017-
|
|
13
|
+
date: 2017-06-09 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: express_templates
|
|
@@ -185,6 +185,7 @@ files:
|
|
|
185
185
|
- app/assets/stylesheets/express_ui/molecules/_forms.sass
|
|
186
186
|
- app/assets/stylesheets/express_ui/molecules/_lists.sass
|
|
187
187
|
- app/assets/stylesheets/express_ui/molecules/_nav.sass
|
|
188
|
+
- app/assets/stylesheets/express_ui/molecules/_progress_indicator.sass
|
|
188
189
|
- app/assets/stylesheets/express_ui/molecules/_tables.sass
|
|
189
190
|
- app/assets/stylesheets/express_ui/molecules/_tabs.sass
|
|
190
191
|
- app/assets/stylesheets/express_ui/organisms/_footer.sass
|
|
@@ -241,12 +242,16 @@ files:
|
|
|
241
242
|
- app/views/express_ui/molecules/_nav.html.erb
|
|
242
243
|
- app/views/express_ui/molecules/_nav_mega_menu.html.et
|
|
243
244
|
- app/views/express_ui/molecules/_nav_menu.html.et
|
|
245
|
+
- app/views/express_ui/molecules/_progress_indicator.html.et
|
|
244
246
|
- app/views/express_ui/molecules/_table.html.erb
|
|
245
247
|
- app/views/express_ui/molecules/_table_with_filtering.html.erb
|
|
246
248
|
- app/views/express_ui/organisms/_header.html.erb
|
|
249
|
+
- app/views/express_ui/pages/admin.html.erb
|
|
247
250
|
- app/views/express_ui/pages/coming_soon.html.erb
|
|
251
|
+
- app/views/express_ui/pages/details/_detail_1.html.erb
|
|
248
252
|
- app/views/express_ui/pages/login.html.erb
|
|
249
253
|
- app/views/express_ui/pages/register.html.erb
|
|
254
|
+
- app/views/express_ui/pages/show_detail.js.erb
|
|
250
255
|
- app/views/express_ui/pages/static.html.erb
|
|
251
256
|
- app/views/express_ui/scripts/_accordion.html.et
|
|
252
257
|
- app/views/express_ui/scripts/_calendar.html.et
|
|
@@ -313,6 +318,7 @@ files:
|
|
|
313
318
|
- vendor/assets/javascripts/picker.js
|
|
314
319
|
- vendor/assets/javascripts/quickaccord.js
|
|
315
320
|
- vendor/assets/javascripts/resizable.js
|
|
321
|
+
- vendor/assets/javascripts/sidebar.js
|
|
316
322
|
- vendor/assets/stylesheets/classic.css
|
|
317
323
|
- vendor/assets/stylesheets/default.css
|
|
318
324
|
- vendor/assets/stylesheets/default.date.css
|
|
@@ -339,7 +345,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
339
345
|
version: '0'
|
|
340
346
|
requirements: []
|
|
341
347
|
rubyforge_project:
|
|
342
|
-
rubygems_version: 2.
|
|
348
|
+
rubygems_version: 2.6.12
|
|
343
349
|
signing_key:
|
|
344
350
|
specification_version: 4
|
|
345
351
|
summary: User interface library for AppExpress components
|