From 40b31a14b20cadb4961c9522161795ba965b2a03 Mon Sep 17 00:00:00 2001
From: Sven-Hendrik Haase <svenstaro@gmail.com>
Date: Sun, 6 Feb 2022 14:33:10 +0100
Subject: Make more use of flex in mobile formatting (fixes #142)

---
 data/style.scss | 28 ++++++++++++++++++----------
 src/renderer.rs | 14 +++++++++-----
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/data/style.scss b/data/style.scss
index e398c9e..c23bff4 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -251,6 +251,11 @@ table tbody tr td {
     line-height: 1.125rem;
 }
 
+table tbody tr td p {
+    display: flex;
+    align-items: center;
+}
+
 table thead tr th {
     padding: 0.5rem 0.625rem 0.625rem;
     font-weight: bold;
@@ -329,8 +334,8 @@ th span.active span {
 
 .back {
     position: fixed;
-    width: 3.8rem;
-    height: 3.8rem;
+    width: 3rem;
+    height: 3rem;
     align-items: center;
     justify-content: center;
     bottom: 3rem;
@@ -340,6 +345,8 @@ th span.active span {
     box-shadow: 0 0 8px -4px #888888;
     color: var(--back_button_link_color);
     display: none;
+    padding: 0;
+    font-size: 2em;
 }
 
 .back:visited {
@@ -482,9 +489,9 @@ th span.active span {
     }
 
     .mobile-info {
-        display: block;
-        float: right;
-        margin-top: 0.5rem;
+        display: inline-flex;
+        align-items: center;
+        margin: auto;
     }
 
     table tbody tr td {
@@ -492,20 +499,21 @@ th span.active span {
         padding-bottom: 0;
     }
 
-    a.directory {
-        display: block;
+    a {
         padding: 0.5625rem 0;
     }
 
+    a.directory {
+        flex-grow: 1;
+    }
+
     .file-entry {
         align-items: center;
     }
 
     a.root,
     a.file {
-        display: inline-block;
-        flex: 1;
-        padding: 0.5625rem 0;
+        flex-grow: 1;
     }
 
     .back {
diff --git a/src/renderer.rs b/src/renderer.rs
index 544be42..ef7285b 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -124,9 +124,11 @@ pub fn page(
                             @if !is_root {
                                 tr {
                                     td colspan="3" {
-                                        span.root-chevron { (chevron_left()) }
-                                        a.root href=(parametrized_link("../", sort_method, sort_order, false)) {
-                                            "Parent directory"
+                                        p {
+                                            span.root-chevron { (chevron_left()) }
+                                            a.root href=(parametrized_link("../", sort_method, sort_order, false)) {
+                                                "Parent directory"
+                                            }
                                         }
                                     }
                                 }
@@ -169,8 +171,10 @@ pub fn raw(entries: Vec<Entry>, is_root: bool) -> Markup {
                         @if !is_root {
                             tr {
                                 td colspan="3" {
-                                    a.root href=(parametrized_link("../", None, None, true)) {
-                                        ".."
+                                    p {
+                                        a.root href=(parametrized_link("../", None, None, true)) {
+                                            ".."
+                                        }
                                     }
                                 }
                             }
-- 
cgit v1.2.3