ItsDrike/itsdrike.com
1
0
Fork 0
mirror of https://github.com/ItsDrike/itsdrike.com.git synced 2024-09-20 02:09:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign list layout

Browse source
This commit is contained in:
ItsDrike 2022-05-11 14:04:08 +02:00
parent 75a45a192b
commit f3419a37b1
No known key found for this signature in database
GPG key ID: B014E761034AF742
5 changed files with 122 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
layouts/_default/list.html
View file

@ -1,13 +1,22 @@
{{ define "main" }} {{ define "main" }}
<div id="main"> <div id="main">
<div class="container"> <div class="container">
{{ partial "content.html" . }} {{ partial "content.html" . }}
{{ if .Content }} {{ if .Content }}
<hr> <hr>
{{ end }} {{ end }}
{{ range .Pages.ByTitle }}
{{ partial "list_item.html" . }} <div class="item-list">
{{ end }} <div class="item-list-group">
<ul class="item-list-items">
{{ range .Pages.ByTitle }}
<li class="item-list-item" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}">
{{ partial "list_item.html" . }}
</li>
{{ end }}
</ul>
</div>
</div>
</div> </div>
</div> </div>
{{ end }} {{ end }}

6
layouts/partials/content-details.html
View file

@ -1,9 +1,3 @@
{{ if not .Date.IsZero }}
<span class="pr-2" title='{{ .Date.Format "January 2 2006" }}'>
<i class="far fa-calendar-alt pr-1 content-detail"></i> {{ .Date.Format "2006-01-02" }}
</span>
{{ end }}
{{ if not .Parent.IsHome }} {{ if not .Parent.IsHome }}
{{ if gt .ReadingTime 2 }} {{ if gt .ReadingTime 2 }}
<span class="pr-2" title="Reading time"> <span class="pr-2" title="Reading time">

27
layouts/partials/list_item.html
View file

@ -1,9 +1,18 @@
<div class="media list-page-item mb-3" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}"> <!-- Obtain "dateformat" from scratchpad (or fall back to default) -->
<div class="media-body"> {{ if not (.Scratch.Get "dateformat") }}
<a href="{{ .RelPermalink }}"> {{ .Scratch.Set "dateformat" "Jan 02, 2006" }}
<h5 class="my-0">{{ .Title }}</h5> {{ end }}
</a> {{ $dateformat := .Scratch.Get "dateformat" }}
<small>{{ partial "content-details.html" . }}</small> <!-- Reset scratchpad for next use (in next page) - avoids using old values -->
<p>{{ partial "summary.html" . }}</p> {{ .Scratch.Set "dateformat" nil }}
</div>
</div>
<a class="item-link" href="{{ .RelPermalink }}">
<span class="item-title">{{ .Title }}</span>
{{ if not .Date.IsZero }}
<span class="item-day">{{ .Date.Format $dateformat }}</span>
{{ end }}
</a>
<small class="item-details">{{ partial "content-details.html" . }}</small>
<!-- TODO: Only show summary on hover? -->
<p class="item-summary">{{ partial "summary.html" . }}</p>

46
layouts/posts/list.html
View file

@ -1,22 +1,34 @@
{{ define "main" }} {{ define "main" }}
<div id="main"> <div id="main">
<div class="container"> <div class="container">
{{ partial "content.html" . }} <!-- Total posts, total words, link to tag list page, RSS -->
<!--Group posts by months--> <div class="item-list">
{{ range .Pages.GroupByDate "2006-01" }} {{ partial "content.html" . }}
{{ $month := print .Key "-01"}} <!-- Go through post groups by year -->
{{ $display := dateFormat "2006-01" $month }} {{ range .Data.Pages.GroupByDate "2006" }}
<h3 class="mt-5" id="{{ $display }}"> {{ $year := .Key }}
<a href="#{{ $display }}">
<time datetime="{{ $month }}" title='{{ dateFormat "January 2006" $month }}'>{{ $display }}</time> <div class="item-list-group">
</a> <!-- Show the year for this group -->
</h3> <h3 class="item-list-year" id="{{ $year }}">
<!--List posts belonging to current month --> <a href="#{{ $year }}">
{{ range (sort .Pages "Date" "desc") }} <time datetime="{{ $year }}" title='{{ $year }}'>{{ $year }}</time>
{{ partial "list_item.html" . }} </a>
{{ end }} </h3>
{{ end }}
<!-- List all posts in this year group -->
<ul class="item-list-items">
{{ range .Pages }}
<li class="item-list-item" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}">
{{ .Scratch.Set "dateformat" "Jan 02" }}
{{ partial "list_item.html" . }}
</li>
{{ end }}
</ul>
</div>
{{ end }}
</div>
</div> </div>
</div> </div>
{{ end }} {{ end }}

58
static/src/scss/style.scss
View file

@ -195,3 +195,61 @@ img {
width: 100%; width: 100%;
height: 35vh; height: 35vh;
} }
.item-list {
width: 100%;
max-width: 1500px;
text-align: left;
padding: 20px;
margin: 20px auto;
.item-list-group {
display: flex;
margin-bottom: 1.9em;
line-height: normal;
}
.item-list-year {
padding-top: 6px;
margin-right: 1.8em;
font-size: 2em;
}
.item-list-items {
flex-grow: 1;
margin: 0;
padding: 0;
list-style: none;
}
.item-list-item {
border-bottom: 1px grey dashed;
.item-link {
display: flex;
justify-content: space-between;
align-items: baseline;
text-decoration: none;
}
.item-title {
font-size: 1.3rem;
margin: 5px 0 5px 0;
}
.item-day {
flex-shrink: 0;
margin-left: 1em;
opacity: 0.8;
}
.item-details {
font-size: 0.8rem;
text-indent: 2em;
}
.item-summary {
font-size: 1rem;
}
}
}