express_ui 0.4.2 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|