Skip to content

Commit 5c71f8c

Browse files
PeeterPaalPeeterPaal
committed
Add page height & full width options to blocks
1 parent 2204073 commit 5c71f8c

File tree

7 files changed

+134
-24
lines changed

7 files changed

+134
-24
lines changed

‎components/block.tpl

+54
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,59 @@
2727
></button>
2828
{%- endcapture -%}
2929

30+
{%- capture settings_options -%}
31+
{% assign page_height = block_data.settings.page_height %}
32+
33+
{% if page_height == blank %}
34+
{% assign page_height = true %}
35+
{% endif %}
36+
37+
{% assign full_width = block_data.settings.full_width %}
38+
39+
{% if full_width == blank %}
40+
{% assign full_width = false %}
41+
{% endif %}
42+
43+
<div class="settings-options">
44+
<div class="settings-checkbox">
45+
<label>
46+
<input
47+
type="checkbox"
48+
class="js-settings-checkbox"
49+
data-key="{{ id }}"
50+
data-setting="page_height"
51+
{% if page_height %}
52+
checked
53+
{% endif %}
54+
/>
55+
56+
{{ "page_height" | lce }}
57+
</label>
58+
</div>
59+
60+
{% if layout_name == "column" -%}
61+
<div class="settings-checkbox">
62+
<label>
63+
<input
64+
type="checkbox"
65+
class="js-settings-checkbox"
66+
data-key="{{ id }}"
67+
data-setting="full_width"
68+
{% if full_width %}
69+
checked
70+
{% endif %}
71+
/>
72+
73+
{{ "full_width" | lce }}
74+
</label>
75+
</div>
76+
{% endif -%}
77+
</div>
78+
79+
{% assign page_height = null %}
80+
{% assign full_width = null %}
81+
{%- endcapture -%}
82+
3083
{%- capture change_layout_options -%}
3184
{%- if allowed_layouts.size > 1 -%}
3285
<div class="change-layout-options" data-title="{{ 'change_content_layout' | lce }}">
@@ -74,6 +127,7 @@
74127
{{ move_buttons }}
75128
{{ delete_button }}
76129
{{ change_layout_options }}
130+
{{ settings_options }}
77131
</div>
78132
{%- endif %}
79133

‎javascripts/editmode.js

+14
Original file line numberDiff line numberDiff line change
@@ -397,12 +397,26 @@
397397
});
398398
};
399399

400+
const bindBlockSettingsButton = ({bodyBlocks, dataKey}) => {
401+
$('.js-settings-checkbox').on('change', e => {
402+
const targetKey = e.target.dataset.key;
403+
const settingKey = e.target.dataset.setting;
404+
const currentBlock = bodyBlocks.find(block => String(block.key) === String(targetKey));
405+
406+
currentBlock.settings = currentBlock.settings || {};
407+
currentBlock.settings[settingKey] = e.target.checked;
408+
409+
pageData.set(dataKey, bodyBlocks);
410+
});
411+
};
412+
400413
const bindBlockActions = ({bodyBlocks, dataKey, deleteConfirmation}) => {
401414
$(document).ready(() => {
402415
bindBlockAdd({bodyBlocks, dataKey});
403416
bindBlockDelete({bodyBlocks, dataKey, deleteConfirmation});
404417
bindBlockReorder({bodyBlocks, dataKey});
405418
bindBlockLayoutChange({bodyBlocks, dataKey});
419+
bindBlockSettingsButton({bodyBlocks, dataKey});
406420
});
407421
};
408422

‎javascripts/editmode.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sources/javascripts/editmode.js

+14
Original file line numberDiff line numberDiff line change
@@ -393,12 +393,26 @@
393393
});
394394
};
395395

396+
const bindBlockSettingsButton = ({bodyBlocks, dataKey}) => {
397+
$('.js-settings-checkbox').on('change', e => {
398+
const targetKey = e.target.dataset.key;
399+
const settingKey = e.target.dataset.setting;
400+
const currentBlock = bodyBlocks.find(block => String(block.key) === String(targetKey));
401+
402+
currentBlock.settings = currentBlock.settings || {};
403+
currentBlock.settings[settingKey] = e.target.checked;
404+
405+
pageData.set(dataKey, bodyBlocks);
406+
});
407+
};
408+
396409
const bindBlockActions = ({bodyBlocks, dataKey, deleteConfirmation}) => {
397410
$(document).ready(() => {
398411
bindBlockAdd({bodyBlocks, dataKey});
399412
bindBlockDelete({bodyBlocks, dataKey, deleteConfirmation});
400413
bindBlockReorder({bodyBlocks, dataKey});
401414
bindBlockLayoutChange({bodyBlocks, dataKey});
415+
bindBlockSettingsButton({bodyBlocks, dataKey});
402416
});
403417
};
404418

