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

11
layouts/_default/list.html
View file

@ -1,13 +1,22 @@
{{ define "main" }}
<div id="main">
<div id="main">
<div class="container">
{{ partial "content.html" . }}
{{ if .Content }}
<hr>
{{ end }}
<div class="item-list">
<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>
{{ 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 gt .ReadingTime 2 }}
<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 }}">
<div class="media-body">
<a href="{{ .RelPermalink }}">
<h5 class="my-0">{{ .Title }}</h5>
</a>
<small>{{ partial "content-details.html" . }}</small>
<p>{{ partial "summary.html" . }}</p>
</div>
</div>
<!-- Obtain "dateformat" from scratchpad (or fall back to default) -->
{{ if not (.Scratch.Get "dateformat") }}
{{ .Scratch.Set "dateformat" "Jan 02, 2006" }}
{{ end }}
{{ $dateformat := .Scratch.Get "dateformat" }}
<!-- Reset scratchpad for next use (in next page) - avoids using old values -->
{{ .Scratch.Set "dateformat" nil }}
<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>

34
layouts/posts/list.html
View file

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

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

@ -195,3 +195,61 @@ img {
width: 100%;
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;
}
}
}