Skip to content

Commit 0ab0169

Browse files
devJZendevJZen
committed
style: change layout
- tags to grid - archive segments
1 parent f2e1d68 commit 0ab0169

File tree

5 files changed

+250
-13
lines changed

5 files changed

+250
-13
lines changed

‎_includes/sidebar/archive-list.html‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,31 @@
11
{%- include functions.html func='log' level='debug' msg='Get datetimes value' -%}
22

3-
{% assign filter = '%Y' %}
3+
{% assign filter = '%Y-%m' %}
44
{% include functions.html func='get_datetimes' %}
55
{% assign datetimes = return %}
66

7-
{% assign keys = datetimes %}
8-
{% assign field = 'date' %}
9-
{% assign url = '/archives.html' | relative_url %}
10-
{% include sidebar/common-list.html %}
7+
<div class="common-list">
8+
<ul>
9+
<li>
10+
<a href="{{ '/index.html' | relative_url }}">
11+
All<span>{{ site.posts.size }}</span>
12+
</a>
13+
</li>
14+
15+
{% for key in datetimes %}
16+
{% assign post_count = 0 %}
17+
{% for post in site.posts %}
18+
{% assign post_date = post.date | date: filter %}
19+
{% if post_date == key %}
20+
{% assign post_count = post_count | plus: 1 %}
21+
{% endif %}
22+
{% endfor %}
23+
24+
<li>
25+
<a href="{{ '/archives.html' | relative_url }}#{{ key }}">
26+
{{ key }} <span>{{ post_count }}</span>
27+
</a>
28+
</li>
29+
{% endfor %}
30+
</ul>
31+
</div>

‎_includes/views/segments.html‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,45 @@
99
<div class="page-segments">
1010
<ul class="page-segments-list">
1111
{% for key in keys %}
12-
<h2 id="{{ key }}" class="segment-name">{{ key }}</h2>
13-
{% assign items = site.posts | where: field, key %}
14-
{% for item in items %}
15-
{% if item != nil %}
16-
<li> {% include views/post-item.html %} </li>
12+
{% assign post_count = 0 %}
13+
{% for post in site.posts %}
14+
{% assign post_date = post.date | date: filter %}
15+
{% if post_date == key %}
16+
{% assign post_count = post_count | plus: 1 %}
1717
{% endif %}
1818
{% endfor %}
19+
20+
<h2 id="{{ key }}" class="segment-name">
21+
{{ key }} ({{ post_count }})
22+
{% if post_count > 5 %}
23+
<span class="segment-toggle" onclick="toggleSegment('{{ key }}')">►</span>
24+
{% endif %}
25+
</h2>
26+
27+
<div class="segment-items" id="segment-{{ key }}" {% if post_count > 5 %}style="display: none;"{% endif %}>
28+
{% for post in site.posts %}
29+
{% assign post_date = post.date | date: filter %}
30+
{% if post_date == key %}
31+
{% assign item = post %}
32+
<li> {% include views/post-item.html %} </li>
33+
{% endif %}
34+
{% endfor %}
35+
</div>
1936
{% endfor %}
2037
</ul>
21-
</div>
38+
</div>
39+
40+
<script>
41+
function toggleSegment(key) {
42+
const segment = document.getElementById('segment-' + key);
43+
const toggle = event.target;
44+
45+
if (segment.style.display === 'none') {
46+
segment.style.display = 'block';
47+
toggle.textContent = '▼';
48+
} else {
49+
segment.style.display = 'none';
50+
toggle.textContent = '►';
51+
}
52+
}
53+
</script>

