feat(list): add subsection support (#81)
closes https://github.com/CaiJimmy/hugo-theme-stack/issues/48
This commit is contained in:
Jimmy Cai
GitHub
parent
e606dca404
commit
7d841cf237
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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";
|
||||
|
||||
|
||||
12
i18n/en.yaml
12
i18n/en.yaml
@ -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
|
||||
|
||||
@ -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") }}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 }}
|
||||
Loading…
Reference in New Issue
Block a user