Improved mobile view

2 files changed, 33 insertions, 50 deletions

diff --git a/src/renderer.rs b/src/renderer.rs
index 9fa977e..a0da81e 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -220,8 +220,15 @@ fn entry_row(
                             (entry.name) "/"
                         }
                     } @else if entry.is_file() {
-                        a.file href=(&entry.link) {
-                            (entry.name)
+                        div.file-entry {
+                            a.file href=(&entry.link) {
+                                (entry.name)
+                            }
+                            @if let Some(size) = entry.size {
+                                span.mobile-info.size {
+                                    (size)
+                                }
+                            }
                         }
                     } @ else if entry.is_symlink() {
                         a.symlink href=(parametrized_link(&entry.link, &sort_method, &sort_order, &color_scheme)) {
@@ -229,28 +236,6 @@ fn entry_row(
                         }
                     }
                 }
-                @if !entry.is_dir() {
-                    @if let Some(size) = entry.size {
-                        span .mobile-info {
-                            strong.field { "Size: " }
-                            (size)
-                            (br())
-                        }
-                    }
-                }
-                span .mobile-info {
-                    @if let Some(modification_date) = convert_to_utc(entry.last_modification_date) {
-                        strong.field { "Last modification: " }
-                        (modification_date.0) " "
-                        span.at { " at " }
-                        (modification_date.1) " "
-                    }
-                    @if let Some(modification_timer) = humanize_systemtime(entry.last_modification_date) {
-                        span .history { "(" (modification_timer) ")" }
-                        (br())
-                    }
-
-                }
             }
             td {
                 @if let Some(size) = entry.size {
@@ -394,12 +379,6 @@ fn css(color_scheme: &themes::ColorScheme) -> Markup {
         font-weight: bold;
         color: {switch_theme_active};
     }}
-    strong {{
-        font-weight: bold;
-    }}
-    .field {{
-        color: {field_color}
-    }}
     p {{
         margin: 0;
         padding: 0;
@@ -451,8 +430,16 @@ fn css(color_scheme: &themes::ColorScheme) -> Markup {
     .history {{
         color: {date_text_color};
     }}
-    .file, .directory, .symlink {{
-        display: block;
+    .file-entry {{
+        display: flex;
+        justify-content: space-between;
+    }}
+    span.size {{
+        border-radius: 1rem;
+        background: {size_background_color};
+        padding: 0 0.25rem;
+        font-size: 0.7rem;
+        color: {size_text_color}
     }}
     .mobile-info {{
         display: none;
@@ -576,15 +563,9 @@ fn css(color_scheme: &themes::ColorScheme) -> Markup {
         .mobile-info {{
             display: block;
         }}
-        .file, .directory, .symlink{{
-            padding-bottom: 1rem;
-        }}
         .back {{
             display: initial;
         }}
-        .upload form {{
-            width: 100%;
-        }}
         .back {{
             right: 1.5rem;
         }}
@@ -637,7 +618,6 @@ fn css(color_scheme: &themes::ColorScheme) -> Markup {
         switch_theme_border = theme.switch_theme_border,
         change_theme_link_color = theme.change_theme_link_color,
         change_theme_link_color_hover = theme.change_theme_link_color_hover,
-        field_color = theme.field_color,
         upload_text_color = theme.upload_text_color,
         upload_form_border_color = theme.upload_form_border_color,
         upload_form_background = theme.upload_form_background,
@@ -645,7 +625,9 @@ fn css(color_scheme: &themes::ColorScheme) -> Markup {
         upload_button_text_color = theme.upload_button_text_color,
         drag_background = theme.drag_background,
         drag_border_color = theme.drag_border_color,
-        drag_text_color = theme.drag_text_color);
+        drag_text_color = theme.drag_text_color,
+        size_background_color = theme.size_background_color,
+        size_text_color = theme.size_text_color);
     (PreEscaped(css))
 }
 
@@ -654,11 +636,6 @@ fn arrow_up() -> Markup {
     (PreEscaped("⇪".to_string()))
 }
 
-/// Partial: new line
-fn br() -> Markup {
-    (PreEscaped("<br>".to_string()))
-}
-
 /// Partial: chevron left
 fn chevron_left() -> Markup {
     (PreEscaped("◂".to_string()))
diff --git a/src/themes.rs b/src/themes.rs
index 917e56e..72bdcfa 100644
--- a/src/themes.rs
+++ b/src/themes.rs
@@ -89,7 +89,6 @@ impl ColorScheme {
                 switch_theme_border: "#6a728a".to_string(),
                 change_theme_link_color: "#fefefe".to_string(),
                 change_theme_link_color_hover: "#fefefe".to_string(),
-                field_color: "#859cb9".to_string(),
                 upload_text_color: "#fefefe".to_string(),
                 upload_form_border_color: "#353946".to_string(),
                 upload_form_background: "#4b5162".to_string(),
@@ -98,6 +97,8 @@ impl ColorScheme {
                 drag_background: "#3333338f".to_string(),
                 drag_border_color: "#fefefe".to_string(),
                 drag_text_color: "#fefefe".to_string(),
+                size_background_color: "#5294e2".to_string(),
+                size_text_color: "#fefefe".to_string(),
             },
             ColorScheme::Zenburn => Theme {
                 background: "#3f3f3f".to_string(),
@@ -130,7 +131,6 @@ impl ColorScheme {
                 switch_theme_border: "#5a5a5a".to_string(),
                 change_theme_link_color: "#efefef".to_string(),
                 change_theme_link_color_hover: "#efefef".to_string(),
-                field_color: "#9fc3a1".to_string(),
                 upload_text_color: "#efefef".to_string(),
                 upload_form_border_color: "#4a4949".to_string(),
                 upload_form_background: "#777777".to_string(),
@@ -139,6 +139,8 @@ impl ColorScheme {
                 drag_background: "#3333338f".to_string(),
                 drag_border_color: "#efefef".to_string(),
                 drag_text_color: "#efefef".to_string(),
+                size_background_color: "#7f9f7f".to_string(),
+                size_text_color: "#efefef".to_string(),
             },
             ColorScheme::Monokai => Theme {
                 background: "#272822".to_string(),
@@ -171,7 +173,6 @@ impl ColorScheme {
                 switch_theme_border: "#49483E".to_string(),
                 change_theme_link_color: "#F8F8F2".to_string(),
                 change_theme_link_color_hover: "#F8F8F2".to_string(),
-                field_color: "#ccc7a7".to_string(),
                 upload_text_color: "#F8F8F2".to_string(),
                 upload_form_border_color: "#3B3A32".to_string(),
                 upload_form_background: "#49483E".to_string(),
@@ -180,6 +181,8 @@ impl ColorScheme {
                 drag_background: "#3333338f".to_string(),
                 drag_border_color: "#F8F8F2".to_string(),
                 drag_text_color: "#F8F8F2".to_string(),
+                size_background_color: "#75715E".to_string(),
+                size_text_color: "#F8F8F2".to_string(),
             },
             ColorScheme::Squirrel => Theme {
                 background: "#FFFFFF".to_string(),
@@ -212,7 +215,6 @@ impl ColorScheme {
                 switch_theme_border: "#49483E".to_string(),
                 change_theme_link_color: "#F5F5F5".to_string(),
                 change_theme_link_color_hover: "#F5F5F5".to_string(),
-                field_color: "#797979".to_string(),
                 upload_text_color: "#323232".to_string(),
                 upload_form_border_color: "#d2d2d2".to_string(),
                 upload_form_background: "#f2f2f2".to_string(),
@@ -221,6 +223,8 @@ impl ColorScheme {
                 drag_background: "#3333338f".to_string(),
                 drag_border_color: "#ffffff".to_string(),
                 drag_text_color: "#ffffff".to_string(),
+                size_background_color: "#323232".to_string(),
+                size_text_color: "#FFFFFF".to_string(),
             },
         }
     }
@@ -258,7 +262,6 @@ pub struct Theme {
     pub switch_theme_border: String,
     pub change_theme_link_color: String,
     pub change_theme_link_color_hover: String,
-    pub field_color: String,
     pub upload_text_color: String,
     pub upload_form_border_color: String,
     pub upload_form_background: String,
@@ -267,4 +270,7 @@ pub struct Theme {
     pub drag_background: String,
     pub drag_border_color: String,
     pub drag_text_color: String,
+    pub size_background_color: String,
+    pub size_text_color: String,
+
 }