@total_onion/onion-library 2.0.58 → 2.0.59
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.
- package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.twig +9 -17
- package/components/block-product-info-v3/product-info-v3/product-abv.twig +1 -1
- package/components/block-product-info-v3/product-info-v3/product-volume.twig +1 -1
- package/package.json +1 -1
- package/public/assetList.mjs +3 -0
- package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.css +62 -0
- package/public/block-responsive-table-v3/responsive-table-v3.css +48 -0
|
@@ -1,29 +1,21 @@
|
|
|
1
1
|
{% set blockId = block.id %}
|
|
2
2
|
{% set images = fields.images %}
|
|
3
|
-
{% set blockClassName = '
|
|
3
|
+
{% set blockClassName = 'featured-image-gallery-v3' %}
|
|
4
4
|
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} lazy" data-assetkey="{{blockClassName}}">
|
|
5
5
|
|
|
6
|
+
{% set image = get_image(images[0].image) %}
|
|
7
|
+
{% set srcset = gt_image_srcset(image) %}
|
|
8
|
+
{% set mainImageSrc = gt_image_mainsrc(image) %}
|
|
9
|
+
<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{image.alt}}">
|
|
6
10
|
|
|
7
|
-
{% if not cloudflare_config.use_cloudflare_images %}
|
|
8
|
-
<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{get_image(images[0].image).srcset}}" width="500" height="500" src="{{get_image(images[0]).src}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{get_image(images[0]).alt}}">
|
|
9
|
-
{% else %}
|
|
10
|
-
{% set image = get_image(images[0].image) %}
|
|
11
|
-
{% set srcset = gt_cf_srcset(image) %}
|
|
12
|
-
{% set mainImageSrc = gt_cf_mainsrc(image) %}
|
|
13
|
-
<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{image.alt}}">
|
|
14
|
-
{% endif %}
|
|
15
11
|
|
|
16
12
|
<div class="{{blockClassName}}__other-images">
|
|
17
13
|
{% for image in images %}
|
|
18
14
|
<div class="{{blockClassName}}__image-wrapper">
|
|
19
|
-
{%
|
|
20
|
-
|
|
21
|
-
{%
|
|
22
|
-
|
|
23
|
-
{% set srcset = gt_cf_srcset(image) %}
|
|
24
|
-
{% set mainImageSrc = gt_cf_mainsrc(image) %}
|
|
25
|
-
<img loading="lazy" class="{{blockClassName}}__image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 20vw, (min-width: 1024px) 20vw, 50vw " alt="{{image.alt}}">
|
|
26
|
-
{% endif %}
|
|
15
|
+
{% set image = get_image(image.image) %}
|
|
16
|
+
{% set srcset = gt_image_srcset(image) %}
|
|
17
|
+
{% set mainImageSrc = gt_image_mainsrc(image) %}
|
|
18
|
+
<img loading="lazy" class="{{blockClassName}}__image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 20vw, (min-width: 1024px) 20vw, 50vw " alt="{{image.alt}}">
|
|
27
19
|
</div>
|
|
28
20
|
{% endfor %}
|
|
29
21
|
</div>
|
|
@@ -10,5 +10,5 @@
|
|
|
10
10
|
}
|
|
11
11
|
</style>
|
|
12
12
|
<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
|
|
13
|
-
<{{elementType|default('p')}} data-pattern-post-info="abv" class="{{blockClassName}}__product-abv {{textEditorElementClasses}} {{block.id}}">{{post.product_abv}}</{{elementType|default('p')}}>
|
|
13
|
+
<{{elementType|default('p')}} data-pattern-post-info="abv" class="{{blockClassName}}__product-abv {{textEditorElementClasses}} {{block.id}}"><span class="{{blockClassName}}__product-abv--label">{{post.product_abv_label}}</span> {{post.product_abv}}</{{elementType|default('p')}}>
|
|
14
14
|
</div>
|
|
@@ -10,5 +10,5 @@
|
|
|
10
10
|
}
|
|
11
11
|
</style>
|
|
12
12
|
<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
|
|
13
|
-
<{{elementType|default('p')}} data-pattern-post-info="volume" class="{{blockClassName}}__product-volume {{textEditorElementClasses}} {{block.id}}">{{post.product_volume}}</{{elementType|default('p')}}>
|
|
13
|
+
<{{elementType|default('p')}} data-pattern-post-info="volume" class="{{blockClassName}}__product-volume {{textEditorElementClasses}} {{block.id}}"><span class="{{blockClassName}}__product-volume--label">{{post.product_volume_label}}</span> {{post.product_volume}}</{{elementType|default('p')}}>
|
|
14
14
|
</div>
|
package/package.json
CHANGED
package/public/assetList.mjs
CHANGED
|
@@ -27,5 +27,8 @@ const dynamicAssets = [
|
|
|
27
27
|
"./components/block-betterreviews-display-v3/betterreviews-display-v3.scss",
|
|
28
28
|
"./components/block-accordion-v3/accordion-v3.scss",
|
|
29
29
|
"./components/block-accent-image-v3/accent-image-v3.scss",
|
|
30
|
+
"./components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss",
|
|
31
|
+
"./components/block-responsive-table-v3/responsive-table-v3.scss",
|
|
32
|
+
"./components/block-product-info-v3/product-info-v3.scss",
|
|
30
33
|
];
|
|
31
34
|
export default dynamicAssets;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
.featured-image-gallery-v3 {
|
|
2
|
+
display: grid;
|
|
3
|
+
grid-template: "featured" "other"/1fr;
|
|
4
|
+
grid-gap: calc(var(--column-gap) / var(--design-reference) * var(--screen-width));
|
|
5
|
+
}
|
|
6
|
+
@media screen and (min-width: 768px) {
|
|
7
|
+
.featured-image-gallery-v3 {
|
|
8
|
+
grid-template: "featured other"/1fr 1fr;
|
|
9
|
+
grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
.featured-image-gallery-v3__featured-image {
|
|
13
|
+
grid-area: featured;
|
|
14
|
+
-o-object-fit: cover;
|
|
15
|
+
object-fit: cover;
|
|
16
|
+
aspect-ratio: 1;
|
|
17
|
+
}
|
|
18
|
+
@media screen and (min-width: 768px) {
|
|
19
|
+
.featured-image-gallery-v3__featured-image {
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: auto;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
.featured-image-gallery-v3__other-images {
|
|
25
|
+
grid-area: other;
|
|
26
|
+
align-self: stretch;
|
|
27
|
+
justify-self: stretch;
|
|
28
|
+
place-self: stretch;
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-gap: calc(8 / var(--design-reference) * var(--screen-width));
|
|
31
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
32
|
+
grid-template-rows: 1fr;
|
|
33
|
+
grid-auto-rows: 1fr;
|
|
34
|
+
}
|
|
35
|
+
@media screen and (min-width: 768px) {
|
|
36
|
+
.featured-image-gallery-v3__other-images {
|
|
37
|
+
grid-auto-rows: initial;
|
|
38
|
+
grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
|
|
39
|
+
grid-template-rows: 1fr 1fr 1fr;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
.featured-image-gallery-v3__image-wrapper {
|
|
43
|
+
display: flex;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
box-shadow: 0px 0px 8px transparent;
|
|
46
|
+
transition: box-shadow 0.2s;
|
|
47
|
+
}
|
|
48
|
+
.featured-image-gallery-v3__image-wrapper:hover {
|
|
49
|
+
box-shadow: 0px 0px 8px white;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
}
|
|
52
|
+
.featured-image-gallery-v3__image {
|
|
53
|
+
-o-object-fit: cover;
|
|
54
|
+
object-fit: cover;
|
|
55
|
+
aspect-ratio: 1;
|
|
56
|
+
width: 100%;
|
|
57
|
+
height: auto;
|
|
58
|
+
transition: transform 0.5s ease-out, filter 0.5s;
|
|
59
|
+
}
|
|
60
|
+
.featured-image-gallery-v3__image:hover {
|
|
61
|
+
filter: contrast(105%);
|
|
62
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
.responsive-table-v3__wrapper {
|
|
2
|
+
display: grid;
|
|
3
|
+
grid-auto-flow: column;
|
|
4
|
+
grid-gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
|
|
5
|
+
gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
|
|
6
|
+
overflow: auto;
|
|
7
|
+
}
|
|
8
|
+
.responsive-table-v3__headings {
|
|
9
|
+
display: grid;
|
|
10
|
+
grid-auto-flow: column;
|
|
11
|
+
grid-column: 1/var(--headings);
|
|
12
|
+
grid-template-columns: subgrid;
|
|
13
|
+
}
|
|
14
|
+
.responsive-table-v3__heading {
|
|
15
|
+
grid-row: 1;
|
|
16
|
+
background-color: var(--background-column-headers);
|
|
17
|
+
padding: calc(5 / var(--design-reference) * var(--screen-width));
|
|
18
|
+
}
|
|
19
|
+
@media screen and (min-width: 768px) {
|
|
20
|
+
.responsive-table-v3__heading {
|
|
21
|
+
padding: calc(5 / var(--design-reference) * var(--screen-width));
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
@media screen and (min-width: 1024px) {
|
|
25
|
+
.responsive-table-v3__heading {
|
|
26
|
+
padding: calc(5 / var(--design-reference) * var(--screen-width));
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
.responsive-table-v3__item {
|
|
30
|
+
display: grid;
|
|
31
|
+
grid-auto-flow: column;
|
|
32
|
+
grid-column: 1/var(--headings);
|
|
33
|
+
grid-template-columns: subgrid;
|
|
34
|
+
}
|
|
35
|
+
.responsive-table-v3__item-value {
|
|
36
|
+
background-color: var(--background-colour-items);
|
|
37
|
+
padding: calc(5 / var(--design-reference) * var(--screen-width));
|
|
38
|
+
}
|
|
39
|
+
@media screen and (min-width: 768px) {
|
|
40
|
+
.responsive-table-v3__item-value {
|
|
41
|
+
padding: calc(5 / var(--design-reference) * var(--screen-width));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
@media screen and (min-width: 1024px) {
|
|
45
|
+
.responsive-table-v3__item-value {
|
|
46
|
+
padding: calc(5 / var(--design-reference) * var(--screen-width));
|
|
47
|
+
}
|
|
48
|
+
}
|