Skip to content

Commit e3b43c4

Browse files
eliasmacielreliasmacielr
committed
Adjust styles
1 parent 8c2f343 commit e3b43c4

File tree

5 files changed

+94
-54
lines changed

5 files changed

+94
-54
lines changed

‎assets/base.css

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -77,49 +77,36 @@
7777

7878
/* base */
7979

80-
.page-width {
81-
padding: 0 1.5rem;
82-
}
83-
84-
@media (min-width: 640px) {
85-
.page-width {
86-
margin: 0 auto;
87-
padding: 0 1.5rem;
88-
max-width: 640px
89-
}
90-
91-
}
92-
93-
@media (min-width: 768px) {
94-
.page-width {
95-
margin: 0 auto;
96-
padding: 0 1.5rem;
97-
max-width: 768px
98-
}
80+
@media (min-width: 1024px) {
81+
.page-width {
82+
margin: 0 auto;
83+
padding: 0 1.5rem;
84+
max-width: 1024px;
85+
}
9986
}
10087

10188
@media (min-width: 1024px) {
102-
.page-width {
103-
margin: 0 auto;
104-
padding: 0 1.5rem;
105-
max-width: 1024px
106-
}
89+
.page-width {
90+
margin: 0 auto;
91+
padding: 0 1.5rem;
92+
max-width: 1024px;
93+
}
10794
}
10895

10996
@media (min-width: 1280px) {
110-
.page-width {
111-
margin: 0 auto;
112-
padding: 0 1.5rem;
113-
max-width:1280px
114-
}
97+
.page-width {
98+
margin: 0 auto;
99+
padding: 0 1.5rem;
100+
max-width: 1280px;
101+
}
115102
}
116103

117104
@media (min-width: 1536px) {
118-
.page-width {
119-
margin: 0 auto;
120-
padding: 0 1.5rem;
121-
max-width:1536px
122-
}
105+
.page-width {
106+
margin: 0 auto;
107+
padding: 0 1.5rem;
108+
max-width: 1536px;
109+
}
123110
}
124111

125112
body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {

‎assets/component-collection-tree.css

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,52 @@
1+
.collection-tree__title {
2+
margin-bottom: 1rem;
3+
font-size: 3rem;
4+
}
5+
16
.collection-tree__parent {
27
display: flex;
38
flex-direction: row;
49
flex-wrap: wrap;
510
align-items: flex-start;
611
justify-content: center;
12+
padding-top: 1rem;
713
}
814

915
.collection-tree__child {
1016
display: flex;
1117
flex-direction: column;
1218
padding: 0.5rem;
1319
align-items: center;
14-
text-align: center;
1520
}
1621

1722
.collection-tree__child img {
1823
border: 1px solid #bfbfbf;
1924
border-radius: 0.25rem;
2025
}
2126

27+
.collection-tree__child {
28+
width: 50%;
29+
}
30+
31+
@media (min-width: 768px) {
32+
.collection-tree__child {
33+
width: 25%;
34+
}
35+
}
36+
2237
@media (min-width: 1024px) {
2338
.collection-tree__child {
2439
width: 16.666667%;
2540
}
2641
}
42+
43+
.subcollection__title {
44+
margin-bottom: 0;
45+
}
46+
47+
.collection-tree__grandchildren {
48+
display: flex;
49+
flex-direction: column;
50+
align-items: center;
51+
color: var(--link-primary-color);
52+
}

‎locales/en.default.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,8 @@
333333
"collection_template": {
334334
"empty": "No products found",
335335
"title": "Collection",
336-
"use_fewer_filters_html": "Use fewer filters or <a class=\"{{ class }}\" href=\"{{ link }}\">remove all</a>"
336+
"use_fewer_filters_html": "Use fewer filters or <a class=\"{{ class }}\" href=\"{{ link }}\">remove all</a>",
337+
"shop_upgrades_by_category": "Shop {{ collection_title }} upgrades by Category",
337338
},
338339
"video": {
339340
"load_video": "Load video: {{ description }}"

‎locales/en.default.schema.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1785,6 +1785,9 @@
17851785
},
17861786
"show_collection_image": {
17871787
"label": "Image"
1788+
},
1789+
"link_primary_color": {
1790+
"label": "Link color",
17881791
}
17891792
}
17901793
},

