coveragebook_components 0.5.4 → 0.5.6

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,40 +1,46 @@
1
1
  @layer components {
2
2
  [data-coco][data-component="book-editable-slide"] {
3
3
  /*
4
- * x-padding at max (1480px): 240px / 16.2%
5
- * x-padding at min (320px): 16.2% x 320px = 52px
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
- --x-padding: max(38px, clamp(52px, 16.2cqw, 240px));
7
+ --slide-padding-lg: max(38px, clamp(52px, 16.2cqw, 240px));
8
8
 
9
9
  /*
10
- * y-padding at max (1480px): 80px / 5.4%
11
- * y-padding at min (320px): 5.4% x 320px = 17px
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
- --y-padding: max(38px, clamp(17px, 5.4cqw, 80px));
13
+ --slide-padding-md: max(24px, clamp(26px, 8.1cqw, 120px));
14
14
 
15
15
  /*
16
- * Title font size at max (1480px): 80px / 5.4%
17
- * Title font size at min (320px): 5.4% x 320px = 17px
18
- * Text font size at reflow (700px): 35px
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
- 35px,
22
- clamp(17px, 5.4cqw, theme(fontSize.display-2))
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): 32px / 2.16%
27
- * Text font size at min (320px): 2.16% x 320px = 7px
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
- 15px,
32
- clamp(7px, 2.16cqw, theme(fontSize.subheading-1))
35
+ 16px,
36
+ clamp(5.2px, 1.62cqw, theme(fontSize.subheading-2))
33
37
  );
34
38
 
35
39
  /* ------------- */
36
40
 
37
- @apply bg-white relative rounded-md @container;
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 flex flex-col items-center justify-center text-center overflow-hidden bg-cover bg-center;
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-media {
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="basic"] {
62
- @apply text-center bg-no-repeat bg-cover;
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-container {
73
- @apply overflow-hidden;
74
- @apply px-8;
75
- @apply py-[var(--y-padding)] @slide-fluid:px-[var(--x-padding)];
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
- @apply font-bold text-current;
96
- overflow-wrap: anywhere;
97
- line-height: 1.1;
289
+ margin-bottom: 0.5em;
98
290
  }
99
291
 
100
- .slide-text {
101
- @apply text-current;
102
- line-height: 1.4;
103
- font-size: var(--text-font-size);
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-group">
6
- <header class="slide-header">
5
+ <div class="slide-layout">
6
+ <div class="slide-group">
7
7
  <% if title? %>
8
- <h3 class="slide-title" data-role="title">
9
- <%= title %>
10
- </h3>
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
- <div class="slide-content" data-slide-region="content-1">
15
- <% if text_1? %>
16
- <div class="slide-text" data-role="text-1">
17
- <%= text_1 %>
18
- </div>
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[basic], default: "basic"
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
@@ -1,3 +1,3 @@
1
1
  module Coco
2
- VERSION = "0.5.4"
2
+ VERSION = "0.5.6"
3
3
  end
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
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-18 00:00:00.000000000 Z
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
Binary file