From e01cbd0a51c8376a2823c36e590ce52c6dbb9fa8 Mon Sep 17 00:00:00 2001 From: Lol3rrr Date: Mon, 4 Nov 2024 01:32:25 +0100 Subject: [PATCH] Started a major frontend design overhaul --- frontend/colors.css | 26 ++++++++++++++++ frontend/index.html | 8 +++++ frontend/src/demo.rs | 53 ++++++++++++++++----------------- frontend/src/demo/perround.rs | 4 +-- frontend/src/demo/scoreboard.rs | 2 +- frontend/src/homepage.rs | 22 +++++++++----- frontend/src/navbar.rs | 5 ++-- 7 files changed, 80 insertions(+), 40 deletions(-) create mode 100644 frontend/colors.css diff --git a/frontend/colors.css b/frontend/colors.css new file mode 100644 index 0000000..3f9c2ca --- /dev/null +++ b/frontend/colors.css @@ -0,0 +1,26 @@ +* { +/** Generated using https://colorffy.com/dark-theme-generator?colors=40f7f4-121212 */ +/** Dark theme primary colors */ +--color-primary-a0: #40f7f4; +--color-primary-a10: #66f8f5; +--color-primary-a20: #81faf6; +--color-primary-a30: #98fbf8; +--color-primary-a40: #acfcf9; +--color-primary-a50: #befdfa; + +/** Dark theme surface colors */ +--color-surface-a0: #121212; +--color-surface-a10: #282828; +--color-surface-a20: #3f3f3f; +--color-surface-a30: #575757; +--color-surface-a40: #717171; +--color-surface-a50: #8b8b8b; + +/** Dark theme mixed surface colors */ +--color-surface-mixed-a0: #1b2525; +--color-surface-mixed-a10: #303939; +--color-surface-mixed-a20: #474f4f; +--color-surface-mixed-a30: #5e6666; +--color-surface-mixed-a40: #777e7d; +--color-surface-mixed-a50: #919696; +} diff --git a/frontend/index.html b/frontend/index.html index e7d2d59..154a64b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,9 +3,17 @@ + + + diff --git a/frontend/src/demo.rs b/frontend/src/demo.rs index 71b04f3..c1afa8c 100644 --- a/frontend/src/demo.rs +++ b/frontend/src/demo.rs @@ -44,18 +44,6 @@ pub fn demo() -> impl leptos::IntoView { let style = stylers::style! { "Demo", - .analysis_bar { - display: grid; - grid-template-columns: auto auto auto; - column-gap: 20px; - - background-color: #2d2d2d; - } - - .analysis_selector { - display: inline-block; - } - span { display: inline-block; @@ -66,13 +54,22 @@ pub fn demo() -> impl leptos::IntoView { .current { background-color: #5d5d5d; } + + .demo_heading { + display: grid; + margin: 2vh 0px; + grid-template-columns: auto auto; + } }; view! {class = style, -

Demo - { id } - { map }

- - +
+

Demo - { id } - { map }

+ +
+ +
@@ -104,13 +101,13 @@ where }; let style = stylers::style! { - "Demo", + "TabBar", .analysis_bar { display: grid; grid-template-columns: repeat(var(--rows), auto); column-gap: 20px; - background-color: #2d2d2d; + background-color: var(--color-surface-a10); } .analysis_selector { @@ -120,25 +117,25 @@ where span { display: inline-block; - padding: 1vw 1vh; + padding: 1vh 1vw; color: #d5d5d5; - background-color: #4d4d4d; + background-color: var(--color-surface-a20); } .current { - background-color: #5d5d5d; + background-color: var(--color-surface-a30); } }; let tabs = move || { parts.into_iter().map(|(routename, name)| { - view! {class=style, -
- - { name.to_string() } - -
- } - }).collect::>() + view! {class=style, +
+ + { name.to_string() } + +
+ } + }).collect::>() }; view! {class = style, diff --git a/frontend/src/demo/perround.rs b/frontend/src/demo/perround.rs index d82d842..5dd509b 100644 --- a/frontend/src/demo/perround.rs +++ b/frontend/src/demo/perround.rs @@ -31,6 +31,8 @@ pub fn per_round() -> impl leptos::IntoView { .round_overview { display: inline-grid; + margin-top: 2vh; + width: 90vw; grid-template-columns: auto repeat(12, 1fr) 5px repeat(12, 1fr) 5px repeat(3, 1fr) 5px repeat(3, 1fr); grid-template-rows: repeat(3, auto); @@ -201,8 +203,6 @@ pub fn per_round() -> impl leptos::IntoView { view! { class=style, -

Per Round

-
{ team_names } { round_overview } diff --git a/frontend/src/demo/scoreboard.rs b/frontend/src/demo/scoreboard.rs index 9d4af0a..e873043 100644 --- a/frontend/src/demo/scoreboard.rs +++ b/frontend/src/demo/scoreboard.rs @@ -77,7 +77,7 @@ fn team_scoreboard( let style = stylers::style! { "Team-Scoreboard", tr:nth-child(even) { - background-color: #dddddd; + background-color: var(--color-surface-a10); } th { diff --git a/frontend/src/homepage.rs b/frontend/src/homepage.rs index f4aa713..9df18fe 100644 --- a/frontend/src/homepage.rs +++ b/frontend/src/homepage.rs @@ -45,18 +45,23 @@ fn demo_list( "DemoList", .list { display: inline-grid; + width: 100%; grid-template-columns: auto auto auto; - row-gap: 1ch; + row-gap: 1vh; + } + + .headers { + font-size: 22px; } }; view! { class=style,
- Score - Date - Map + Score + Date + Map { move || demos.get().map(|d| d.done).unwrap_or_default().into_iter().enumerate().map(|(i, demo)| view! { }).collect::>() }
@@ -70,12 +75,14 @@ fn demo_list_entry(demo: common::BaseDemoInfo, idx: usize) -> impl leptos::IntoV .entry { display: inline-block; - border: solid #030303aa 1px; - grid-column: 1 / 4; width: 100%; height: 100%; } + .background_entry { + background-color: var(--color-surface-a20); + border-radius: 6px; + } .score, .map { padding-left: 5px; @@ -121,6 +128,7 @@ fn demo_list_entry(demo: common::BaseDemoInfo, idx: usize) -> impl leptos::IntoV view! { class=style, + impl leptos::IntoV >{demo.team2_score}:{demo.team3_score}
{demo.uploaded_at.format("%Y-%m-%d").to_string()} - {demo.uploaded_at.format("%H-%M-%S").to_string()} + {demo.uploaded_at.format("%H:%M:%S").to_string()}
{demo.map} diff --git a/frontend/src/navbar.rs b/frontend/src/navbar.rs index 401abdb..32e5baf 100644 --- a/frontend/src/navbar.rs +++ b/frontend/src/navbar.rs @@ -43,8 +43,9 @@ pub fn top_bar(update_demo_visible: WriteSignal) -> impl lepto height: 4vh; padding-top: 0.5vh; padding-bottom: 0.5vh; + border-radius: 6px; - background-color: #28282f; + background-color: var(--color-surface-a10); color: #d5d5d5; display: grid; @@ -58,7 +59,7 @@ pub fn top_bar(update_demo_visible: WriteSignal) -> impl lepto } .logo { - color: #d5d5d5; + color: var(--color-primary-a50); width: 15vw; font-size: 24px; padding: 0px;