‎sections/main-collection-tree.liquid

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,18 @@
1414
{%- assign nodes = collection_tree_value.nodes -%}
1515
{%- assign collection_id = collection.id | append: '' -%}
1616

17+
{%- if collection_tree_value.parentChildren[collection_id] -%}
18+
<h3 class="collection-tree__title center">
19+
{{ 'sections.collection_template.shop_upgrades_by_category' | t: collection_title: collection.title }}
20+
</h3>
21+
{%- endif -%}
22+
1723
<div class="collection-tree__parent">
1824
{% assign subcollections_ids = collection_tree_value.parentChildren[collection_id] %}
1925
{%- for id in subcollections_ids -%}
2026
{%- assign subcollection_id = id | append: '' -%}
2127
{%- assign subcollection = nodes[subcollection_id] -%}
22-
<div class="collection-tree__child">
28+
<div class="collection-tree__child center">
2329
{%- if subcollection.i -%}
2430
<img
2531
src="{{ subcollection.i }}"
@@ -28,9 +34,36 @@
2834
width="120"
2935
height="120"
3036
>
31-
{% endif %}
32-
<p>{{ subcollection.t }}</p>
33-
<a href="{{ routes.collections_url }}/{{ collection.handle }}/{{ subcollection.h }}">{{ subcollection.t }}</a>
37+
{%- endif -%}
38+
{%- unless collection_tree_value.parentChildren[subcollection_id] -%}
39+
<a
40+
href="{{ routes.collections_url }}/{{ collection.handle }}/{{ subcollection.h }}"
41+
class="full-unstyled-link font-body-bold"
42+
>
43+
{{- subcollection.t -}}
44+
</a>
45+
{%- else -%}
46+
<p class="subcollection__title font-body-bold">{{ subcollection.t }}</p>
47+
<div
48+
class="collection-tree__grandchildren center"
49+
style="--link-primary-color: {{ section.settings.link_primary_color }}"
50+
>
51+
{%- for child_id in collection_tree_value.parentChildren[subcollection_id] limit: 5 -%}
52+
{%- assign child_collection = nodes[child_id] -%}
53+
<a
54+
href="{{ routes.collections_url }}/{{ collection.handle }}/{{ subcollection.h }}/{{ child_collection.h }}"
55+
class="full-unstyled-link"
56+
>
57+
{{- child_collection.t -}}
58+
</a>
59+
{%- endfor -%}
60+
</div>
61+
<a
62+
href="{{ routes.collections_url }}/{{ collection.handle }}/{{ subcollection.h }}"
63+
class="full-unstyled-link font-body-bold"
64+
>Shop All</a
65+
>
66+
{%- endunless -%}
3467
{% comment %} {{ collection_tree_value.parentChildren[subcollection_id] }} {% endcomment %}
3568
</div>
3669
{%- endfor -%}
@@ -43,20 +76,10 @@
4376
"class": "section",
4477
"settings": [
4578
{
46-
"type": "paragraph",
47-
"content": "t:sections.main-collection-tree.settings.paragraph.content"
48-
},
49-
{
50-
"type": "checkbox",
51-
"id": "show_collection_description",
52-
"default": true,
53-
"label": "t:sections.main-collection-tree.settings.show_collection_description.label"
54-
},
55-
{
56-
"type": "checkbox",
57-
"id": "show_collection_image",
58-
"default": false,
59-
"label": "t:sections.main-collection-tree.settings.show_collection_image.label"
79+
"type": "color",
80+
"id": "link_primary_color",
81+
"label": "t:sections.main-collection-tree.settings.link_primary_color.label",
82+
"default": "#000"
6083
}
6184
]
6285
}

0 commit comments

Comments
 (0)