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>
<link rel="stylesheet" href="/main.css">
<link data-trunk rel="css" href="colors.css">
<link data-trunk rel="copy-dir" href="static/"/>
<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>
<body></body>
</html>

33
frontend/src/demo.rs
View File

@@ -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,
<div class="demo_heading">
<h2>Demo - { id } - { map }</h2>
<button on:click=move |_| rerun_analysis.dispatch(()) style="display: inline-block;">Rerun Analysis</button>
</div>
<button on:click=move |_| rerun_analysis.dispatch(())>Rerun analysis</button>
<TabBar prefix=move || format!("/demo/{}/", id()) parts=&[("scoreboard", "Scoreboard"), ("perround", "Per Round"), ("heatmaps", "Heatmaps")] />
<div>
<Outlet/>
</div>
@@ -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,12 +117,12 @@ 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);
}
};

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

@@ -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,
<h3>Per Round</h3>
<div class="round_overview">
{ team_names }
{ round_overview }

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

@@ -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 {

22
frontend/src/homepage.rs
View File

@@ -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,
<div class="list">
<span>Score</span>
<span>Date</span>
<span>Map</span>
<span class="headers">Score</span>
<span class="headers">Date</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<_>>() }
</div>
@@ -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,
<span class="entry background_entry" style=format!("grid-row: {};", idx + 1)></span>
<span
class="score"
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>
<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("%H-%M-%S").to_string()}</span>
<span>{demo.uploaded_at.format("%H:%M:%S").to_string()}</span>
</div>
<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>

5
frontend/src/navbar.rs
View File

@@ -43,8 +43,9 @@ pub fn top_bar(update_demo_visible: WriteSignal<DemoUploadStatus>) -> 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<DemoUploadStatus>) -> impl lepto
}
.logo {
color: #d5d5d5;
color: var(--color-primary-a50);
width: 15vw;
font-size: 24px;
padding: 0px;