‎_includes/views/tags-grid.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{%- if include.keys -%}
2+
{%- assign keys = include.keys -%}
3+
{%- endif -%}
4+
5+
<div class="tags-grid-container">
6+
<!-- Tags Grid -->
7+
<div class="tags-grid">
8+
{% for tag in keys %}
9+
{% assign post_count = site.tags[tag] | size %}
10+
<div class="tag-item" onclick="showTagPosts('{{ tag | slugify }}')">
11+
<span class="tag-name">{{ tag }}</span>
12+
<span class="tag-count">({{ post_count }})</span>
13+
</div>
14+
{% endfor %}
15+
</div>
16+
17+
<!-- Tag Posts Section -->
18+
<div class="tag-posts-container">
19+
{% for tag in keys %}
20+
{% assign tag_posts = site.tags[tag] %}
21+
{% assign post_count = tag_posts | size %}
22+
23+
<div class="tag-posts-section" id="tag-{{ tag | slugify }}" style="display: none;">
24+
<h2 class="tag-section-title">
25+
{{ tag }} ({{ post_count }})
26+
<span class="close-tag" onclick="closeTagPosts()">✕</span>
27+
</h2>
28+
<ul class="tag-posts-list">
29+
{% for post in tag_posts %}
30+
<li>{% assign item = post %}{% include views/post-item.html %}</li>
31+
{% endfor %}
32+
</ul>
33+
</div>
34+
{% endfor %}
35+
</div>
36+
</div>
37+
38+
<script>
39+
let currentOpenTag = null;
40+
41+
function showTagPosts(tagSlug) {
42+
const tagSection = document.getElementById('tag-' + tagSlug);
43+
const container = document.querySelector('.tag-posts-container');
44+
45+
// Close previously open tag
46+
if (currentOpenTag && currentOpenTag !== tagSlug) {
47+
document.getElementById('tag-' + currentOpenTag).style.display = 'none';
48+
}
49+
50+
// Toggle current tag
51+
if (tagSection.style.display === 'none') {
52+
tagSection.style.display = 'block';
53+
container.style.display = 'block';
54+
currentOpenTag = tagSlug;
55+
56+
// Scroll to the tag section
57+
tagSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
58+
} else {
59+
tagSection.style.display = 'none';
60+
if (!document.querySelector('.tag-posts-section[style*="display: block"]')) {
61+
container.style.display = 'none';
62+
}
63+
currentOpenTag = null;
64+
}
65+
}
66+
67+
function closeTagPosts() {
68+
if (currentOpenTag) {
69+
document.getElementById('tag-' + currentOpenTag).style.display = 'none';
70+
currentOpenTag = null;
71+
72+
const container = document.querySelector('.tag-posts-container');
73+
if (!document.querySelector('.tag-posts-section[style*="display: block"]')) {
74+
container.style.display = 'none';
75+
}
76+
}
77+
}
78+
</script>

‎_layouts/tags.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
{% assign tags = return %}
1111

1212
{% assign keys = tags %}
13-
{% assign field = 'tags' %}
14-
{%- include views/segments.html -%}
13+
{%- include views/tags-grid.html -%}
1514

1615
{%- endif -%}

‎_sass/yat/_layout.scss‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -653,6 +653,25 @@ input:checked + .slider:before {
653653
}
654654
}
655655

656+
.segment-toggle {
657+
margin-left: 8px;
658+
cursor: pointer;
659+
font-size: 0.8em;
660+
color: $grey-color;
661+
transition: transform 0.3s ease;
662+
display: inline-block;
663+
user-select: none;
664+
665+
&:hover {
666+
color: $brand-color;
667+
}
668+
}
669+
670+
.segment-items {
671+
transition: max-height 0.3s ease;
672+
overflow: hidden;
673+
}
674+
656675
.post-meta {
657676
font-size: $small-font-size;
658677
color: $grey-color;
@@ -688,6 +707,94 @@ input:checked + .slider:before {
688707
}
689708
}
690709

710+
/**
711+
* Tags grid
712+
*/
713+
.tags-grid-container {
714+
.tags-grid {
715+
display: grid;
716+
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
717+
gap: 12px;
718+
margin-bottom: 32px;
719+
}
720+
721+
.tag-item {
722+
background-color: $background-color;
723+
border: 1px solid $grey-color-light;
724+
border-radius: 6px;
725+
padding: 12px 16px;
726+
cursor: pointer;
727+
transition: all 0.2s ease;
728+
text-align: center;
729+
display: flex;
730+
flex-direction: column;
731+
align-items: center;
732+
gap: 4px;
733+
734+
&:hover {
735+
background-color: $brand-color;
736+
color: #fff;
737+
border-color: $brand-color;
738+
transform: translateY(-2px);
739+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
740+
741+
.tag-count {
742+
color: rgba(255, 255, 255, 0.9);
743+
}
744+
}
745+
746+
.tag-name {
747+
font-weight: $base-font-weight * 1.2;
748+
font-size: $base-font-size;
749+
}
750+
751+
.tag-count {
752+
font-size: $small-font-size;
753+
color: $grey-color;
754+
}
755+
}
756+
757+
.tag-posts-container {
758+
margin-top: 32px;
759+
display: none;
760+
}
761+
762+
.tag-posts-section {
763+
margin-bottom: 32px;
764+
765+
.tag-section-title {
766+
font-weight: $base-font-weight * 1.5;
767+
margin-bottom: 16px;
768+
position: relative;
769+
display: flex;
770+
justify-content: space-between;
771+
align-items: center;
772+
773+
@include relative-font-size(1.6);
774+
775+
.close-tag {
776+
cursor: pointer;
777+
font-size: 1.2rem;
778+
color: $grey-color;
779+
transition: color 0.2s ease;
780+
781+
&:hover {
782+
color: $brand-color;
783+
}
784+
}
785+
}
786+
787+
.tag-posts-list {
788+
list-style: none;
789+
margin-left: 0;
790+
791+
li {
792+
margin-bottom: 8px;
793+
}
794+
}
795+
}
796+
}
797+
691798
.left-vsplit:before {
692799
content: "";
693800
display: inline-block;

0 commit comments

Comments
 (0)