Chosto
/
blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Finish list design with cards and columns

master
Quentin Duchemin 2021-05-23 01:42:17 +02:00
parent e51a2dc03d
commit 0d608492ad
Signed by: Chosto
GPG Key ID: 0547178FEEDE7D6B
7 changed files with 62 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/css/custom.css 100644
View File

@ -0,0 +1,5 @@
.has-equal-height {
height: 100%;
display: flex;
flex-direction: column;
}

10
themes/chosto/layouts/_default/list.html
View File

@ -5,11 +5,13 @@
{{ . }}
</article>
{{ end }}
{{ range .Paginator.Pages }}
<div class="box">
{{ .Render "summary" }}
<div class="columns is-multiline is-mobile">
{{ range .Paginator.Pages }}
<div class="column is-one-third">
{{ .Render "summary" }}
</div>
{{ end }}
</div>
{{ end }}
{{- partial "pagination.html" . -}}
</main>
{{ end }}

53
themes/chosto/layouts/_default/summary.html
View File

@ -1,11 +1,44 @@
<article class="block">
<header>
<h2>
<a href='{{ .Permalink }}'>
{{- partial "listitem.html" . -}}
<div class="card has-equal-height mt-5">
<div class="card-image">
<figure class="image is-4by3 mt-5">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content" style="height:100%;">
<div class="has-text-centered">
<a class="title is-4" href="{{.Permalink}}">
<!--
Well, I am a beginner with Hugo so this is probably like crushing a banana with a rocket.
When a post belongs to a "case" (i.e. a section with a code, I'd like to have [INDEX/TOTAL] printed in title.
An when a post is on its own, don't print anything.
A little bit like : https://www.hacking-social.com/
But I don't wan't to write it manually because it could break when adding a blog post in between two existing blog posts.
So, iterate over the blog posts with same section as current blog post, order them by date and save the index of current blog post.
Maybe there is an easier way to get the same result...
-->
{{ $currentPost := . }}
{{ $currentPostIndex := 1 }}
{{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
{{ $postsSorted := (sort $posts "Date" )}}
{{ range $index, $element := $postsSorted }}
{{ if eq $element.Title $currentPost.Title }}
{{ $currentPostIndex = (add $index 1) }}
{{ end }}
{{ end }}
{{ with .CurrentSection.Params.Code }}
[{{ . }}{{ print $currentPostIndex }}]
{{ end }}
{{ .Title }}
</a>
</h2>
{{- partial "postinfo.html" . -}}
</header>
{{ .Summary }}
</article>
</div>
<hr style="margin: 1rem 0;">
{{ .Summary }}
</div>
<footer class="card-footer">
<div class="is-size-7 has-text-centered card-footer-item">
<time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}
</time>&nbsp;—&nbsp;{{ .FuzzyWordCount }} mots
</div>
</footer>
</div>

6
themes/chosto/layouts/partials/head.html
View File

@ -1,8 +1,10 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ $style := resources.Get "css/bulma.min.css" }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
{{ $styleBulma := resources.Get "css/bulma.min.css" }}
{{ $styleCustom := resources.Get "css/custom.css" }}
<link rel="stylesheet" href="{{ $styleBulma.Permalink }}">
<link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
<title>
{{ .Site.Title }}
</title>

26
themes/chosto/layouts/partials/listitem.html
View File

@ -1,26 +0,0 @@
<div class="block">
<a href="{{.Permalink}}">
<!--
Well, I am a beginner with Hugo so this is probably like crushing a banana with a rocket.
When a post belongs to a "case" (i.e. a section with a code, I'd like to have [INDEX/TOTAL] printed in title.
An when a post is on its own, don't print anything.
A little bit like : https://www.hacking-social.com/
But I don't wan't to write it manually because it could break when adding a blog post in between two existing blog posts.
So, iterate over the blog posts with same section as current blog post, order them by date and save the index of current blog post.
Maybe there is an easier way to get the same result...
-->
{{ $currentPost := . }}
{{ $currentPostIndex := 1 }}
{{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
{{ $postsSorted := (sort $posts "Date" )}}
{{ range $index, $element := $postsSorted }}
{{ if eq $element.Title $currentPost.Title }}
{{ $currentPostIndex = (add $index 1) }}
{{ end }}
{{ end }}
{{ with .CurrentSection.Params.Code }}
[{{ . }}{{ print $currentPostIndex }}]
{{ end }}
{{ .Title }}
</a>
</div>

5
themes/chosto/layouts/partials/postinfo.html
View File

@ -1,5 +0,0 @@
<div class="post-meta">
<time class="post-date" datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}
</time> - {{ .FuzzyWordCount }} mots
</div>

8
themes/chosto/layouts/posts/single.html
View File

@ -1,11 +1,11 @@
{{ define "main" }}
<div class="columns mt-5 is-variable is-6">
<div class="columns mt-5 is-variable is-mobile is-8">
<!--
If the current blog post belongs to a case, we will add a side menu
with all other blog posts belonging to that case, emphasis to the current.
-->
{{ with .CurrentSection }}
<aside class="menu box column is-3">
<aside class="menu box column is-3 is-align-self-flex-start is-fixed-top" style="position: sticky; top: 10%;">
<p class="menu-label">
Dans le dossier « <a href="{{ .Permalink }}">{{ .Params.Title }} »</a>...
</p>
@ -18,7 +18,7 @@
</div>
</aside>
{{ end }}
<section class="column is-7">
<section class="column is-8">
<div>
<article>
{{ .Content }}
@ -41,7 +41,7 @@
</div>
</aside>
</section>
<aside class="column is-3">
<aside class="box column is-2 is-align-self-flex-start" style="position: sticky; top: 10%;">
{{- partial "about.html" . -}}
</aside>
</div>