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 {
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);
background-color: var(--card-background);
padding: var(--small-card-padding);
@ -9,37 +9,37 @@
--separation: 15px;
.taxonomy-term {
.section-term {
font-size: 2.2rem;
margin: 0;
margin-top: calc(var(--separation) / 2);
color: var(--card-text-color-main);
& + .taxonomy-description {
& + .section-description {
margin-top: var(--separation);
}
}
.taxonomy-description {
.section-description {
font-weight: normal;
color: var(--card-text-color-secondary);
font-size: 1.6rem;
margin: 0;
}
.taxonomy-details {
.section-details {
flex-grow: 1;
margin-right: 20px;
}
.taxonomy-image {
.section-image {
img {
width: 60px;
height: 60px;
}
}
.taxonomy-count {
.section-count {
color: var(--card-text-color-tertiary);
font-size: 1.4rem;
margin: 0;
@ -47,3 +47,29 @@
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/layout/archives.scss";
@import "partials/layout/article.scss";
@import "partials/layout/taxonomy.scss";
@import "partials/layout/list.scss";
@import "partials/layout/404.scss";
@import "partials/layout/search.scss";

View File

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

View File

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

View File

@ -1,8 +1,51 @@
{{ 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">
{{ range .Paginator.Pages }}
{{ range $paginator.Pages }}
{{ partial "article-list/compact" . }}
{{ end }}
</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 }}