leon/knifer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started a major frontend design overhaul

Browse Source
This commit is contained in:
Lol3rrr
2024-11-04 01:32:25 +01:00
parent 898a889a53
commit e01cbd0a51
7 changed files with 80 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/colors.css Normal file
View File

@@ -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;
}

8
frontend/index.html
View File

@@ -3,9 +3,17 @@
<head> <head>
<link rel="stylesheet" href="/main.css"> <link rel="stylesheet" href="/main.css">
<link data-trunk rel="css" href="colors.css">
<link data-trunk rel="copy-dir" href="static/"/> <link data-trunk rel="copy-dir" href="static/"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: var(--color-surface-a0);
color: var(--color-primary-a50);
}
</style>
</head> </head>
<body></body> <body></body>
</html> </html>

53
frontend/src/demo.rs
View File

@@ -44,18 +44,6 @@ pub fn demo() -> impl leptos::IntoView {
let style = stylers::style! { let style = stylers::style! {
"Demo", "Demo",
.analysis_bar {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 20px;
background-color: #2d2d2d;
}
.analysis_selector {
display: inline-block;
}
span { span {
display: inline-block; display: inline-block;
@@ -66,13 +54,22 @@ pub fn demo() -> impl leptos::IntoView {
.current { .current {
background-color: #5d5d5d; background-color: #5d5d5d;
} }
.demo_heading {
display: grid;
margin: 2vh 0px;
grid-template-columns: auto auto;
}
}; };
view! {class = style, view! {class = style,
<h2>Demo - { id } - { map }</h2> <div class="demo_heading">
<h2>Demo - { id } - { map }</h2>
<button on:click=move |_| rerun_analysis.dispatch(())>Rerun analysis</button> <button on:click=move |_| rerun_analysis.dispatch(()) style="display: inline-block;">Rerun Analysis</button>
</div>
<TabBar prefix=move || format!("/demo/{}/", id()) parts=&[("scoreboard", "Scoreboard"), ("perround", "Per Round"), ("heatmaps", "Heatmaps")] /> <TabBar prefix=move || format!("/demo/{}/", id()) parts=&[("scoreboard", "Scoreboard"), ("perround", "Per Round"), ("heatmaps", "Heatmaps")] />
<div> <div>
<Outlet/> <Outlet/>
</div> </div>
@@ -104,13 +101,13 @@ where
}; };
let style = stylers::style! { let style = stylers::style! {
"Demo", "TabBar",
.analysis_bar { .analysis_bar {
display: grid; display: grid;
grid-template-columns: repeat(var(--rows), auto); grid-template-columns: repeat(var(--rows), auto);
column-gap: 20px; column-gap: 20px;
background-color: #2d2d2d; background-color: var(--color-surface-a10);
} }
.analysis_selector { .analysis_selector {
@@ -120,25 +117,25 @@ where
span { span {
display: inline-block; display: inline-block;
padding: 1vw 1vh; padding: 1vh 1vw;
color: #d5d5d5; color: #d5d5d5;
background-color: #4d4d4d; background-color: var(--color-surface-a20);
} }
.current { .current {
background-color: #5d5d5d; background-color: var(--color-surface-a30);
} }
}; };
let tabs = move || { let tabs = move || {
parts.into_iter().map(|(routename, name)| { parts.into_iter().map(|(routename, name)| {
view! {class=style, view! {class=style,
<div class="analysis_selector" class:current=move || selected_tab() == routename.to_string()> <div class="analysis_selector" class:current=move || selected_tab() == routename.to_string()>
<A href=routename.to_string()> <A href=routename.to_string()>
<span>{ name.to_string() }</span> <span>{ name.to_string() }</span>
</A> </A>
</div> </div>
} }
}).collect::<Vec<_>>() }).collect::<Vec<_>>()
}; };
view! {class = style, view! {class = style,

4
frontend/src/demo/perround.rs
View File

@@ -31,6 +31,8 @@ pub fn per_round() -> impl leptos::IntoView {
.round_overview { .round_overview {
display: inline-grid; display: inline-grid;
margin-top: 2vh;
width: 90vw; width: 90vw;
grid-template-columns: auto repeat(12, 1fr) 5px repeat(12, 1fr) 5px repeat(3, 1fr) 5px repeat(3, 1fr); 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); grid-template-rows: repeat(3, auto);
@@ -201,8 +203,6 @@ pub fn per_round() -> impl leptos::IntoView {
view! { view! {
class=style, class=style,
<h3>Per Round</h3>
<div class="round_overview"> <div class="round_overview">
{ team_names } { team_names }
{ round_overview } { round_overview }

2
frontend/src/demo/scoreboard.rs
View File

@@ -77,7 +77,7 @@ fn team_scoreboard(
let style = stylers::style! { let style = stylers::style! {
"Team-Scoreboard", "Team-Scoreboard",
tr:nth-child(even) { tr:nth-child(even) {
background-color: #dddddd; background-color: var(--color-surface-a10);
} }
th { th {

22
frontend/src/homepage.rs
View File

@@ -45,18 +45,23 @@ fn demo_list(
"DemoList", "DemoList",
.list { .list {
display: inline-grid; display: inline-grid;
width: 100%;
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
row-gap: 1ch; row-gap: 1vh;
}
.headers {
font-size: 22px;
} }
}; };
view! { view! {
class=style, class=style,
<div class="list"> <div class="list">
<span>Score</span> <span class="headers">Score</span>
<span>Date</span> <span class="headers">Date</span>
<span>Map</span> <span class="headers">Map</span>
{ move || demos.get().map(|d| d.done).unwrap_or_default().into_iter().enumerate().map(|(i, demo)| view! { <DemoListEntry demo idx=i+1 /> }).collect::<Vec<_>>() } { move || demos.get().map(|d| d.done).unwrap_or_default().into_iter().enumerate().map(|(i, demo)| view! { <DemoListEntry demo idx=i+1 /> }).collect::<Vec<_>>() }
</div> </div>
@@ -70,12 +75,14 @@ fn demo_list_entry(demo: common::BaseDemoInfo, idx: usize) -> impl leptos::IntoV
.entry { .entry {
display: inline-block; display: inline-block;
border: solid #030303aa 1px;
grid-column: 1 / 4; grid-column: 1 / 4;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.background_entry {
background-color: var(--color-surface-a20);
border-radius: 6px;
}
.score, .map { .score, .map {
padding-left: 5px; padding-left: 5px;
@@ -121,6 +128,7 @@ fn demo_list_entry(demo: common::BaseDemoInfo, idx: usize) -> impl leptos::IntoV
view! { view! {
class=style, class=style,
<span class="entry background_entry" style=format!("grid-row: {};", idx + 1)></span>
<span <span
class="score" class="score"
style=format!("grid-row: {};", idx + 1) style=format!("grid-row: {};", idx + 1)
@@ -130,7 +138,7 @@ fn demo_list_entry(demo: common::BaseDemoInfo, idx: usize) -> impl leptos::IntoV
>{demo.team2_score}:{demo.team3_score}</span> >{demo.team2_score}:{demo.team3_score}</span>
<div class="date" style=format!("grid-row: {};", idx + 1)> <div class="date" style=format!("grid-row: {};", idx + 1)>
<span>{demo.uploaded_at.format("%Y-%m-%d").to_string()}</span> <span>{demo.uploaded_at.format("%Y-%m-%d").to_string()}</span>
<span>{demo.uploaded_at.format("%H-%M-%S").to_string()}</span> <span>{demo.uploaded_at.format("%H:%M:%S").to_string()}</span>
</div> </div>
<span class="map" style=format!("grid-row: {};", idx + 1)>{demo.map}</span> <span class="map" style=format!("grid-row: {};", idx + 1)>{demo.map}</span>
<a class="entry" href=format!("demo/{}/scoreboard", demo.id) style=format!("grid-row: {};", idx + 1)></a> <a class="entry" href=format!("demo/{}/scoreboard", demo.id) style=format!("grid-row: {};", idx + 1)></a>

5
frontend/src/navbar.rs
View File

@@ -43,8 +43,9 @@ pub fn top_bar(update_demo_visible: WriteSignal<DemoUploadStatus>) -> impl lepto
height: 4vh; height: 4vh;
padding-top: 0.5vh; padding-top: 0.5vh;
padding-bottom: 0.5vh; padding-bottom: 0.5vh;
border-radius: 6px;
background-color: #28282f; background-color: var(--color-surface-a10);
color: #d5d5d5; color: #d5d5d5;
display: grid; display: grid;
@@ -58,7 +59,7 @@ pub fn top_bar(update_demo_visible: WriteSignal<DemoUploadStatus>) -> impl lepto
} }
.logo { .logo {
color: #d5d5d5; color: var(--color-primary-a50);
width: 15vw; width: 15vw;
font-size: 24px; font-size: 24px;
padding: 0px; padding: 0px;