From 0af81474e1fbd93546b6b965a7b1f6a1959bf365 Mon Sep 17 00:00:00 2001 From: John Cairns Date: Thu, 31 Oct 2024 09:49:53 -0500 Subject: [PATCH] feat: adjust viewport to be dynamic --- .github/docker/Dockerfile.build | 1 + CHANGELOG.md | 4 +++ src/main.rs | 44 ++++++++++++++------------- style.css | 54 ++++++++++++++++++++++++--------- 4 files changed, 67 insertions(+), 36 deletions(-) diff --git a/.github/docker/Dockerfile.build b/.github/docker/Dockerfile.build index 82c250b..bab5756 100644 --- a/.github/docker/Dockerfile.build +++ b/.github/docker/Dockerfile.build @@ -21,3 +21,4 @@ RUN cargo clippy --all-features --no-deps RUN cargo test CMD trunk build --release + diff --git a/CHANGELOG.md b/CHANGELOG.md index ef12d58..582e9ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 1.0.10 (1024-10-31) + +* feat: adjust viewport to be dynamic + # 1.0.9 (2024-10-20) * fix deployment, pages and lint diff --git a/src/main.rs b/src/main.rs index 2992d05..365a7a5 100644 --- a/src/main.rs +++ b/src/main.rs @@ -193,31 +193,33 @@ impl Component for App { html! { - - - - { "EMOM Timer" } + + + + { "EMOM Timer" } -
-

{ "EMOM Timer" }

-
- { format!("{}/{}", state.current_round, state.rounds) } - - { format!("{}:{:02}", self.round_time.minutes, self.round_time.seconds) } - +
+
+

{ "EMOM Timer" }

+
+
+ { format!("{}/{}", state.current_round, state.rounds) } + { format!("{}:{:02}", self.round_time.minutes, self.round_time.seconds) }
-
{ format!("{}:{:02}.{}", state.current_time.minutes, state.current_time.seconds, state.current_time.tenths) }
+
+ { format!("{}:{:02}.{}", state.current_time.minutes, state.current_time.seconds, state.current_time.tenths) } +
- - - - - - - - - + + + + + + + + +
{ "GitHub" }
diff --git a/style.css b/style.css index 3408b63..94d1632 100644 --- a/style.css +++ b/style.css @@ -1,23 +1,47 @@ -button { - width:85px; - height:30px; - font-size: 14px; - background-color: #c4ffc6; - font-family: Verdana, Geneva, Tahoma, sans-serif +/* Background div fills the viewport */ +#background { + width: 100%; + height: 100%; } -.timerDisplay { - font-size: 200px; - font-family: Verdana, Geneva, Tahoma, sans-serif +/* Main title spans full width */ +.mainTitle { + width: 100%; + text-align: left; + font-size: clamp(1rem, 2vw, 2rem); /* Responsive font size */ } +/* Rounds display spans full width */ .roundsDisplay { - font-size: 50px; - font-family: Verdana, Geneva, Tahoma, sans-serif; - color: #014d04; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + font-size: clamp(1rem, 4vw, 2rem); } -.mainTitle { - font-size: 20px; - font-family: Verdana, Geneva, Tahoma, sans-serif +/* Timer display adjusts with viewport */ +.timerDisplay { + width: 100%; + font-size: clamp(2rem, 25vw, 12rem); /* Responsive font size */ + text-align: center; } + +/* Button container uses Flexbox */ +#buttonDisplay { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +/* Buttons adjust based on container width */ +#buttonDisplay button { + flex: 1 1 20%; /* Adjust percentage as needed */ + margin: 0.5%; + min-width: 80px; /* Optional: prevent buttons from becoming too small */ + max-width: 100px; /* Optional: prevent buttons from becoming too large */ + font-size: clamp(0.875rem, 1.5vw, 1.5rem); /* Responsive font size */ + background-color: #c4ffc6; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} \ No newline at end of file