From f21e192a8fc9bcf4f53d9e3064dcf69469391d1a Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Thu, 6 Jan 2022 15:21:42 +0100
Subject: [PATCH] Improve mobile responsiveness

---
 config.nims                      | 3 ++-
 src/sass/profile/_base.scss      | 9 ++++++++-
 src/sass/profile/card.scss       | 2 +-
 src/sass/profile/photo-rail.scss | 4 +---
 src/sass/timeline.scss           | 1 +
 src/views/general.nim            | 2 +-
 src/views/profile.nim            | 4 ++--
 7 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/config.nims b/config.nims
index 5c3be57..b74d70e 100644
--- a/config.nims
+++ b/config.nims
@@ -6,7 +6,8 @@
 
 # disable annoying warnings
 warning("GcUnsafe2", off)
-warning("ObservableStores", off)
+hint("XDeclaredButNotUsed", off)
+hint("User", off)
 
 const
   nimVersion = (major: NimMajor, minor: NimMinor, patch: NimPatch)
diff --git a/src/sass/profile/_base.scss b/src/sass/profile/_base.scss
index 23ac4f2..6a2cfec 100644
--- a/src/sass/profile/_base.scss
+++ b/src/sass/profile/_base.scss
@@ -51,9 +51,10 @@
     margin-bottom: unset;
 }
 
-@media(max-width: 600px) {
+@media(max-width: 700px) {
     .profile-tabs {
         width: 100vw;
+        max-width: 600px;
 
         .timeline-container {
             width: 100% !important;
@@ -71,3 +72,9 @@
         padding: 0;
     }
 }
+
+@media (min-height: 900px) {
+    .profile-tab.sticky {
+        position: sticky;
+    }
+}
diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss
index 7c44781..9475fbf 100644
--- a/src/sass/profile/card.scss
+++ b/src/sass/profile/card.scss
@@ -103,7 +103,7 @@
     color: var(--profile_stat);
 }
 
-@media(max-width: 600px) {
+@media(max-width: 700px) {
     .profile-card-info {
         display: flex;
     }
diff --git a/src/sass/profile/photo-rail.scss b/src/sass/profile/photo-rail.scss
index ebe2321..314eadf 100644
--- a/src/sass/profile/photo-rail.scss
+++ b/src/sass/profile/photo-rail.scss
@@ -59,7 +59,7 @@
     padding-bottom: 12px;
 }
 
-@media(max-width: 600px) {
+@media(max-width: 700px) {
     .photo-rail-header {
         display: none;
     }
@@ -74,9 +74,7 @@
         overflow: hidden;
         transition: max-height 0.4s;
     }
-}
 
-@media(max-width: 600px) {
     .photo-rail-grid {
         grid-template-columns: repeat(6, 1fr);
     }
diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss
index db19bed..c8ce309 100644
--- a/src/sass/timeline.scss
+++ b/src/sass/timeline.scss
@@ -75,6 +75,7 @@
 
     &.wide {
         flex-grow: 1.2;
+        flex-basis: 50px;
     }
 }
 
diff --git a/src/views/general.nim b/src/views/general.nim
index f8e01f9..f19080e 100644
--- a/src/views/general.nim
+++ b/src/views/general.nim
@@ -45,7 +45,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; video="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=8")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=9")
     link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=2")
 
     if theme.len > 0:
diff --git a/src/views/profile.nim b/src/views/profile.nim
index 78e9fce..9481faf 100644
--- a/src/views/profile.nim
+++ b/src/views/profile.nim
@@ -105,8 +105,8 @@ proc renderProfile*(profile: Profile; timeline: var Timeline;
       tdiv(class="profile-banner"):
         renderBanner(profile)
 
-    let sticky = if prefs.stickyProfile: "sticky" else: "unset"
-    tdiv(class="profile-tab", style={position: sticky}):
+    let sticky = if prefs.stickyProfile: " sticky" else: ""
+    tdiv(class=(&"profile-tab{sticky}")):
       renderProfileCard(profile, prefs)
       if photoRail.len > 0:
         renderPhotoRail(profile, photoRail)