feat: adjust viewport to be dynamic

jac18281828 · Oct 31, 2024 · 0af8147 · 0af8147
1 parent 3bc70ad
commit 0af8147
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 36 deletions.
diff --git 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
@@ -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
@@ -193,31 +193,33 @@ impl Component for App {
         html! {
             <html lang="en">
             <head>
-            <meta charset="UTF-8" />
-            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            <title>{ "EMOM Timer" }</title>
+                <meta charset="UTF-8" />
+                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <title>{ "EMOM Timer" }</title>
             </head>
             <body style={if self.blinked { "color:red" } else { "color:black" }} >
-                <div width="100%" height="100%" id="background">
-                <div class="mainTitle" align="left"><h3>{ "EMOM Timer" }</h3></div>
-                <div class="roundsDisplay" id="roundsDisplay" style="text-align:left">
-                { format!("{}/{}", state.current_round, state.rounds) }
-                <span style="float:left; width:650px">
-                { format!("{}:{:02}", self.round_time.minutes, self.round_time.seconds) }
-                </span>
+                <div id="background">
+                    <div class="mainTitle">
+                        <h3>{ "EMOM Timer" }</h3>
+                    </div>
+                <div class="roundsDisplay" id="roundsDisplay">
+                    <span>{ format!("{}/{}", state.current_round, state.rounds) }</span>
+                    <span class="roundTime">{ format!("{}:{:02}", self.round_time.minutes, self.round_time.seconds) }</span>
                 </div>
-                <div class="timerDisplay" id="timerDisplay">{ format!("{}:{:02}.{}", state.current_time.minutes, state.current_time.seconds, state.current_time.tenths) }</div>
+                <div class="timerDisplay" id="timerDisplay">
+                    { format!("{}:{:02}.{}", state.current_time.minutes, state.current_time.seconds, state.current_time.tenths) }
+                </div>                
                 <div id="buttonDisplay">
-                <button aria-label="Start" onclick={ start } id="startButton">{ "Start" }</button>
-                <button aria-label="Stop" onclick={ stop } id="stopButton">{ "Stop" }</button>
-                <button aria-label="Reset" onclick={ reset } id="resetButton">{ "Reset" }</button>
-                <button aria-label="Decrement Round" onclick={ on_subtract_round } id="decrementRoundButton">{ "-Round" }</button>
-                <button aria-label="Increment Round" onclick={ on_add_round } id="incrementRoundButton">{ "+Round" }</button>
-                <button aria-label="Decrement 15" onclick={ on_subtract_quarter } id="decrementQuarterButton">{ "-15" }</button>
-                <button aria-label="Increment 15" onclick={ on_add_quarter } id="incrementQuarterButton">{ "+15" }</button>
-                <button aria-label="Decrement Second" onclick={ on_subtract_second } id="decrementSecondButton">{ "-1" }</button>
-                <button aria-label="Increment Second" onclick={ on_add_second } id="incrementSecondButton">{ "+1" }</button>
+                    <button aria-label="Start" onclick={ start } id="startButton">{ "Start" }</button>
+                    <button aria-label="Start" onclick={ stop } id="stopButton">{ "Pause" }</button>
+                    <button aria-label="Reset" onclick={ reset } id="resetButton">{ "Reset" }</button>
+                    <button aria-label="Decrement Round" onclick={ on_subtract_round } id="decrementRoundButton">{ "-Round" }</button>
+                    <button aria-label="Increment Round" onclick={ on_add_round } id="incrementRoundButton">{ "+Round" }</button>
+                    <button aria-label="Decrement 15" onclick={ on_subtract_quarter } id="decrementQuarterButton">{ "-15" }</button>
+                    <button aria-label="Increment 15" onclick={ on_add_quarter } id="incrementQuarterButton">{ "+15" }</button>
+                    <button aria-label="Decrement Second" onclick={ on_subtract_second } id="decrementSecondButton">{ "-1" }</button>
+                    <button aria-label="Increment Second" onclick={ on_add_second } id="incrementSecondButton">{ "+1" }</button>
                 </div>
                 <h5><a href="https://github.com/jac18281828/emomtimer">{ "GitHub" }</a></h5>
                 </div>

diff --git 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;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,3 +21,4 @@ RUN cargo clippy --all-features --no-deps
		RUN cargo test

		CMD trunk build --release