‎sources/stylesheets/components/_block.scss

+33-18
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,27 @@
2626
> * {
2727
display: block;
2828

29-
&:after {
30-
content: attr(data-title);
31-
opacity: 0;
32-
transition: opacity .3s ease-in-out;
33-
padding: 8px;
34-
width: max-content;
35-
position: absolute;
36-
top: -32px;
37-
background: $black;
38-
color: $white;
39-
font-size: 12px;
40-
font-weight: $normal-weight;
41-
border-radius: 4px;
42-
font-family: var(--font-family);
43-
pointer-events: none;
44-
}
29+
&[data-title] {
30+
&:after {
31+
content: attr(data-title);
32+
opacity: 0;
33+
transition: opacity .3s ease-in-out;
34+
padding: 8px;
35+
width: max-content;
36+
position: absolute;
37+
top: -32px;
38+
background: $black;
39+
color: $white;
40+
font-size: 12px;
41+
font-weight: $normal-weight;
42+
border-radius: 4px;
43+
font-family: var(--font-family);
44+
pointer-events: none;
45+
}
4546

46-
&:hover:after {
47-
opacity: 1;
47+
&:hover:after {
48+
opacity: 1;
49+
}
4850
}
4951
}
5052

@@ -327,6 +329,12 @@
327329
right: 24px;
328330
}
329331

332+
.settings-button {
333+
position: absolute;
334+
bottom: 24px;
335+
right: 24px;
336+
}
337+
330338
.change-layout-options {
331339
position: absolute;
332340
left: 50%;
@@ -346,6 +354,13 @@
346354
}
347355
}
348356

357+
.settings-options {
358+
position: absolute;
359+
left: 50%;
360+
transform: translateX(-50%);
361+
top: 64px;
362+
}
363+
349364
@media (max-width: $desktop-width) {
350365
.block {
351366
&.split_40_60,

‎stylesheets/main.css

+17-4
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
.category-blocks:hover > .block-edit-buttons > * {
3030
display: block;
3131
}
32-
.block-wrapper:hover > .block-edit-buttons > *:after,
33-
.category-blocks:hover > .block-edit-buttons > *:after {
32+
.block-wrapper:hover > .block-edit-buttons > *[data-title]:after,
33+
.category-blocks:hover > .block-edit-buttons > *[data-title]:after {
3434
content: attr(data-title);
3535
opacity: 0;
3636
transition: opacity 0.3s ease-in-out;
@@ -47,8 +47,8 @@
4747
font-family: var(--font-family);
4848
pointer-events: none;
4949
}
50-
.block-wrapper:hover > .block-edit-buttons > *:hover:after,
51-
.category-blocks:hover > .block-edit-buttons > *:hover:after {
50+
.block-wrapper:hover > .block-edit-buttons > *[data-title]:hover:after,
51+
.category-blocks:hover > .block-edit-buttons > *[data-title]:hover:after {
5252
opacity: 1;
5353
}
5454
.block-wrapper:hover > .block-edit-buttons .up-button:after,
@@ -275,6 +275,12 @@
275275
right: 24px;
276276
}
277277

278+
.settings-button {
279+
position: absolute;
280+
bottom: 24px;
281+
right: 24px;
282+
}
283+
278284
.change-layout-options {
279285
position: absolute;
280286
left: 50%;
@@ -292,6 +298,13 @@
292298
opacity: 0.7;
293299
}
294300

301+
.settings-options {
302+
position: absolute;
303+
left: 50%;
304+
transform: translateX(-50%);
305+
top: 64px;
306+
}
307+
295308
@media (max-width: 1440px) {
296309
.block.split_40_60 .wrapper, .block.split_staggered .wrapper, .block.split_60_40 .wrapper {
297310
width: calc(100vw - 128px);

‎stylesheets/main.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)