From 8c9ae2b7f9b87d2779ea81c86b1b2ea88223b713 Mon Sep 17 00:00:00 2001
From: mirkobrombin <send@mirko.pm>
Date: Mon, 22 Jan 2024 19:55:08 +0100
Subject: [PATCH] cleanup: minor ui changes

---
 src/App.vue                  |  4 +--
 src/assets/css/style.css     | 37 ++++++++++++++++++++++++++-
 src/views/ArticleView.vue    | 34 ++++++++++++++-----------
 src/views/CollectionView.vue | 14 +++++++++--
 src/views/HomeView.vue       | 49 +++++++++++++++++++++---------------
 5 files changed, 97 insertions(+), 41 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fe9daf9..167dc57 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -70,9 +70,7 @@
     </div>
   </div>
 
-  <div class="container">
-    <router-view />
-  </div>
+  <router-view />
 
   <br />
   <br />
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index cac0c38..ca837a4 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -167,7 +167,6 @@ p span.badge {
 .topbar {
     background-color: #fff;
     border-bottom: 1px solid #dddddd;
-    margin: 0 0 18px 0;
     position: sticky;
     top: 0;
     z-index: 9;
@@ -327,4 +326,40 @@ p span.badge {
 
 .panel-block-header.panel-block-header--has-icon+.panel-block-content {
     margin-left: 28px;
+}
+
+.hero.is-title {
+    margin-bottom: 30px;
+}
+
+.hero.is-primary {
+    background-color: #f5f5f5;
+}
+
+.hero.is-primary .title,
+.hero.is-primary .subtitle {
+    color: #3c3f41;
+}
+
+.hero.is-primary .title {
+    margin-bottom: 36px;
+}
+
+.breadcrumb.is-main {
+    margin: 0;
+    padding: 20px;
+    border-bottom: 1px solid #dddddd;
+    position: sticky;
+    top: 52px;
+    background-color: #fff;
+    z-index: 1;
+}
+
+.breadcrumb.is-main~.paned .sidebar aside {
+    top: 130px;
+    height: calc(100vh - 130px);
+}
+
+.card .title.is-4 {
+    line-height: 1.4;
 }
\ No newline at end of file
diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
index b258399..6a5d121 100644
--- a/src/views/ArticleView.vue
+++ b/src/views/ArticleView.vue
@@ -1,22 +1,26 @@
 <template>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-        <ul>
-            <li><router-link to="/">Home</router-link></li>
-            <li><a>{{ lang }}</a></li>
-            <li class="is-active">
-                <a href="#" aria-current="page">
-                    {{ article.Title }}
-                </a>
-            </li>
-        </ul>
+    <nav class="breadcrumb is-main" aria-label="breadcrumbs">
+        <div class="container">
+            <ul>
+                <li><router-link to="/">Home</router-link></li>
+                <li><a>{{ lang }}</a></li>
+                <li class="is-active">
+                    <a href="#" aria-current="page">
+                        {{ article.Title }}
+                    </a>
+                </li>
+            </ul>
+        </div>
     </nav>
-    <section class="hero">
-        <div class="hero-body">
-            <h1 class="title">{{ article.Title }}</h1>
-            <p class="subtitle">{{ article.Description }}</p>
+    <section class="hero is-primary is-title">
+        <div class="container">
+            <div class="hero-body has-text-centered">
+                <h1 class="title">{{ article.Title }}</h1>
+                <p class="subtitle">{{ article.Description }}</p>
+            </div>
         </div>
     </section>
-    <div class="paned">
+    <div class="paned container">
         <div class="sidebar">
             <aside class="menu">
                 <p class="menu-label">
diff --git a/src/views/CollectionView.vue b/src/views/CollectionView.vue
index 58262be..050ff96 100644
--- a/src/views/CollectionView.vue
+++ b/src/views/CollectionView.vue
@@ -1,5 +1,13 @@
 <template>
-    <div>
+    <section class="hero is-primary is-title">
+        <div class="container">
+            <div class="hero-body has-text-centered">
+                <h1 class="title">{{ activeCollection!.title }}</h1>
+                <p class="subtitle">{{ activeCollection!.description }}</p>
+            </div>
+        </div>
+    </section>
+    <div class="container">
         <div class="flex-grid flex-grid--cols-2" v-if="articlesResponse?.articles">
             <div v-for="(article) in articles" :key="article.Slug">
                 <div class="card">
@@ -31,7 +39,7 @@
   
 <script lang="ts">
 import { defineComponent } from "vue";
-import type { ArticlesResponse, Article, ChronosConfig } from "@/core/models";
+import type { ArticlesResponse, Article, ChronosConfig, ChronosCollection } from "@/core/models";
 import { useChronosStore } from "@/core/store";
 import { useHead } from 'unhead'
 
@@ -43,6 +51,7 @@ export default defineComponent({
             articles: [] as Article[],
             chronosConfig: {} as ChronosConfig,
             collectionName: "",
+            activeCollection: {} as ChronosCollection | undefined,
         };
     },
     computed: {
@@ -54,6 +63,7 @@ export default defineComponent({
         // @ts-ignore
         this.chronosConfig = await this.$chronosAPI.config();
         this.collectionName = this.$route.params.collection as string;
+        this.activeCollection = this.chronosConfig.chronosCollections.find((collection) => collection.shortName === this.collectionName);
 
         this.fetchArticles();
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2144cec..5ea36e2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,27 +1,36 @@
 <template>
   <div v-if="chronosConfig">
-    <h1 class="title is-2">Collections</h1>
-    <div class="columns is-multiline">
-      <div v-for="(collection, index) in chronosConfig.chronosCollections" :key="index" class="column is-half">
-        <router-link :to="`/collections/${collection.shortName}`">
-          <div class="card">
-            <div class="card-content">
-              <p class="title is-4">{{ collection.title }}</p>
-              <p class="subtitle is-6">{{ collection.description }}</p>
-              <div class="content">
-                <p class="is-size-7 is-uppercase has-text-weight-bold flex items-center no-gap">
-                  <span class="icon is-small">
-                    <i class="mdi material-icons">book</i>
-                  </span>
-                  <span v-if="articleCounts[collection.shortName] !== undefined" class="ml-2">
-                    {{ articleCounts[collection.shortName] }} Articles
-                  </span>
-                  <span v-else>Loading...</span>
-                </p>
+    <section class="hero is-primary is-title">
+      <div class="container">
+        <div class="hero-body has-text-centered">
+          <h1 class="title">{{ chronosConfig.title }}</h1>
+          <p class="subtitle">Collections</p>
+        </div>
+      </div>
+    </section>
+    <div class="container">
+      <div class="columns is-multiline">
+        <div v-for="(collection, index) in chronosConfig.chronosCollections" :key="index" class="column is-half">
+          <router-link :to="`/collections/${collection.shortName}`">
+            <div class="card">
+              <div class="card-content">
+                <p class="title is-4">{{ collection.title }}</p>
+                <p class="subtitle is-6">{{ collection.description }}</p>
+                <div class="content">
+                  <p class="is-size-7 is-uppercase has-text-weight-bold flex items-center no-gap">
+                    <span class="icon is-small">
+                      <i class="mdi material-icons">book</i>
+                    </span>
+                    <span v-if="articleCounts[collection.shortName] !== undefined" class="ml-2">
+                      {{ articleCounts[collection.shortName] }} Articles
+                    </span>
+                    <span v-else>Loading...</span>
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
-        </router-link>
+          </router-link>
+        </div>
       </div>
     </div>
   </div>