feat(list): add subsection support (#81)

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/48
This commit is contained in:
Jimmy Cai 2020-12-22 21:14:50 +01:00 committed by GitHub
parent e606dca404
commit 7d841cf237
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 93 additions and 77 deletions

View File

@ -1,31 +1,3 @@
.archives-group { .archives-group {
margin-bottom: var(--section-separation); margin-bottom: var(--section-separation);
} }
.template-archives {
.category-list {
margin-bottom: var(--section-separation);
overflow-x: auto;
.article-list--tile {
display: flex;
padding-bottom: 15px;
article {
width: 250px;
height: 150px;
margin-right: 20px;
flex-shrink: 0;
.article-title {
margin: 0;
font-size: 1.8rem;
}
.article-details {
padding: 20px;
}
}
}
}
}

View File

@ -1,4 +1,4 @@
.taxonomy-card { .section-card {
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
background-color: var(--card-background); background-color: var(--card-background);
padding: var(--small-card-padding); padding: var(--small-card-padding);
@ -9,37 +9,37 @@
--separation: 15px; --separation: 15px;
.taxonomy-term { .section-term {
font-size: 2.2rem; font-size: 2.2rem;
margin: 0; margin: 0;
margin-top: calc(var(--separation) / 2); margin-top: calc(var(--separation) / 2);
color: var(--card-text-color-main); color: var(--card-text-color-main);
& + .taxonomy-description { & + .section-description {
margin-top: var(--separation); margin-top: var(--separation);
} }
} }
.taxonomy-description { .section-description {
font-weight: normal; font-weight: normal;
color: var(--card-text-color-secondary); color: var(--card-text-color-secondary);
font-size: 1.6rem; font-size: 1.6rem;
margin: 0; margin: 0;
} }
.taxonomy-details { .section-details {
flex-grow: 1; flex-grow: 1;
margin-right: 20px; margin-right: 20px;
} }
.taxonomy-image { .section-image {
img { img {
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
} }
.taxonomy-count { .section-count {
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
font-size: 1.4rem; font-size: 1.4rem;
margin: 0; margin: 0;
@ -47,3 +47,29 @@
text-transform: uppercase; text-transform: uppercase;
} }
} }
.subsection-list {
margin-bottom: var(--section-separation);
overflow-x: auto;
.article-list--tile {
display: flex;
padding-bottom: 15px;
article {
width: 250px;
height: 150px;
margin-right: 20px;
flex-shrink: 0;
.article-title {
margin: 0;
font-size: 1.8rem;
}
.article-details {
padding: 20px;
}
}
}
}

View File

@ -21,7 +21,7 @@
@import "partials/base.scss"; @import "partials/base.scss";
@import "partials/layout/archives.scss"; @import "partials/layout/archives.scss";
@import "partials/layout/article.scss"; @import "partials/layout/article.scss";
@import "partials/layout/taxonomy.scss"; @import "partials/layout/list.scss";
@import "partials/layout/404.scss"; @import "partials/layout/404.scss";
@import "partials/layout/search.scss"; @import "partials/layout/search.scss";

View File

@ -1,6 +1,18 @@
toggleMenu: toggleMenu:
other: Toggle Menu other: Toggle Menu
list:
page:
one: "{{ .Count }} page"
other: "{{ .Count }} pages"
section:
other: Section
subsection:
one: Subsection
other: Subsections
archives: archives:
categories: categories:
other: Categories other: Categories

View File

@ -3,7 +3,7 @@
{{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }} {{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
{{ if $categories }} {{ if $categories }}
<h2 class="section-title">{{ T "archives.categories" }}</h2> <h2 class="section-title">{{ T "archives.categories" }}</h2>
<div class="category-list"> <div class="subsection-list">
<div class="article-list--tile"> <div class="article-list--tile">
{{ range $categories }} {{ range $categories }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }} {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}

View File

@ -1,8 +1,51 @@
{{ define "main" }} {{ define "main" }}
<h3 class="section-title">{{ .Title }}</h3> <h3 class="section-title">
{{ if eq .Parent (.GetPage "/") }}
{{ T "list.section" }}
{{ else }}
{{ .Parent.Title }}
{{ end }}
</h3>
<div class="section-card">
<div class="section-details">
<h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
<h1 class="section-term">{{ .Title }}</h1>
{{ with .Params.description }}
<h2 class="section-description">{{ . }}</h2>
{{ end }}
</div>
{{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
{{ if $image.exists }}
<div class="section-image">
{{ if $image.resource }}
{{- $thumbnail := $image.resource.Fill "120x120" -}}
<img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
height="{{ $thumbnail.Height }}" loading="lazy">
{{ else }}
<img src="{{ $image.permalink }}" loading="lazy">
{{ end }}
</div>
{{ end }}
</div>
{{ $subsections := .Sections }}
{{ with $subsections }}
<h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
<div class="subsection-list">
<div class="article-list--tile">
{{ range . }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
{{ end }}
</div>
</div>
{{ end }}
{{/* List only pages that are not a subsection */}}
{{ $paginator := .Paginate (.Pages | complement $subsections) }}
<section class="article-list--compact"> <section class="article-list--compact">
{{ range .Paginator.Pages }} {{ range $paginator.Pages }}
{{ partial "article-list/compact" . }} {{ partial "article-list/compact" . }}
{{ end }} {{ end }}
</section> </section>

View File

@ -1,37 +0,0 @@
{{ define "main" }}
<h3 class="taxonomy-type section-title">{{ .Type | singularize | humanize }}</h3>
<div class="taxonomy-card">
<div class="taxonomy-details">
<h3 class="taxonomy-count">{{ len .Pages }} post{{ if gt (len .Pages) 1 }}s{{ end }}</h3>
<h1 class="taxonomy-term">{{ .Title }}</h1>
{{ with .Params.description }}
<h2 class="taxonomy-description">{{ . }}</h2>
{{ end }}
</div>
{{- $image := partialCached "helper/image" (dict "Context" . "Type" "taxonomy") .RelPermalink "taxonomy" -}}
{{ if $image.exists }}
<div class="taxonomy-image">
{{ if $image.resource }}
{{- $thumbnail := $image.resource.Fill "120x120" -}}
<img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
height="{{ $thumbnail.Height }}" loading="lazy">
{{ else }}
<img src="{{ $image.permalink }}" loading="lazy">
{{ end }}
</div>
{{ end }}
</div>
<section class="article-list--compact">
{{ $v2 := where .Pages "Params.hidden" "!=" true }}
{{ $pag := .Paginate (.Pages) }}
{{ range $pag.Pages }}
{{ partial "article-list/compact" . }}
{{ end }}
</section>
{{- partial "pagination.html" . -}}
{{ partialCached "footer/footer" . }}
{{ end }}