playbook_ui 4.8.1 → 4.8.2
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/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +52 -0
- data/app/pb_kits/playbook/pb_table/index.js +28 -0
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +23 -30
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +6 -6
- data/app/pb_kits/playbook/pb_table/table.rb +6 -2
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -1
- data/app/pb_kits/playbook/vendor.js +3 -0
- data/app/views/layouts/playbook/_mobile_hamburger.html.erb +2 -0
- data/app/views/layouts/playbook/_nav.html.erb +13 -0
- data/app/views/layouts/playbook/application.html.slim +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +5 -3
- data/app/views/layouts/playbook/_nav.html.slim +0 -9
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4f41335e55a92455ba28930fa6ed89497e3b54fb3fed16c22fb16f49b55f1c45
|
|
4
|
+
data.tar.gz: 6ff3cf889a066d1fc7f030206b7e66cee9d5b6c8888361b4656ebdf9356836cc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a787d0ea25cfcf3ec2ae01ab16cba660b1e267d4ce69eea2f34f3d1ba8334c0d7dade17d5a81f3d520c694965582558d1e617274962be771f7c78dbdf1447abc
|
|
7
|
+
data.tar.gz: 530eb8478cd47f7ed0572617b2831bbc57e6b2c5cc9c7a4b885f3505fd6a8785ff95f7880ec83dd5f462ddc5141de8ab2d5d432717502f60462a037b8bfc3772
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
@import "../../tokens/colors";
|
|
2
2
|
@import "../../tokens/spacing";
|
|
3
|
+
@import "../../tokens/screen_sizes";
|
|
4
|
+
@import "../../tokens/border_radius";
|
|
5
|
+
@import "../../tokens/shadows";
|
|
3
6
|
|
|
7
|
+
$selector: ".pb--page";
|
|
8
|
+
|
|
9
|
+
body {
|
|
10
|
+
overflow-x: hidden;
|
|
11
|
+
}
|
|
4
12
|
|
|
5
13
|
.pb--page {
|
|
6
14
|
&--topNav {
|
|
@@ -18,13 +26,57 @@
|
|
|
18
26
|
}
|
|
19
27
|
&--content {
|
|
20
28
|
min-height: calc(100vh - 89px);
|
|
29
|
+
@include break_at(breakpoint("lg")) {
|
|
30
|
+
grid-template-columns: auto auto !important;
|
|
31
|
+
}
|
|
21
32
|
&--main {
|
|
22
33
|
flex-grow: 1;
|
|
23
34
|
padding: 40px 60px;
|
|
24
35
|
height: calc(100vh - 89px);
|
|
25
36
|
overflow: auto;
|
|
37
|
+
@include break_at(breakpoint("lg")) {
|
|
38
|
+
padding: $space-lg $space-xl;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
&--hamburger, &--checkbox {
|
|
43
|
+
position: absolute;
|
|
44
|
+
right: $space-xl;
|
|
45
|
+
top: 30px;
|
|
46
|
+
display: none;
|
|
47
|
+
font-size: $space-xl;
|
|
48
|
+
width: 30px;
|
|
49
|
+
height: 30px;
|
|
50
|
+
color: $primary;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
@include break_at(breakpoint("lg")) {
|
|
53
|
+
display: block;
|
|
26
54
|
}
|
|
27
55
|
}
|
|
56
|
+
&--checkbox {
|
|
57
|
+
opacity: 0;
|
|
58
|
+
~ #{$selector}--sideNav {
|
|
59
|
+
@include break_at(breakpoint("lg")) {
|
|
60
|
+
position: absolute;
|
|
61
|
+
transform-origin: 0% 0%;
|
|
62
|
+
transform: translate(100%, 0);
|
|
63
|
+
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
|
|
64
|
+
border-radius: $border_rad_heavier;
|
|
65
|
+
box-shadow: $shadow_deepest;
|
|
66
|
+
top: 100px;
|
|
67
|
+
right: 0;
|
|
68
|
+
width: auto !important;
|
|
69
|
+
padding: $space-xl;
|
|
70
|
+
z-index: 1000;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
&:checked ~ #{$selector}--sideNav {
|
|
74
|
+
@include break_at(breakpoint("lg")) {
|
|
75
|
+
transform: translate(-10%, 0);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
28
80
|
&--sideNav {
|
|
29
81
|
height: calc(100vh - 89px);
|
|
30
82
|
overflow: auto;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import PbEnhancedElement from '../pb_enhanced_element'
|
|
2
|
+
|
|
3
|
+
export default class PbTable extends PbEnhancedElement {
|
|
4
|
+
static get selector() {
|
|
5
|
+
return '.table-responsive-collapse'
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
connect() {
|
|
9
|
+
const tables = document.querySelectorAll('.table-responsive-collapse');
|
|
10
|
+
|
|
11
|
+
// Each Table
|
|
12
|
+
[].forEach.call(tables, (table) => {
|
|
13
|
+
// Header Titles
|
|
14
|
+
var headers = [].map.call(table.querySelectorAll('th'), (header) => {
|
|
15
|
+
return header.textContent.replace(/\r?\n|\r/, '')
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
// for each row in tbody
|
|
19
|
+
[].forEach.call(table.querySelectorAll('tbody tr'), (row) => {
|
|
20
|
+
// for each cell
|
|
21
|
+
[].forEach.call(row.cells, (cell, headerIndex) => {
|
|
22
|
+
// apply the attribute
|
|
23
|
+
cell.setAttribute('data-title', headers[headerIndex])
|
|
24
|
+
})
|
|
25
|
+
})
|
|
26
|
+
})
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
@import "../../tokens/border_radius";
|
|
2
|
+
@import "../../pb_caption/caption_mixin";
|
|
3
|
+
|
|
1
4
|
@media only screen and (max-width: $screen-xs-max) {
|
|
2
5
|
[class^=pb_table] {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
+
&.table-sm,
|
|
7
|
+
&.table-md,
|
|
8
|
+
&.table-lg {
|
|
6
9
|
width: 100%;
|
|
7
10
|
background: none !important;
|
|
8
11
|
|
|
@@ -28,15 +31,13 @@
|
|
|
28
31
|
border-bottom-width: 0 !important;
|
|
29
32
|
border-color: $border_light !important;
|
|
30
33
|
min-height: 2.2em;
|
|
31
|
-
padding-left: 34%;
|
|
34
|
+
// padding-left: 34%;
|
|
32
35
|
position: relative;
|
|
33
36
|
text-align:left;
|
|
34
37
|
white-space: normal;
|
|
35
38
|
&:before {
|
|
36
39
|
content: attr(data-title);
|
|
37
|
-
|
|
38
|
-
font-weight: $bold !important;
|
|
39
|
-
text-align: left !important;
|
|
40
|
+
@include caption;
|
|
40
41
|
width: 100% !important;
|
|
41
42
|
white-space: nowrap !important;
|
|
42
43
|
text-overflow: ellipsis !important;
|
|
@@ -52,11 +53,11 @@
|
|
|
52
53
|
margin-top: $space_md !important;
|
|
53
54
|
border-top-width: 1px !important;
|
|
54
55
|
border-top-color: $border_light !important;
|
|
55
|
-
border-radius:
|
|
56
|
+
border-radius: $border_rad_light $border_rad_light 0 0;
|
|
56
57
|
}
|
|
57
58
|
|
|
58
59
|
&:last-child {
|
|
59
|
-
border-radius: 0 0
|
|
60
|
+
border-radius: 0 0 $border_rad_light $border_rad_light;
|
|
60
61
|
border-bottom-width: 1px !important;
|
|
61
62
|
}
|
|
62
63
|
}
|
|
@@ -82,10 +83,10 @@
|
|
|
82
83
|
border-top-width: 1px !important;
|
|
83
84
|
|
|
84
85
|
&:first-child {
|
|
85
|
-
border-radius:
|
|
86
|
+
border-radius: $border_rad_light $border_rad_light 0 0 !important;
|
|
86
87
|
}
|
|
87
88
|
&:last-child {
|
|
88
|
-
border-radius: 0 0
|
|
89
|
+
border-radius: 0 0 $border_rad_light $border_rad_light !important;
|
|
89
90
|
}
|
|
90
91
|
}
|
|
91
92
|
}
|
|
@@ -99,6 +100,7 @@
|
|
|
99
100
|
}
|
|
100
101
|
}
|
|
101
102
|
}
|
|
103
|
+
// reset the first and last to normalize
|
|
102
104
|
@each $name, $value in $cell-pad-list {
|
|
103
105
|
&.#{$name} {
|
|
104
106
|
tbody {
|
|
@@ -114,25 +116,16 @@
|
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
}
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
td {
|
|
128
|
-
&::before {
|
|
129
|
-
content: '';
|
|
130
|
-
left: 0;
|
|
131
|
-
padding-right: 0;
|
|
132
|
-
position: relative;
|
|
133
|
-
width: 0;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
119
|
+
&.hide-labels {
|
|
120
|
+
tbody {
|
|
121
|
+
tr {
|
|
122
|
+
td {
|
|
123
|
+
&::before {
|
|
124
|
+
content: '';
|
|
125
|
+
left: 0;
|
|
126
|
+
padding-right: 0;
|
|
127
|
+
position: relative;
|
|
128
|
+
width: 0;
|
|
136
129
|
}
|
|
137
130
|
}
|
|
138
131
|
}
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
$table-dark-card-bg: $bg_dark;
|
|
4
4
|
|
|
5
5
|
[class^=pb_table] {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
&.table-sm,
|
|
7
|
+
&.table-md,
|
|
8
|
+
&.table-lg {
|
|
9
9
|
&.table-dark {
|
|
10
10
|
thead {
|
|
11
11
|
tr {
|
|
@@ -61,9 +61,9 @@ $table-dark-card-bg: $bg_dark;
|
|
|
61
61
|
|
|
62
62
|
@media only screen and (max-width: $screen-xs-max) {
|
|
63
63
|
[class^=pb_table] {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
&.table-sm,
|
|
65
|
+
&.table-md,
|
|
66
|
+
&.table-lg {
|
|
67
67
|
&.table-card {
|
|
68
68
|
&.table-dark {
|
|
69
69
|
background: none !important;
|
|
@@ -17,15 +17,19 @@ module Playbook
|
|
|
17
17
|
prop :disable_hover, type: Playbook::Props::Boolean,
|
|
18
18
|
default: false
|
|
19
19
|
prop :data_table, type: Playbook::Props::Boolean,
|
|
20
|
-
|
|
20
|
+
default: false
|
|
21
21
|
prop :container, type: Playbook::Props::Boolean,
|
|
22
22
|
default: true
|
|
23
|
+
prop :responsive, type: Playbook::Props::Enum,
|
|
24
|
+
values: %w[collapse scroll none],
|
|
25
|
+
default: "collapse"
|
|
23
26
|
prop :text
|
|
24
27
|
|
|
25
28
|
def classname
|
|
26
29
|
generate_classname(
|
|
27
30
|
"pb_table", "table-#{size}", single_line_class, dark_class,
|
|
28
|
-
disable_hover_class, container_class, data_table_class,
|
|
31
|
+
disable_hover_class, container_class, data_table_class,
|
|
32
|
+
"table-responsive-#{responsive}", separator: " "
|
|
29
33
|
)
|
|
30
34
|
end
|
|
31
35
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<div class="pb--page--topNav">
|
|
2
|
+
<h1>
|
|
3
|
+
<%= link_to root_url do %>
|
|
4
|
+
<%= image_tag("pb.logo.svg") %>
|
|
5
|
+
<% end %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("caption", props: { tag: "span", text: Playbook::VERSION }) %>
|
|
8
|
+
</h1>
|
|
9
|
+
</div>
|
|
10
|
+
<% flash.each do |name, msg| %>
|
|
11
|
+
<% name = "success" if name == "notice" %>
|
|
12
|
+
<%= pb_rails("fixed_confirmation_toast", props: { text: msg, status: name }) %>
|
|
13
|
+
<% end %>
|
|
@@ -9,6 +9,7 @@ html
|
|
|
9
9
|
body
|
|
10
10
|
= render 'layouts/playbook/nav'
|
|
11
11
|
= pb_rails("layout", props: {classname: "pb--page--content"})
|
|
12
|
+
= render 'layouts/playbook/mobile_hamburger'
|
|
12
13
|
= pb_rails("layout/sidebar", props: { classname: "pb--page--sideNav" })
|
|
13
14
|
= render 'layouts/playbook/sidebar'
|
|
14
15
|
= pb_rails("layout/body")
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 4.8.
|
|
4
|
+
version: 4.8.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2020-03-
|
|
12
|
+
date: 2020-03-24 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -1361,6 +1361,7 @@ files:
|
|
|
1361
1361
|
- app/pb_kits/playbook/pb_table/docs/_table_sm.md
|
|
1362
1362
|
- app/pb_kits/playbook/pb_table/docs/example.yml
|
|
1363
1363
|
- app/pb_kits/playbook/pb_table/docs/index.js
|
|
1364
|
+
- app/pb_kits/playbook/pb_table/index.js
|
|
1364
1365
|
- app/pb_kits/playbook/pb_table/styles/_all.scss
|
|
1365
1366
|
- app/pb_kits/playbook/pb_table/styles/_as-cards.scss
|
|
1366
1367
|
- app/pb_kits/playbook/pb_table/styles/_content.scss
|
|
@@ -1568,7 +1569,8 @@ files:
|
|
|
1568
1569
|
- app/pb_kits/playbook/utilities/props.js
|
|
1569
1570
|
- app/pb_kits/playbook/utilities/text.js
|
|
1570
1571
|
- app/pb_kits/playbook/vendor.js
|
|
1571
|
-
- app/views/layouts/playbook/
|
|
1572
|
+
- app/views/layouts/playbook/_mobile_hamburger.html.erb
|
|
1573
|
+
- app/views/layouts/playbook/_nav.html.erb
|
|
1572
1574
|
- app/views/layouts/playbook/_sidebar.html.erb
|
|
1573
1575
|
- app/views/layouts/playbook/application.html.slim
|
|
1574
1576
|
- app/views/layouts/playbook/fullscreen.html.slim
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
.pb--page--topNav
|
|
2
|
-
h1
|
|
3
|
-
= link_to root_url do
|
|
4
|
-
= image_tag("pb.logo.svg")
|
|
5
|
-
|
|
|
6
|
-
= pb_rails("caption", props: { tag: "span", text: Playbook::VERSION })
|
|
7
|
-
- flash.each do |name, msg|
|
|
8
|
-
- name = "success" if name == "notice"
|
|
9
|
-
= pb_rails("fixed_confirmation_toast", props: { text: msg, status: name })
|