diff options
author | Volpeon <git@volpeon.ink> | 2022-08-23 14:07:20 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-08-23 14:07:20 +0200 |
commit | 7c655a95058aa753355251eb78b83d31d44972ab (patch) | |
tree | 9024a3d991727d1f10f99d62497bdd5228e01640 /templates/partials | |
parent | Update (diff) | |
download | volpeon.ink-7c655a95058aa753355251eb78b83d31d44972ab.tar.gz volpeon.ink-7c655a95058aa753355251eb78b83d31d44972ab.tar.bz2 volpeon.ink-7c655a95058aa753355251eb78b83d31d44972ab.zip |
Better navigation of related content
Diffstat (limited to 'templates/partials')
-rw-r--r-- | templates/partials/gallery_card.html | 52 | ||||
-rw-r--r-- | templates/partials/grid_card.html | 76 | ||||
-rw-r--r-- | templates/partials/list_card.html | 16 | ||||
-rw-r--r-- | templates/partials/related.html | 17 |
4 files changed, 79 insertions, 82 deletions
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html index 38daa0e..6802faa 100644 --- a/templates/partials/gallery_card.html +++ b/templates/partials/gallery_card.html | |||
@@ -19,30 +19,47 @@ | |||
19 | /> | 19 | /> |
20 | </div> | 20 | </div> |
21 | </div> | 21 | </div> |
22 | |||
22 | <div class="c-card__row l-media c-card__row--hidden"> | 23 | <div class="c-card__row l-media c-card__row--hidden"> |
23 | $if(it.indicator)$ | 24 | $if(it.indicator)$ |
24 | <div class="c-card__indicator l-media__block"></div> | 25 | <div class="c-card__indicator l-media__block"></div> |
25 | $endif$ | 26 | $endif$ |
26 | $if(it.icon)$ | 27 | $if(it.is_prev)$ |
28 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | ||
29 | <use href="$assets.icons_svg$#arrow-left"></use> | ||
30 | </svg> | ||
31 | $elseif(it.is_next)$ | ||
32 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | ||
33 | <use href="$assets.icons_svg$#blank"></use> | ||
34 | </svg> | ||
35 | $elseif(it.icon)$ | ||
27 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | 36 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> |
28 | <use href="$assets.icons_svg$#$it.icon$"></use> | 37 | <use href="$assets.icons_svg$#$it.icon$"></use> |
29 | </svg> | 38 | </svg> |
30 | $endif$ | 39 | $endif$ |
31 | <div class="l-media__block l-media__block--main"> | 40 | <div class="l-media__block l-media__block--main"> |
32 | $if(it.subtitle)$ | 41 | $if(it.is_prev)$ |
42 | <small class="u-d-block">Previous</small> | ||
43 | <div> | ||
44 | <strong class="p-name" itemprop="name headline">$it.title$</strong> | ||
45 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ | ||
46 | </div> | ||
47 | $elseif(it.is_next)$ | ||
48 | <small class="u-d-block">Next</small> | ||
49 | <div> | ||
50 | <strong class="p-name" itemprop="name headline">$it.title$</strong> | ||
51 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ | ||
52 | </div> | ||
53 | $elseif(it.subtitle)$ | ||
33 | <div> | 54 | <div> |
34 | <strong class="p-name" itemprop="name headline">$it.title$</strong> | 55 | <strong class="p-name" itemprop="name headline">$it.title$</strong> |
35 | $if(it.draft)$ | 56 | $if(it.draft)$ |
36 | <span class="o-badge u-ml-100">Draft</span> | 57 | <span class="o-badge u-ml-100">Draft</span> |
37 | $endif$ | 58 | $endif$ |
38 | </div> | 59 | </div> |
39 | <small class="u-d-block"> | 60 | <small class="u-d-block">$it.subtitle$</small> |
40 | $it.subtitle$ | ||
41 | </small> | ||
42 | $elseif(it.category)$ | 61 | $elseif(it.category)$ |
43 | <small class="u-d-block"> | 62 | <small class="u-d-block">$it.category$</small> |
44 | $it.category$ | ||
45 | </small> | ||
46 | <div> | 63 | <div> |
47 | <strong class="p-name" itemprop="name headline"> | 64 | <strong class="p-name" itemprop="name headline"> |
48 | $it.title$ | 65 | $it.title$ |
@@ -59,20 +76,19 @@ | |||
59 | </small> | 76 | </small> |
60 | <div> | 77 | <div> |
61 | <strong class="p-name" itemprop="name headline">$it.title$</strong> | 78 | <strong class="p-name" itemprop="name headline">$it.title$</strong> |
62 | $if(it.draft)$ | 79 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ |
63 | <span class="o-badge u-ml-100">Draft</span> | ||
64 | $endif$ | ||
65 | </div> | 80 | </div> |
66 | $else$ | 81 | $else$ |
67 | <span class="p-name" itemprop="name headline"> | 82 | <span class="p-name" itemprop="name headline">$it.title$</span> |
68 | $it.title$ | 83 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ |
69 | </span> | ||
70 | $if(it.draft)$ | ||
71 | <span class="o-badge u-ml-100">Draft</span> | ||
72 | $endif$ | ||
73 | $endif$ | 84 | $endif$ |
74 | </div> | 85 | </div> |
75 | $if(it.post_icon)$ | 86 | $if(it.is_next)$ |
87 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | ||
88 | <use href="$assets.icons_svg$#arrow-right"></use> | ||
89 | </svg> | ||
90 | $elseif(it.is_prev)$ | ||
91 | $elseif(it.post_icon)$ | ||
76 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | 92 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> |
77 | <use href="$assets.icons_svg$#$it.post_icon$"></use> | 93 | <use href="$assets.icons_svg$#$it.post_icon$"></use> |
78 | </svg> | 94 | </svg> |
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html index 9a0b06e..e75fa51 100644 --- a/templates/partials/grid_card.html +++ b/templates/partials/grid_card.html | |||
@@ -9,38 +9,45 @@ | |||
9 | $endif$ | 9 | $endif$ |
10 | > | 10 | > |
11 | <div class="c-card__row l-media"> | 11 | <div class="c-card__row l-media"> |
12 | $if(it.indicator)$ | 12 | $if(it.is_prev)$ |
13 | <div class="c-card__indicator l-media__block"></div> | 13 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> |
14 | $endif$ | 14 | <use href="$assets.icons_svg$#arrow-left"></use> |
15 | $if(it.icon)$ | 15 | </svg> |
16 | $elseif(it.is_next)$ | ||
17 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | ||
18 | <use href="$assets.icons_svg$#blank"></use> | ||
19 | </svg> | ||
20 | $elseif(it.icon)$ | ||
16 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | 21 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> |
17 | <use href="$assets.icons_svg$#$it.icon$"></use> | 22 | <use href="$assets.icons_svg$#$it.icon$"></use> |
18 | </svg> | 23 | </svg> |
24 | $elseif(it.indicator)$ | ||
25 | <div class="c-card__indicator l-media__block"></div> | ||
19 | $endif$ | 26 | $endif$ |
20 | <div class="l-media__block l-media__block--main"> | 27 | <div class="l-media__block l-media__block--main"> |
21 | $if(it.subtitle)$ | 28 | $if(it.is_prev)$ |
29 | <small class="u-d-block">Previous</small> | ||
22 | <div> | 30 | <div> |
23 | <strong class="p-name" itemprop="name headline"> | 31 | <strong class="p-name" itemprop="name headline">$it.title$</strong> |
24 | $it.title$ | 32 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ |
25 | </strong> | ||
26 | $if(it.draft)$ | ||
27 | <span class="o-badge u-ml-100">Draft</span> | ||
28 | $endif$ | ||
29 | </div> | 33 | </div> |
30 | <small class="u-d-block"> | 34 | $elseif(it.is_next)$ |
31 | $it.subtitle$ | 35 | <small class="u-d-block">Next</small> |
32 | </small> | 36 | <div> |
37 | <strong class="p-name" itemprop="name headline">$it.title$</strong> | ||
38 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ | ||
39 | </div> | ||
40 | $elseif(it.subtitle)$ | ||
41 | <div> | ||
42 | <strong class="p-name" itemprop="name headline">$it.title$</strong> | ||
43 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ | ||
44 | </div> | ||
45 | <small class="u-d-block">$it.subtitle$</small> | ||
33 | $elseif(it.category)$ | 46 | $elseif(it.category)$ |
34 | <small class="u-d-block"> | 47 | <small class="u-d-block">$it.category$</small> |
35 | $it.category$ | ||
36 | </small> | ||
37 | <div> | 48 | <div> |
38 | <strong class="p-name" itemprop="name headline"> | 49 | <strong class="p-name" itemprop="name headline">$it.title$</strong> |
39 | $it.title$ | 50 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ |
40 | </strong> | ||
41 | $if(it.draft)$ | ||
42 | <span class="o-badge u-ml-100">Draft</span> | ||
43 | $endif$ | ||
44 | </div> | 51 | </div> |
45 | $elseif(it.show_date)$ | 52 | $elseif(it.show_date)$ |
46 | <small class="u-d-block"> | 53 | <small class="u-d-block"> |
@@ -49,23 +56,20 @@ | |||
49 | </time> | 56 | </time> |
50 | </small> | 57 | </small> |
51 | <div> | 58 | <div> |
52 | <strong class="p-name" itemprop="name headline"> | 59 | <strong class="p-name" itemprop="name headline">$it.title$</strong> |
53 | $it.title$ | 60 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ |
54 | </strong> | ||
55 | $if(it.draft)$ | ||
56 | <span class="o-badge u-ml-100">Draft</span> | ||
57 | $endif$ | ||
58 | </div> | 61 | </div> |
59 | $else$ | 62 | $else$ |
60 | <span class="p-name" itemprop="name headline"> | 63 | <span class="p-name" itemprop="name headline">$it.title$</span> |
61 | $it.title$ | 64 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ |
62 | </span> | ||
63 | $if(it.draft)$ | ||
64 | <span class="o-badge u-ml-100">Draft</span> | ||
65 | $endif$ | ||
66 | $endif$ | 65 | $endif$ |
67 | </div> | 66 | </div> |
68 | $if(it.post_icon)$ | 67 | $if(it.is_next)$ |
68 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | ||
69 | <use href="$assets.icons_svg$#arrow-right"></use> | ||
70 | </svg> | ||
71 | $elseif(it.is_prev)$ | ||
72 | $elseif(it.post_icon)$ | ||
69 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> | 73 | <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> |
70 | <use href="$assets.icons_svg$#$it.post_icon$"></use> | 74 | <use href="$assets.icons_svg$#$it.post_icon$"></use> |
71 | </svg> | 75 | </svg> |
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html index e12f62f..713919a 100644 --- a/templates/partials/list_card.html +++ b/templates/partials/list_card.html | |||
@@ -18,21 +18,13 @@ | |||
18 | </svg> | 18 | </svg> |
19 | $endif$ | 19 | $endif$ |
20 | <div class="l-media__block l-media__block--main"> | 20 | <div class="l-media__block l-media__block--main"> |
21 | <span class="p-name" itemprop="name headline"> | 21 | <span class="p-name" itemprop="name headline">$it.title$</span> |
22 | $it.title$ | 22 | $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$ |
23 | </span> | ||
24 | $if(it.draft)$ | ||
25 | <span class="o-badge u-ml-100">Draft</span> | ||
26 | $endif$ | ||
27 | </div> | 23 | </div> |
28 | $if(it.subtitle)$ | 24 | $if(it.subtitle)$ |
29 | <small class="l-media__block u-d-none@sm-lo"> | 25 | <small class="l-media__block u-d-none@sm-lo">$it.subtitle$</small> |
30 | $it.subtitle$ | ||
31 | </small> | ||
32 | $elseif(it.category)$ | 26 | $elseif(it.category)$ |
33 | <small class="l-media__block u-d-none@sm-lo"> | 27 | <small class="l-media__block u-d-none@sm-lo">$it.category$</small> |
34 | $it.category$ | ||
35 | </small> | ||
36 | $elseif(it.show_date)$ | 28 | $elseif(it.show_date)$ |
37 | <small class="l-media__block u-d-none@sm-lo"> | 29 | <small class="l-media__block u-d-none@sm-lo"> |
38 | <time datetime="$it.last_update.yyyy_mm_dd$" class="dt-updated" itemprop="dateModified"> | 30 | <time datetime="$it.last_update.yyyy_mm_dd$" class="dt-updated" itemprop="dateModified"> |
diff --git a/templates/partials/related.html b/templates/partials/related.html index 7d29c7a..3097866 100644 --- a/templates/partials/related.html +++ b/templates/partials/related.html | |||
@@ -16,24 +16,9 @@ $if(related)$ | |||
16 | $if(related.layout.is_grid-2)$ | 16 | $if(related.layout.is_grid-2)$ |
17 | $related.prev:partials/grid_card()$ | 17 | $related.prev:partials/grid_card()$ |
18 | $related.next:partials/grid_card()$ | 18 | $related.next:partials/grid_card()$ |
19 | $elseif(related.layout.is_grid-3)$ | 19 | $else$ |
20 | $related.prev:partials/grid_card()$ | ||
21 | $related.next:partials/grid_card()$ | ||
22 | $elseif(related.layout.is_gallery-2)$ | ||
23 | $related.prev:partials/gallery_card()$ | ||
24 | $related.next:partials/gallery_card()$ | ||
25 | $elseif(related.layout.is_gallery-3)$ | ||
26 | $related.prev:partials/gallery_card()$ | 20 | $related.prev:partials/gallery_card()$ |
27 | $related.next:partials/gallery_card()$ | 21 | $related.next:partials/gallery_card()$ |
28 | $else$ | ||
29 | <div class="u-d-contents u-d-none@sm-lo"> | ||
30 | $related.prev:partials/list_card()$ | ||
31 | $related.next:partials/list_card()$ | ||
32 | </div> | ||
33 | <div class="u-d-contents u-d-none@sm-hi"> | ||
34 | $related.prev:partials/grid_card()$ | ||
35 | $related.next:partials/grid_card()$ | ||
36 | </div> | ||
37 | $endif$ | 22 | $endif$ |
38 | </div> | 23 | </div> |
39 | </div> | 24 | </div> |