coveragebook_components 0.5.5 → 0.5.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/build/coco/app.css +286 -61
- data/app/assets/build/coco/app.js +1 -1
- data/app/assets/build/coco/book.css +347 -62
- data/app/assets/build/coco/img/test/slides/slide-bg.jpg +0 -0
- data/app/assets/build/coco/img/test/slides/slide-foreground-landscape.jpg +0 -0
- data/app/assets/build/coco/img/test/slides/slide-foreground-portrait.jpg +0 -0
- data/app/assets/img/test/slides/slide-bg.jpg +0 -0
- data/app/assets/img/test/slides/slide-foreground-landscape.jpg +0 -0
- data/app/assets/img/test/slides/slide-foreground-portrait.jpg +0 -0
- data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.css +243 -37
- data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.html.erb +30 -12
- data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.rb +28 -1
- data/lib/coco.rb +1 -1
- metadata +8 -4
- data/app/assets/build/coco/img/slide-bg.jpg +0 -0
- data/app/assets/img/slide-bg.jpg +0 -0
@@ -1,40 +1,46 @@
|
|
1
1
|
@layer components {
|
2
2
|
[data-coco][data-component="book-editable-slide"] {
|
3
3
|
/*
|
4
|
-
*
|
5
|
-
*
|
4
|
+
* slide-padding-md at max (1480px): 240px (16.2%)
|
5
|
+
* slide-padding-md at min (320px): 16.2% x 320px = 52px
|
6
6
|
*/
|
7
|
-
--
|
7
|
+
--slide-padding-lg: max(38px, clamp(52px, 16.2cqw, 240px));
|
8
8
|
|
9
9
|
/*
|
10
|
-
*
|
11
|
-
*
|
10
|
+
* slide-padding-md at max (1480px): 120px (8.1%)
|
11
|
+
* slide-padding-md at min (320px): 8.1% x 320px = 26px
|
12
12
|
*/
|
13
|
-
--
|
13
|
+
--slide-padding-md: max(24px, clamp(26px, 8.1cqw, 120px));
|
14
14
|
|
15
15
|
/*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
|
16
|
+
* slide-padding-sm at max (1480px): 80px (5.4%)
|
17
|
+
* slide-padding-sm at min (320px): 5.4% x 320px = 17px
|
18
|
+
*/
|
19
|
+
--slide-padding-sm: max(24px, clamp(17px, 5.4cqw, 80px));
|
20
|
+
|
21
|
+
/*
|
22
|
+
* Small title font size at max (1480px): 64px (4.3%)
|
23
|
+
* Small title font size at min (320px): 4.3% x 320px = 13.8px
|
19
24
|
*/
|
20
25
|
--title-font-size: max(
|
21
|
-
|
22
|
-
clamp(
|
26
|
+
32px,
|
27
|
+
clamp(13.8px, 4.3cqw, theme(fontSize.display-3))
|
23
28
|
);
|
24
29
|
|
25
30
|
/*
|
26
|
-
* Text font size at max (1480px):
|
27
|
-
* Text font size at min (320px):
|
28
|
-
* Text font size at reflow (700px): 14px
|
31
|
+
* Text font size at max (1480px): 24px / 1.62%
|
32
|
+
* Text font size at min (320px): 1.62% x 320px = 5.2px
|
29
33
|
*/
|
30
34
|
--text-font-size: max(
|
31
|
-
|
32
|
-
clamp(
|
35
|
+
16px,
|
36
|
+
clamp(5.2px, 1.62cqw, theme(fontSize.subheading-2))
|
33
37
|
);
|
34
38
|
|
35
39
|
/* ------------- */
|
36
40
|
|
37
|
-
@apply
|
41
|
+
@apply relative rounded-md @container;
|
42
|
+
@apply bg-white bg-no-repeat bg-cover;
|
43
|
+
|
38
44
|
min-width: 320px;
|
39
45
|
|
40
46
|
.slide-aspect {
|
@@ -42,13 +48,14 @@
|
|
42
48
|
}
|
43
49
|
|
44
50
|
.slide-container {
|
45
|
-
@apply @slide-fluid:absolute @slide-fluid:inset-0;
|
46
|
-
@apply
|
51
|
+
@apply @slide-fluid:absolute @slide-fluid:inset-0 overflow-hidden;
|
52
|
+
@apply px-6 py-10 @slide-fluid:p-[var(--slide-padding-md)];
|
47
53
|
}
|
48
54
|
|
49
55
|
[data-slide-region],
|
56
|
+
.slide-header,
|
50
57
|
.slide-text,
|
51
|
-
.slide-
|
58
|
+
.slide-image {
|
52
59
|
@apply hidden;
|
53
60
|
}
|
54
61
|
|
@@ -56,10 +63,53 @@
|
|
56
63
|
@apply contents;
|
57
64
|
}
|
58
65
|
|
66
|
+
.slide-title {
|
67
|
+
@apply font-bold text-current;
|
68
|
+
overflow-wrap: anywhere;
|
69
|
+
line-height: 1.1;
|
70
|
+
font-size: var(--title-font-size);
|
71
|
+
}
|
72
|
+
|
73
|
+
.slide-text {
|
74
|
+
@apply text-current;
|
75
|
+
line-height: 1.5;
|
76
|
+
font-size: var(--text-font-size);
|
77
|
+
}
|
78
|
+
|
79
|
+
.slide-media {
|
80
|
+
@apply w-full;
|
81
|
+
|
82
|
+
img {
|
83
|
+
@apply w-full h-full object-contain;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
59
87
|
/* layouts */
|
60
88
|
|
61
|
-
&[data-layout="
|
62
|
-
|
89
|
+
&[data-layout="one-col-title"] {
|
90
|
+
/*
|
91
|
+
* Title font size at max (1480px): 80px (5.4%)
|
92
|
+
* Title font size at min (320px): 5.4% x 320px = 17px
|
93
|
+
*/
|
94
|
+
--title-font-size: max(
|
95
|
+
35px,
|
96
|
+
clamp(17px, 5.4cqw, theme(fontSize.display-2))
|
97
|
+
);
|
98
|
+
|
99
|
+
/*
|
100
|
+
* Text font size at max (1480px): 32px / 2.16%
|
101
|
+
* Text font size at min (320px): 2.16% x 320px = 7px
|
102
|
+
*/
|
103
|
+
--text-font-size: max(
|
104
|
+
16px,
|
105
|
+
clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
|
106
|
+
);
|
107
|
+
|
108
|
+
@apply text-center;
|
109
|
+
|
110
|
+
.slide-container {
|
111
|
+
@apply @slide-fluid:px-[var(--slide-padding-lg)];
|
112
|
+
}
|
63
113
|
|
64
114
|
[data-slide-region="content-1"] {
|
65
115
|
@apply block;
|
@@ -69,17 +119,16 @@
|
|
69
119
|
}
|
70
120
|
}
|
71
121
|
|
72
|
-
.slide-
|
73
|
-
|
74
|
-
|
75
|
-
|
122
|
+
&.with-title [data-slide-region="content-1"] .slide-text {
|
123
|
+
margin-top: 0.875em;
|
124
|
+
}
|
125
|
+
|
126
|
+
.slide-layout {
|
127
|
+
@apply flex flex-col items-center justify-center text-center w-full h-full;
|
76
128
|
}
|
77
129
|
|
78
130
|
.slide-header {
|
79
|
-
@apply w-full;
|
80
|
-
margin-bottom: 0.3em;
|
81
|
-
line-height: 1.1;
|
82
|
-
font-size: var(--title-font-size);
|
131
|
+
@apply w-full block;
|
83
132
|
}
|
84
133
|
|
85
134
|
.slide-content {
|
@@ -91,16 +140,173 @@
|
|
91
140
|
@apply mx-auto w-full max-w-[360px] @slide-fluid:max-w-full;
|
92
141
|
}
|
93
142
|
|
143
|
+
.slide-text {
|
144
|
+
line-height: 1.4;
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
&[data-layout="one-col-text"] {
|
149
|
+
.slide-container {
|
150
|
+
@apply flex items-center;
|
151
|
+
}
|
152
|
+
|
153
|
+
.slide-layout {
|
154
|
+
@apply @slide-fluid:grid w-full;
|
155
|
+
height: min-content;
|
156
|
+
grid-template-columns: 1fr;
|
157
|
+
grid-template-rows: auto;
|
158
|
+
grid-gap: var(--slide-padding-sm);
|
159
|
+
}
|
160
|
+
|
161
|
+
&.with-title {
|
162
|
+
.slide-container {
|
163
|
+
@apply block;
|
164
|
+
}
|
165
|
+
|
166
|
+
.slide-layout {
|
167
|
+
@apply h-full;
|
168
|
+
grid-template-rows: min-content auto;
|
169
|
+
}
|
170
|
+
}
|
171
|
+
|
172
|
+
.slide-header {
|
173
|
+
@apply w-full block;
|
174
|
+
@apply mb-6 @slide-fluid:mb-0;
|
175
|
+
}
|
176
|
+
|
177
|
+
[data-slide-region="content-1"] {
|
178
|
+
@apply block;
|
179
|
+
|
180
|
+
.slide-text {
|
181
|
+
@apply block;
|
182
|
+
}
|
183
|
+
}
|
184
|
+
}
|
185
|
+
|
186
|
+
&[data-layout="one-col-media"] {
|
187
|
+
.slide-container {
|
188
|
+
@apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
|
189
|
+
}
|
190
|
+
|
191
|
+
.slide-layout,
|
192
|
+
.slide-content {
|
193
|
+
@apply h-full;
|
194
|
+
}
|
195
|
+
|
196
|
+
[data-slide-region="content-1"] {
|
197
|
+
@apply block;
|
198
|
+
|
199
|
+
.slide-media {
|
200
|
+
@apply block w-full h-full;
|
201
|
+
|
202
|
+
img {
|
203
|
+
@apply h-full w-full object-contain;
|
204
|
+
}
|
205
|
+
}
|
206
|
+
}
|
207
|
+
}
|
208
|
+
|
209
|
+
&[data-layout="two-col-text"],
|
210
|
+
&[data-layout="two-col-media"] {
|
211
|
+
.slide-container {
|
212
|
+
@apply flex items-center;
|
213
|
+
@apply py-6 @slide-fluid:py-[var(--slide-padding-sm)];
|
214
|
+
}
|
215
|
+
|
216
|
+
.slide-layout {
|
217
|
+
@apply @slide-fluid:grid w-full;
|
218
|
+
height: min-content;
|
219
|
+
grid-template-columns: 1fr 1fr;
|
220
|
+
grid-template-rows: auto;
|
221
|
+
grid-gap: var(--slide-padding-sm);
|
222
|
+
}
|
223
|
+
|
224
|
+
&.with-title {
|
225
|
+
.slide-container {
|
226
|
+
@apply block;
|
227
|
+
}
|
228
|
+
|
229
|
+
.slide-layout {
|
230
|
+
@apply h-full;
|
231
|
+
grid-template-rows: min-content auto;
|
232
|
+
}
|
233
|
+
}
|
234
|
+
|
235
|
+
.slide-header {
|
236
|
+
@apply w-full block;
|
237
|
+
@apply mb-10 @slide-fluid:mb-0;
|
238
|
+
grid-column-start: 1;
|
239
|
+
grid-column-end: -1;
|
240
|
+
}
|
241
|
+
|
242
|
+
[data-slide-region="content-1"],
|
243
|
+
[data-slide-region="content-2"] {
|
244
|
+
@apply block;
|
245
|
+
|
246
|
+
.slide-text,
|
247
|
+
.slide-media {
|
248
|
+
@apply block;
|
249
|
+
}
|
250
|
+
}
|
251
|
+
|
252
|
+
[data-slide-region="content-1"] {
|
253
|
+
@apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
|
254
|
+
}
|
255
|
+
}
|
256
|
+
|
257
|
+
&[data-layout="two-col-media"] {
|
258
|
+
.slide-layout {
|
259
|
+
@apply @slide-fluid:h-full;
|
260
|
+
}
|
261
|
+
|
262
|
+
.slide-content {
|
263
|
+
@apply relative @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
|
264
|
+
}
|
265
|
+
|
266
|
+
.slide-media {
|
267
|
+
@apply @slide-fluid:absolute @slide-fluid:inset-0;
|
268
|
+
}
|
269
|
+
}
|
270
|
+
|
271
|
+
&[data-layout="two-col-mixed"] {
|
272
|
+
.slide-layout {
|
273
|
+
@apply @slide-fluid:grid w-full h-full;
|
274
|
+
grid-template-columns: 1fr 1fr;
|
275
|
+
grid-template-rows: auto;
|
276
|
+
grid-gap: var(--slide-padding-sm);
|
277
|
+
}
|
278
|
+
|
279
|
+
.slide-group {
|
280
|
+
@apply flex flex-col justify-center;
|
281
|
+
@apply mb-[var(--slide-padding-sm)] @slide-fluid:mb-0;
|
282
|
+
}
|
283
|
+
|
284
|
+
.slide-header {
|
285
|
+
@apply w-full block;
|
286
|
+
}
|
287
|
+
|
94
288
|
.slide-title {
|
95
|
-
|
96
|
-
overflow-wrap: anywhere;
|
97
|
-
line-height: 1.1;
|
289
|
+
margin-bottom: 0.5em;
|
98
290
|
}
|
99
291
|
|
100
|
-
|
101
|
-
@apply
|
102
|
-
|
103
|
-
|
292
|
+
[data-slide-region="content-1"] {
|
293
|
+
@apply block;
|
294
|
+
|
295
|
+
.slide-text {
|
296
|
+
@apply block;
|
297
|
+
}
|
298
|
+
}
|
299
|
+
|
300
|
+
[data-slide-region="content-2"] {
|
301
|
+
@apply relative block @slide-fluid:flex @slide-fluid:items-center @slide-fluid:h-full;
|
302
|
+
|
303
|
+
.slide-media {
|
304
|
+
@apply block @slide-fluid:absolute @slide-fluid:inset-0;
|
305
|
+
|
306
|
+
img {
|
307
|
+
@apply h-full w-full object-contain;
|
308
|
+
}
|
309
|
+
}
|
104
310
|
}
|
105
311
|
}
|
106
312
|
}
|
@@ -1,21 +1,39 @@
|
|
1
|
-
<%= render component_tag(style: slide_styles) do %>
|
1
|
+
<%= render component_tag(style: slide_styles, class: {"with-title": title?}) do %>
|
2
2
|
<div class="slide-aspect">
|
3
3
|
<div class="slide-container">
|
4
4
|
|
5
|
-
<div class="slide-
|
6
|
-
<
|
5
|
+
<div class="slide-layout">
|
6
|
+
<div class="slide-group">
|
7
7
|
<% if title? %>
|
8
|
-
<
|
9
|
-
|
10
|
-
|
8
|
+
<header class="slide-header">
|
9
|
+
<h3 class="slide-title" data-role="title">
|
10
|
+
<%= title %>
|
11
|
+
</h3>
|
12
|
+
</header>
|
11
13
|
<% end %>
|
12
|
-
</header>
|
13
14
|
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
15
|
+
<div class="slide-content" data-slide-region="content-1">
|
16
|
+
<% if text_1? %>
|
17
|
+
<div class="slide-text" data-role="text-1">
|
18
|
+
<%= text_1 %>
|
19
|
+
</div>
|
20
|
+
<% elsif image_1? %>
|
21
|
+
<div class="slide-media" data-role="media-1">
|
22
|
+
<img src="<%= image_1 %>">
|
23
|
+
</div>
|
24
|
+
<% end %>
|
25
|
+
</div>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<div class="slide-content" data-slide-region="content-2">
|
29
|
+
<% if text_2? %>
|
30
|
+
<div class="slide-text" data-role="text-2">
|
31
|
+
<%= text_2 %>
|
32
|
+
</div>
|
33
|
+
<% elsif image_2? %>
|
34
|
+
<div class="slide-media" data-role="media-2">
|
35
|
+
<img src="<%= image_2 %>">
|
36
|
+
</div>
|
19
37
|
<% end %>
|
20
38
|
</div>
|
21
39
|
</div>
|
@@ -7,7 +7,7 @@ module Coco
|
|
7
7
|
include Coco::TagHelper
|
8
8
|
include Coco::FormatHelper
|
9
9
|
|
10
|
-
accepts_option :layout, from: %w[
|
10
|
+
accepts_option :layout, from: %w[one-col-title one-col-text one-col-media two-col-text two-col-media two-col-mixed], default: "one-col-title"
|
11
11
|
|
12
12
|
renders_one :title,
|
13
13
|
->(&block) do
|
@@ -21,6 +21,33 @@ module Coco
|
|
21
21
|
block.call
|
22
22
|
end
|
23
23
|
|
24
|
+
renders_one :text_2,
|
25
|
+
->(&block) do
|
26
|
+
@has_content = true
|
27
|
+
block.call
|
28
|
+
end
|
29
|
+
|
30
|
+
renders_one :image_1,
|
31
|
+
->(href:) do
|
32
|
+
@has_content = true
|
33
|
+
href
|
34
|
+
end
|
35
|
+
|
36
|
+
renders_one :image_2,
|
37
|
+
->(href:) do
|
38
|
+
@has_content = true
|
39
|
+
href
|
40
|
+
end
|
41
|
+
|
42
|
+
before_initialize do |kwargs|
|
43
|
+
if kwargs[:layout]
|
44
|
+
kwargs[:layout] = kwargs[:layout].to_s.tr("_", "-")
|
45
|
+
kwargs[:layout] = "one-col-title" if kwargs[:layout] == "basic" # handle legacy layout name
|
46
|
+
end
|
47
|
+
|
48
|
+
kwargs
|
49
|
+
end
|
50
|
+
|
24
51
|
attr_reader :bg_image, :text_color_hex, :bg_color_hex
|
25
52
|
|
26
53
|
def initialize(bg_image: nil, bg_color_hex: nil, text_color_hex: nil, render_empty: false, **kwargs)
|
data/lib/coco.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: coveragebook_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.5.
|
4
|
+
version: 0.5.6
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Mark Perkins
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-07-
|
11
|
+
date: 2023-07-27 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -1257,7 +1257,9 @@ files:
|
|
1257
1257
|
- app/assets/build/coco/icons/zoom-out.svg
|
1258
1258
|
- app/assets/build/coco/img/coveragebook-landscape-white.svg
|
1259
1259
|
- app/assets/build/coco/img/coveragebook-logomark-white.svg
|
1260
|
-
- app/assets/build/coco/img/slide-bg.jpg
|
1260
|
+
- app/assets/build/coco/img/test/slides/slide-bg.jpg
|
1261
|
+
- app/assets/build/coco/img/test/slides/slide-foreground-landscape.jpg
|
1262
|
+
- app/assets/build/coco/img/test/slides/slide-foreground-portrait.jpg
|
1261
1263
|
- app/assets/config/coco/manifest.js
|
1262
1264
|
- app/assets/css/app.css
|
1263
1265
|
- app/assets/css/app/config.css
|
@@ -1274,7 +1276,9 @@ files:
|
|
1274
1276
|
- app/assets/css/libs/tippy.css
|
1275
1277
|
- app/assets/img/coveragebook-landscape-white.svg
|
1276
1278
|
- app/assets/img/coveragebook-logomark-white.svg
|
1277
|
-
- app/assets/img/slide-bg.jpg
|
1279
|
+
- app/assets/img/test/slides/slide-bg.jpg
|
1280
|
+
- app/assets/img/test/slides/slide-foreground-landscape.jpg
|
1281
|
+
- app/assets/img/test/slides/slide-foreground-portrait.jpg
|
1278
1282
|
- app/assets/js/app.js
|
1279
1283
|
- app/assets/js/app/components.js
|
1280
1284
|
- app/assets/js/app/mixins/dropdown.js
|
Binary file
|
data/app/assets/img/slide-bg.jpg
DELETED
Binary file
|