katalyst-kpop 3.0.0.beta.8 → 3.0.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/stylesheets/katalyst/kpop/_frame.scss +0 -1
- data/app/assets/stylesheets/katalyst/kpop/_modal.scss +53 -46
- data/app/assets/stylesheets/katalyst/kpop/_variables.scss +1 -2
- data/app/components/kpop/modal/footer_component.rb +21 -0
- data/app/components/kpop/modal/header_component.rb +21 -0
- data/app/components/kpop/modal_component.html.erb +1 -3
- data/app/components/kpop/modal_component.rb +16 -4
- data/lib/katalyst/kpop/version.rb +1 -1
- metadata +6 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a962b5da6d47aaad35256ab66cb90fcb20cf42fee35e566f19393d9a6a02ec63
|
4
|
+
data.tar.gz: d50849e4da9a51e547c46c861c844375f4aef5ee4c6df75e52e557cf553dac9f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4ff935cebd1a45f2ac6018eea1d180662eb1e53e517a42dfa94b843fde883846c499834ccafd417ec0e1386a4bf5fd37e2b8b04e0689e746b045d046bc17a312
|
7
|
+
data.tar.gz: e572c8b98ed9325592ec15f5780ff024e3a0623f3e20620d06045b4b9223953467451ebe94a7f36223c517061efad67e792b729817abd82c0c1fdd2a882165ec
|
@@ -10,69 +10,76 @@
|
|
10
10
|
grid-template-rows: auto auto 1fr auto;
|
11
11
|
|
12
12
|
background-color: white;
|
13
|
-
border: 1px solid black;
|
14
13
|
border-radius: $border-radius;
|
15
14
|
overflow: hidden;
|
16
15
|
max-height: var(--max-height);
|
17
|
-
|
16
|
+
box-shadow: rgb(0 0 0 / 25%) 0 1px 2px, rgb(0 0 0 / 31%) 0 0 5px;
|
18
17
|
|
19
|
-
.kpop-title-bar {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
18
|
+
.kpop-title-bar {
|
19
|
+
grid-area: title-bar;
|
20
|
+
display: grid;
|
21
|
+
grid-template-areas: "close title empty";
|
22
|
+
grid-template-columns: 3.5rem auto 3.5rem;
|
23
|
+
border-bottom: 1px solid $keyline-color;
|
24
|
+
min-height: 3.5rem;
|
25
|
+
align-items: center;
|
26
|
+
}
|
24
27
|
|
25
|
-
.kpop-
|
28
|
+
.kpop-header {
|
29
|
+
grid-area: header;
|
30
|
+
}
|
31
|
+
|
32
|
+
.kpop-content {
|
33
|
+
grid-area: content;
|
34
|
+
display: flex;
|
35
|
+
flex-direction: column;
|
36
|
+
overflow: auto;
|
37
|
+
}
|
38
|
+
|
39
|
+
.kpop-footer {
|
40
|
+
grid-area: footer;
|
41
|
+
border-top: 1px solid $keyline-color;
|
26
42
|
padding: $default-padding;
|
27
|
-
|
43
|
+
}
|
44
|
+
|
45
|
+
.kpop-title {
|
46
|
+
grid-area: title;
|
47
|
+
font-weight: bold;
|
48
|
+
text-align: center;
|
49
|
+
white-space: nowrap;
|
50
|
+
overflow: hidden;
|
51
|
+
text-overflow: ellipsis;
|
52
|
+
line-height: 3.5rem;
|
28
53
|
}
|
29
54
|
|
30
55
|
.kpop-close {
|
56
|
+
grid-area: close;
|
57
|
+
text-align: center;
|
31
58
|
background: none;
|
32
59
|
border: none;
|
33
|
-
color: $title-text-color;
|
34
|
-
cursor: pointer;
|
35
60
|
display: block;
|
36
61
|
font-size: 2rem;
|
37
|
-
font-weight:
|
38
|
-
padding: 0 0.75rem;
|
62
|
+
font-weight: 300;
|
39
63
|
text-decoration: none;
|
64
|
+
line-height: 3.5rem;
|
40
65
|
}
|
41
|
-
}
|
42
|
-
|
43
|
-
.kpop-header {
|
44
|
-
grid-area: header;
|
45
|
-
}
|
46
|
-
|
47
|
-
.kpop-content {
|
48
|
-
grid-area: content;
|
49
|
-
display: flex;
|
50
|
-
flex-direction: column;
|
51
|
-
overflow: auto;
|
52
|
-
}
|
53
66
|
|
54
|
-
.
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
padding: $default-padding;
|
59
|
-
}
|
60
|
-
|
61
|
-
.kpop-buttons {
|
62
|
-
display: flex;
|
63
|
-
gap: 0.5rem;
|
64
|
-
justify-content: space-between;
|
65
|
-
}
|
66
|
-
|
67
|
-
.kpop-modal.iframe {
|
68
|
-
.kpop-content {
|
69
|
-
overflow: unset;
|
67
|
+
.button-set {
|
68
|
+
display: flex;
|
69
|
+
gap: 0.5rem;
|
70
|
+
justify-content: flex-end;
|
70
71
|
}
|
71
72
|
|
72
|
-
iframe {
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
73
|
+
&.iframe {
|
74
|
+
.kpop-content {
|
75
|
+
overflow: unset;
|
76
|
+
}
|
77
|
+
|
78
|
+
iframe {
|
79
|
+
height: var(--max-height);
|
80
|
+
width: var(--max-width);
|
81
|
+
flex-grow: 1;
|
82
|
+
overflow: scroll;
|
83
|
+
}
|
77
84
|
}
|
78
85
|
}
|
@@ -17,9 +17,8 @@ $mobile-height: 400px !default;
|
|
17
17
|
|
18
18
|
// modal variables
|
19
19
|
$border-radius: 0.5rem !default;
|
20
|
-
$title-background-color: #344055 !default;
|
21
|
-
$title-text-color: white !default;
|
22
20
|
$default-padding: 1rem 1.5rem !default;
|
21
|
+
$keyline-color: #e0e0e0 !default;
|
23
22
|
|
24
23
|
// scrim variables
|
25
24
|
$scrim-background: rgba(0, 0, 0, 0.6) !default;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Kpop
|
4
|
+
module Modal
|
5
|
+
class FooterComponent < ViewComponent::Base
|
6
|
+
include HasHtmlAttributes
|
7
|
+
|
8
|
+
def call
|
9
|
+
tag.div(content, **html_attributes)
|
10
|
+
end
|
11
|
+
|
12
|
+
def inspect
|
13
|
+
"#<#{self.class.name}>"
|
14
|
+
end
|
15
|
+
|
16
|
+
def default_html_attributes
|
17
|
+
{ class: "kpop-footer" }
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Kpop
|
4
|
+
module Modal
|
5
|
+
class HeaderComponent < ViewComponent::Base
|
6
|
+
include HasHtmlAttributes
|
7
|
+
|
8
|
+
def call
|
9
|
+
tag.div(content, **html_attributes)
|
10
|
+
end
|
11
|
+
|
12
|
+
def inspect
|
13
|
+
"#<#{self.class.name}>"
|
14
|
+
end
|
15
|
+
|
16
|
+
def default_html_attributes
|
17
|
+
{ class: "kpop-header" }
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
@@ -5,11 +5,15 @@ module Kpop
|
|
5
5
|
include HasHtmlAttributes
|
6
6
|
|
7
7
|
renders_one :title, "Kpop::Modal::TitleComponent"
|
8
|
-
renders_one :header
|
9
|
-
renders_one :footer
|
8
|
+
renders_one :header, "Kpop::Modal::HeaderComponent"
|
9
|
+
renders_one :footer, "Kpop::Modal::FooterComponent"
|
10
10
|
|
11
|
-
|
12
|
-
|
11
|
+
define_html_attribute_methods :content_attributes
|
12
|
+
|
13
|
+
def initialize(title:, fallback_location: nil, layout: nil, captive: false, **html_attributes)
|
14
|
+
self.content_attributes = html_attributes.delete(:content) if html_attributes.key?(:content)
|
15
|
+
|
16
|
+
super(**html_attributes)
|
13
17
|
|
14
18
|
@fallback_location = fallback_location
|
15
19
|
@layout = layout
|
@@ -18,6 +22,10 @@ module Kpop
|
|
18
22
|
with_title(title:, captive:) if title.present?
|
19
23
|
end
|
20
24
|
|
25
|
+
def with_footer_buttons(**, &)
|
26
|
+
with_footer(class: "button-set", **, &)
|
27
|
+
end
|
28
|
+
|
21
29
|
def inspect
|
22
30
|
"#<#{self.class.name} title: #{title.inspect}>"
|
23
31
|
end
|
@@ -35,5 +43,9 @@ module Kpop
|
|
35
43
|
},
|
36
44
|
}
|
37
45
|
end
|
46
|
+
|
47
|
+
def default_content_attributes
|
48
|
+
{ class: "kpop-content" }
|
49
|
+
end
|
38
50
|
end
|
39
51
|
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: katalyst-kpop
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 3.0.0
|
4
|
+
version: 3.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Katalyst Interactive
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-11-
|
11
|
+
date: 2023-11-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: html-attributes-utils
|
@@ -75,6 +75,8 @@ files:
|
|
75
75
|
- app/components/concerns/kpop/has_html_attributes.rb
|
76
76
|
- app/components/kpop/frame_component.html.erb
|
77
77
|
- app/components/kpop/frame_component.rb
|
78
|
+
- app/components/kpop/modal/footer_component.rb
|
79
|
+
- app/components/kpop/modal/header_component.rb
|
78
80
|
- app/components/kpop/modal/title_component.html.erb
|
79
81
|
- app/components/kpop/modal/title_component.rb
|
80
82
|
- app/components/kpop/modal_component.html.erb
|
@@ -127,9 +129,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
127
129
|
version: '3.2'
|
128
130
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
129
131
|
requirements:
|
130
|
-
- - "
|
132
|
+
- - ">="
|
131
133
|
- !ruby/object:Gem::Version
|
132
|
-
version:
|
134
|
+
version: '0'
|
133
135
|
requirements: []
|
134
136
|
rubygems_version: 3.4.20
|
135
137
|
signing_key:
|