From f66e4aa19074b821cda3cedca64ee3dfae4d5ee9 Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Sun, 7 Jan 2024 12:51:52 +0100
Subject: [PATCH] Create mobile firndly archive

Closes #22
---
 content/page/aktuell/archiv/_index.md        |  1 +
 themes/tsc_vfl/assets/css/main.scss          | 46 ++++++++++++++
 themes/tsc_vfl/layouts/_default/archive.html | 63 ++++++++++++++++++++
 3 files changed, 110 insertions(+)
 create mode 100644 themes/tsc_vfl/layouts/_default/archive.html

diff --git a/content/page/aktuell/archiv/_index.md b/content/page/aktuell/archiv/_index.md
index 86eab89..7c1bdfa 100644
--- a/content/page/aktuell/archiv/_index.md
+++ b/content/page/aktuell/archiv/_index.md
@@ -3,6 +3,7 @@ title: "Archiv"
 date: 2023-01-20T16:27:40+01:00
 draft: false
 # type: home
+layout: archive
 menu:
     main:
         weight: 4
diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss
index d19d11f..64da93d 100644
--- a/themes/tsc_vfl/assets/css/main.scss
+++ b/themes/tsc_vfl/assets/css/main.scss
@@ -27,6 +27,12 @@ $gap_columns_persons: 25px;
     }
 }
 
+@mixin mouse-available {
+    @media screen and (pointer: fine) {
+        @content;
+    }
+}
+
 /* main styling */
 
 body {
@@ -630,6 +636,46 @@ h1 {
     }
 }
 
+.archive-short-links {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 0;
+
+    li {
+        display: block;
+        padding: 5px;
+    }
+}
+
+.archive-year-list {
+    display: flex;
+    margin: 5px 0;
+    align-items: baseline;
+
+    @include mouse-available() {
+        margin: 0;
+    }
+    
+    .date {
+        font-weight: bold;
+        // height: 100%;
+    }
+    .title {
+        margin: 0 0 0 10px;
+        text-align: left;
+
+        a {
+            display: block;
+            padding: 6.5px 0;
+
+            @include mouse-available() {
+                padding: 3px 0;
+            }
+        }
+    }
+}
+
 @font-face{
     font-family: 'Open Sans Condensed';
     font-style: normal;
diff --git a/themes/tsc_vfl/layouts/_default/archive.html b/themes/tsc_vfl/layouts/_default/archive.html
new file mode 100644
index 0000000..90e692c
--- /dev/null
+++ b/themes/tsc_vfl/layouts/_default/archive.html
@@ -0,0 +1,63 @@
+{{ define "main" }}
+    <a name="top">
+        <h1>{{ .Title }}</h1>
+    </a>
+    {{ $archiveGroups := (( where .Site.RegularPages "Section" "==" "news").GroupByDate "2006" ) }}
+    <ul class="archive-short-links">
+        {{ range $archiveGroups }}
+        <li><a href="#year-{{ .Key }}">{{ .Key }}</a></li>
+        {{ end }}
+    </ul>
+
+    {{ range $archiveGroups }}
+    <h2><a id="year-{{ .Key }}">{{ .Key }}</a></h2>
+    {{ range .Pages.ByDate.Reverse }}
+    <div class="archive-year-list">
+        <div class="date">{{ .Date.Format "02.01.2006" }}</div>
+        <div class="title">
+            <a href="{{ .RelPermalink}}">
+                {{ .Title }}
+            </a>
+        </div>
+    </div>
+    {{ end }}
+    <div class="archive-to-top">
+        [<a href="#top">Zurück</a>]
+    </div>
+    {{ end }}
+    <!-- <div class="news-blog">
+        {{ range (.Paginate (first 30 ( where .Site.RegularPages "Section" "==" "news")) 10 ).Pages }}
+        {{ $urlBlogEntry := .RelPermalink}}
+        <div class="blog-entry">
+            <div class="header">
+                {{ .Date.Format "02.01.2006" }}
+                <a href="{{ $urlBlogEntry }}">{{ .Title }}</a>
+            </div>
+            <div class="details">
+                <div class="teaser-image">
+                    {{ $page := . }}
+                    {{ if .Params.Image }}
+                    {{ with (.Resources.GetMatch (.Params.Image)).Fit "290x190 webp" }}
+                    <a href="{{ $urlBlogEntry }}">
+                        <img src="{{ .RelPermalink }}">
+                    </a>
+                    {{ end }}
+                    {{ end }}
+                </div>
+                <div class="right-side">
+                    <div class="intro">
+                        {{ with .Summary }}
+                        {{ . }}
+                        {{ end }}
+                    </div>
+                    <div class="more"><a href="{{ $urlBlogEntry }}">MEHR...</a></div>
+                </div>
+            </div>
+        </div>
+        {{ end }}
+        {{ template "_internal/pagination.html" . }}
+    </div>
+    {{ .Content }} -->
+    {{ partial "totop" }}
+{{ end }}
+