From 6e95f942f1ae6c9c120c95eeb8b1aae1379bcd54 Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Mon, 25 Feb 2019 20:22:58 +0100 Subject: Removed sorting from CLI + added sorting from HTML --- src/renderer.rs | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 82937ab..2f25cad 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -11,6 +11,8 @@ pub fn page( entries: Vec, is_root: bool, page_parent: Option, + sort_method: Option, + sort_order: Option, ) -> Markup { html! { (page_header(page_title)) @@ -18,9 +20,9 @@ pub fn page( h1 { (page_title) } table { thead { - th { "Name" } - th { "Size" } - th { "Last modification" } + th { (build_link("name", "Name", &sort_method, &sort_order)) } + th { (build_link("size", "Size", &sort_method, &sort_order)) } + th { (build_link("date", "Last modification", &sort_method, &sort_order)) } } tbody { @if !is_root { @@ -43,6 +45,32 @@ pub fn page( } } +/// Partial: table header link +fn build_link( + name: &str, + title: &str, + sort_method: &Option, + sort_order: &Option, +) -> Markup { + let mut link = format!("?sort={}&order=asc", name); + let mut help = format!("Sort by {} in ascending order", name); + + if let Some(method) = sort_method { + if method.to_string() == name { + if let Some(order) = sort_order { + if order.to_string() == "asc" { + link = format!("?sort={}&order=desc", name); + help = format!("Sort by {} in descending order", name); + } + } + } + }; + + html! { + a href=(link) title=(help) { (title) } + } +} + /// Partial: page header fn page_header(page_title: &str) -> Markup { html! { -- cgit v1.2.3 From 34155e5c1b208ad989a3de3f09f85fb2a445ee5b Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Tue, 26 Feb 2019 23:26:12 +0100 Subject: Stylized table header + added chevrons --- src/renderer.rs | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 2f25cad..24942d8 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -54,6 +54,7 @@ fn build_link( ) -> Markup { let mut link = format!("?sort={}&order=asc", name); let mut help = format!("Sort by {} in ascending order", name); + let mut chevron = chevron_up(); if let Some(method) = sort_method { if method.to_string() == name { @@ -61,16 +62,52 @@ fn build_link( if order.to_string() == "asc" { link = format!("?sort={}&order=desc", name); help = format!("Sort by {} in descending order", name); + chevron = chevron_down(); } } } }; html! { + (chevron) + a href=(link) title=(help) { (title) } } } +/// Partial: chevron up +fn chevron_up() -> Markup { + let svg = r#" + + + "# + .to_string(); + + (PreEscaped(svg)) +} + +/// Partial: chevron up +fn chevron_down() -> Markup { + let svg = r#" + + + "# + .to_string(); + + (PreEscaped(svg)) +} + /// Partial: page header fn page_header(page_title: &str) -> Markup { html! { @@ -213,6 +250,14 @@ fn css() -> Markup { .mobile-info { display: none; } + th svg { + margin-right: .5rem; + vertical-align: middle; + fill: #777c82; + } + th a, th a:visited { + color: #777c82; + } @media (max-width: 600px) { h1 { font-size: 1.375em; -- cgit v1.2.3 From db87865631477fafc8b4e62f444514e853014856 Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Tue, 26 Feb 2019 23:54:36 +0100 Subject: Added highlight for current sorting column --- src/renderer.rs | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 24942d8..846d18b 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -55,9 +55,11 @@ fn build_link( let mut link = format!("?sort={}&order=asc", name); let mut help = format!("Sort by {} in ascending order", name); let mut chevron = chevron_up(); + let mut class = ""; if let Some(method) = sort_method { if method.to_string() == name { + class = "active"; if let Some(order) = sort_order { if order.to_string() == "asc" { link = format!("?sort={}&order=desc", name); @@ -69,9 +71,10 @@ fn build_link( }; html! { - (chevron) - - a href=(link) title=(help) { (title) } + span class=(class) { + (chevron) + a href=(link) title=(help) { (title) } + } } } @@ -258,6 +261,12 @@ fn css() -> Markup { th a, th a:visited { color: #777c82; } + th span.active a { + color: #d24ca9; + } + th span.active svg { + fill: #d24ca9; + } @media (max-width: 600px) { h1 { font-size: 1.375em; -- cgit v1.2.3 From 3ece171c490f62233a996359d26575a8879c70db Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Wed, 27 Feb 2019 18:36:25 +0100 Subject: Switched to unicode characters + improved look and feel --- src/renderer.rs | 46 ++++++++++------------------------------------ 1 file changed, 10 insertions(+), 36 deletions(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 846d18b..70e40a2 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -72,7 +72,7 @@ fn build_link( html! { span class=(class) { - (chevron) + span.chevron { (chevron) } a href=(link) title=(help) { (title) } } } @@ -80,35 +80,12 @@ fn build_link( /// Partial: chevron up fn chevron_up() -> Markup { - let svg = r#" - - - "# - .to_string(); - - (PreEscaped(svg)) + (PreEscaped("▴".to_string())) } /// Partial: chevron up fn chevron_down() -> Markup { - let svg = r#" - - - "# - .to_string(); - - (PreEscaped(svg)) + (PreEscaped("▾".to_string())) } /// Partial: page header @@ -194,6 +171,7 @@ fn css() -> Markup { padding: 0.125rem; } table { + margin-top: 2rem; width: 100%; background: white; border: 0; @@ -253,19 +231,15 @@ fn css() -> Markup { .mobile-info { display: none; } - th svg { - margin-right: .5rem; - vertical-align: middle; - fill: #777c82; - } - th a, th a:visited { + th a, th a:visited, .chevron { color: #777c82; } - th span.active a { - color: #d24ca9; + .chevron { + margin-right: .5rem; + font-size: 1.2em; } - th span.active svg { - fill: #d24ca9; + th span.active a, th span.active span { + color: #444444; } @media (max-width: 600px) { h1 { -- cgit v1.2.3 From 108f385e675e474f3dfb581d801df55b5c3820a0 Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Wed, 27 Feb 2019 20:00:34 +0100 Subject: Actually use unicode characters --- src/renderer.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 70e40a2..1253bec 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -80,12 +80,12 @@ fn build_link( /// Partial: chevron up fn chevron_up() -> Markup { - (PreEscaped("▴".to_string())) + (PreEscaped("▴".to_string())) } /// Partial: chevron up fn chevron_down() -> Markup { - (PreEscaped("▾".to_string())) + (PreEscaped("▾".to_string())) } /// Partial: page header -- cgit v1.2.3 From 3dd2d59789a0c93e62e6d7771a43adc2e2d71c07 Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Wed, 27 Feb 2019 20:02:56 +0100 Subject: Improved parent directory link's style --- src/renderer.rs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 1253bec..3fb992e 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -29,8 +29,9 @@ pub fn page( @if let Some(parent) = page_parent { tr { td { + span.chevron { (chevron_left()) } a.root href=(parent) { - ".." + "Parent directory" } } } @@ -78,6 +79,11 @@ fn build_link( } } +/// Partial: chevron left +fn chevron_left() -> Markup { + (PreEscaped("◂".to_string())) +} + /// Partial: chevron up fn chevron_up() -> Markup { (PreEscaped("▴".to_string())) @@ -237,6 +243,7 @@ fn css() -> Markup { .chevron { margin-right: .5rem; font-size: 1.2em; + font-weight: bold; } th span.active a, th span.active span { color: #444444; -- cgit v1.2.3 From bbc7ef78f6da7de1e0b7d3a93d2bd547ea30ec21 Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Wed, 27 Feb 2019 20:10:26 +0100 Subject: Improved readability on mobile + terminal browsers --- src/renderer.rs | 33 +++++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 10 deletions(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 3fb992e..7128be4 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -79,6 +79,11 @@ fn build_link( } } +/// Partial: new line +fn br() -> Markup { + (PreEscaped("
".to_string())) +} + /// Partial: chevron left fn chevron_left() -> Markup { (PreEscaped("◂".to_string())) @@ -113,13 +118,15 @@ fn entry_row(entry: listing::Entry) -> Markup { html! { tr { td { - @if entry.is_dir() { - a.directory href=(entry.link) { - (entry.name) "/" - } - } @else { - a.file href=(entry.link) { - (entry.name) + p { + @if entry.is_dir() { + a.directory href=(entry.link) { + (entry.name) "/" + } + } @else { + a.file href=(entry.link) { + (entry.name) + } } } @if !entry.is_dir() { @@ -127,6 +134,7 @@ fn entry_row(entry: listing::Entry) -> Markup { span .mobile-info { strong { "Size: " } (size) + (br()) } } } @@ -138,6 +146,7 @@ fn entry_row(entry: listing::Entry) -> Markup { } @if let Some(modification_timer) = humanize_systemtime(entry.last_modification_date) { span .history { "(" (modification_timer) ")" } + (br()) } } @@ -150,10 +159,10 @@ fn entry_row(entry: listing::Entry) -> Markup { td.date-cell { @if let Some(modification_date) = convert_to_utc(entry.last_modification_date) { span { - (modification_date.0) + (modification_date.0) " " } span { - (modification_date.1) + (modification_date.1) " " } } @if let Some(modification_timer) = humanize_systemtime(entry.last_modification_date) { @@ -176,6 +185,10 @@ fn css() -> Markup { color: #444444; padding: 0.125rem; } + p { + margin: 0; + padding: 0; + } table { margin-top: 2rem; width: 100%; @@ -259,7 +272,7 @@ fn css() -> Markup { display: block; } .file, .directory{ - padding-bottom: 0.5rem; + padding-bottom: 1rem; } } @media (max-width: 400px) { -- cgit v1.2.3 From ea4995a0292d6b5a3311c2f1fb801f0faccdf141 Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Sat, 2 Mar 2019 21:22:07 +0100 Subject: Added back to top button + various CSS improvements + re-order functions in renderer --- src/renderer.rs | 100 +++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 66 insertions(+), 34 deletions(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 7128be4..e419cb0 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -17,6 +17,7 @@ pub fn page( html! { (page_header(page_title)) body { + span #top { } h1 { (page_title) } table { thead { @@ -42,6 +43,9 @@ pub fn page( } } } + a.back href="#top" { + (arrow_up()) + } } } } @@ -79,40 +83,6 @@ fn build_link( } } -/// Partial: new line -fn br() -> Markup { - (PreEscaped("
".to_string())) -} - -/// Partial: chevron left -fn chevron_left() -> Markup { - (PreEscaped("◂".to_string())) -} - -/// Partial: chevron up -fn chevron_up() -> Markup { - (PreEscaped("▴".to_string())) -} - -/// Partial: chevron up -fn chevron_down() -> Markup { - (PreEscaped("▾".to_string())) -} - -/// Partial: page header -fn page_header(page_title: &str) -> Markup { - html! { - (DOCTYPE) - html { - meta charset="utf-8"; - meta http-equiv="X-UA-Compatible" content="IE=edge"; - meta name="viewport" content="width=device-width, initial-scale=1"; - title { (page_title) } - style { (css()) } - } - } -} - /// Partial: row for an entry fn entry_row(entry: listing::Entry) -> Markup { html! { @@ -178,6 +148,10 @@ fn entry_row(entry: listing::Entry) -> Markup { /// Partial: CSS fn css() -> Markup { (PreEscaped(r#" + html { + font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, Arial, sans-serif; @@ -185,6 +159,9 @@ fn css() -> Markup { color: #444444; padding: 0.125rem; } + strong { + font-weight: bold; + } p { margin: 0; padding: 0; @@ -261,6 +238,22 @@ fn css() -> Markup { th span.active a, th span.active span { color: #444444; } + .back { + position: fixed; + bottom: 1.1rem; + right: 0.625rem; + background: #e0e0e0; + border-radius: 100%; + box-shadow: 0 0 8px -4px #888888; + opacity: 0.8; + padding: 1rem 1.1rem; + color: #444444; + } + + .back:hover { + color: #3498db; + text-decoration: none; + } @media (max-width: 600px) { h1 { font-size: 1.375em; @@ -282,6 +275,45 @@ fn css() -> Markup { }"#.to_string())) } +/// Partial: up arrow +fn arrow_up() -> Markup { + (PreEscaped("⇪".to_string())) +} + +/// Partial: new line +fn br() -> Markup { + (PreEscaped("
".to_string())) +} + +/// Partial: chevron left +fn chevron_left() -> Markup { + (PreEscaped("◂".to_string())) +} + +/// Partial: chevron up +fn chevron_up() -> Markup { + (PreEscaped("▴".to_string())) +} + +/// Partial: chevron up +fn chevron_down() -> Markup { + (PreEscaped("▾".to_string())) +} + +/// Partial: page header +fn page_header(page_title: &str) -> Markup { + html! { + (DOCTYPE) + html { + meta charset="utf-8"; + meta http-equiv="X-UA-Compatible" content="IE=edge"; + meta name="viewport" content="width=device-width, initial-scale=1"; + title { (page_title) } + style { (css()) } + } + } +} + /// Converts a SystemTime object to a strings tuple (date, time) /// Date is formatted as %e %b, e.g. Jul 12 /// Time is formatted as %R, e.g. 22:34 -- cgit v1.2.3 From 9c0a5ad85af57b4646c64cc14102d8dc7a8011bc Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Sat, 2 Mar 2019 21:23:42 +0100 Subject: Reset color of visited link in back to top button --- src/renderer.rs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index e419cb0..2cb9ae7 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -249,7 +249,9 @@ fn css() -> Markup { padding: 1rem 1.1rem; color: #444444; } - + .back:visited { + color: #444444; + } .back:hover { color: #3498db; text-decoration: none; -- cgit v1.2.3 From 2b27f20a9602549beb36244240c669ba86ecb0b6 Mon Sep 17 00:00:00 2001 From: boasting-squirrel Date: Mon, 4 Mar 2019 22:35:48 +0100 Subject: Added color on hovering row --- src/renderer.rs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'src/renderer.rs') diff --git a/src/renderer.rs b/src/renderer.rs index 2cb9ae7..89a9248 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -29,7 +29,7 @@ pub fn page( @if !is_root { @if let Some(parent) = page_parent { tr { - td { + td colspan="3" { span.chevron { (chevron_left()) } a.root href=(parent) { "Parent directory" @@ -185,7 +185,7 @@ fn css() -> Markup { line-height: 1.125rem; width: 33.333%; } - table thead tr th { + table tr th { padding: 0.5rem 0.625rem 0.625rem; font-weight: bold; color: #444444; @@ -193,6 +193,9 @@ fn css() -> Markup { table tr:nth-child(even) { background: #f6f6f6; } + table tr:hover { + background: #deeef7a6; + } a { text-decoration: none; color: #3498db; -- cgit v1.2.3