From af82ca68b3a527b21e5f8411d4e4c5682c80061b Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Wed, 24 May 2023 21:01:09 -0700
Subject: [PATCH] timeline: bigger dynamic header

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/components/Timeline.vue | 34 +++++++++++++++++++++++-----------
 src/global.scss             |  5 +++++
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 0445d359..6d93f0f7 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -26,15 +26,18 @@
       @resize="handleResizeWithDelay"
     >
       <template #before>
-        <!-- Show dynamic top matter, name of the view -->
+        <!-- Dynamic top matter, e.g. album or view name -->
         <div class="recycler-before" ref="recyclerBefore">
-          <div class="text" v-show="!$refs.topmatter.type && list.length && viewName && !isMobile()">
-            {{ viewName }}
-          </div>
-
           <!-- Gap for mobile header -->
           <div class="mobile-header-top-gap"></div>
 
+          <!-- Header -->
+          <div class="dynamic-top-matter" v-show="!$refs.topmatter.type && list.length && viewName">
+            <div class="text">
+              {{ viewName }}
+            </div>
+          </div>
+
           <!-- Horizontal scrollable OTD -->
           <OnThisDay
             v-if="routeIsBase && config.enable_top_memories"
@@ -1352,12 +1355,21 @@ export default defineComponent({
 /** Dynamic top matter */
 .recycler-before {
   width: 100%;
-  > .text {
-    font-size: 1.2em;
-    padding-top: 13px;
-    padding-left: 8px;
-    @media (max-width: 768px) {
-      padding-left: 48px;
+  > .dynamic-top-matter {
+    > .text {
+      font-size: 2.5em;
+      padding: 25px 10px 10px 10px;
+      position: relative;
+      display: block;
+      line-height: 1.1em;
+
+      @media (max-width: 768px) {
+        font-size: 1.8em;
+        padding: 15px 12px 7px 12px;
+        html.native & {
+          padding: 25px 18px 7px 18px;
+        }
+      }
     }
   }
 }
diff --git a/src/global.scss b/src/global.scss
index 695efb20..68f983ba 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -40,6 +40,11 @@ body {
     .app-navigation-toggle {
       // Move up to align with back button of top matter
       top: 2px;
+      transition: opacity 0.1s ease-in-out;
+      opacity: 0.2; // It's ugly
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }