Merge pull request #729 from svenstaro/better-mobile-formatting

Make more use of flex in mobile formatting (fixes #142)
svenstaro · Feb 6, 2022 · 3383ef4 · 3383ef4
2 parents 5934a70 + 4cc83f6
commit 3383ef4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased] - ReleaseDate
 - Fix panic when using TLS in some instances [#670](https://github.com/svenstaro/miniserve/issues/670) (thanks @aliemjay)
 - Add `--route-prefix` to add a fixed route prefix [#728](https://github.com/svenstaro/miniserve/pull/728) (thanks @aliemjay and @Jikstra)
+- Allow tapping the whole row in mobile view [#729](https://github.com/svenstaro/miniserve/pull/729)
 
 ## [0.18.0] - 2021-10-26
 - Add raw mode and raw mode footer display [#508](https://github.com/svenstaro/miniserve/pull/508) (thanks @Jikstra)

diff --git 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,30 +489,31 @@ 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 {
         padding-top: 0;
         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
@@ -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)) {
+                                            ".."
+                                        }
                                     }
                                 }
                             }