minor changes to page layout

tomcollis · tomcollis · commit b8e07ecfec37 · 2025-01-25T21:02:22.000Z
diff --git a/public/main.js b/public/main.js
@@ -20,9 +20,9 @@ function updateTimer(minutes, seconds, timerElement, totalDuration) {
     const remainingTime = minutes * 60 + seconds;
     const remainingPercentage = (remainingTime / totalDuration) * 100;
     if (remainingPercentage <= 20) {
-        document.getElementById('pri-container').classList.add('warning');
+        document.querySelector('main').classList.add('warning');
     } else {
-        document.getElementById('pri-container').classList.remove('warning');
+        document.querySelector('main').classList.remove('warning');
     }
 }
 
diff --git a/public/styles.css b/public/styles.css
@@ -1,26 +1,47 @@
+/* Debug Start 
+* { outline: 1px solid red; }
+@media (min-width: 100vw) {
+    * {
+        background-color: rgba(255, 0, 0, 0.1);
+    }
+}
+ Debug End */
+
 body {
     font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden; /* Prevents horizontal scrolling */
+}
+main {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    height: 100vh;
-    margin: 0;
-    background-color: #f0f0f0;
-}
-#time-container {
-    text-align: center;
-    margin-bottom: 20px;
-}
-#pri-container {
+    justify-content: center;
     text-align: center;
-    min-width: 25%;
+    width: 25%;
+    max-width: 100vw;
     background-color: #ffffff;
     border-radius: 10px;
+    margin: 5% auto 0;
     padding: 2rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: background-color 0.3s ease;
 }
+footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: 0 auto;
+    padding: 5px;
+    width: 100%
+}
+#time-container {
+    text-align: center;
+    margin-bottom: 20px;
+}
 .timer-item.warning {
     background-color: #ffff99; /* Light yellow for warning state */
 }
@@ -48,6 +69,7 @@ h2 {
 }
 footer a {
     text-decoration: none;
+    margin: 0 10px
 }
 .next-button:hover {
     background-color: #218838;
@@ -56,39 +78,28 @@ footer a {
     background-color: #6c757d;
     cursor: not-allowed;
 }
-footer {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
 
 /* Mobile-specific styles */
 @media (max-width: 600px) {
-    body {
-        padding: 1rem;
-    }
-    #pri-container {
+    main {
         width: 100%;
+        margin: 0 auto;
+        box-shadow: none;
     }
     #next-item {
-        width: 100%;
+        width: 90%;
         padding: 1rem;
     }
 }
-
 /* Tablet-specific styles */
 @media (min-width: 601px) and (max-width: 1024px) {
-    body {
-        padding: 2rem;
-    }
-    #pri-container {
+    main {
         width: 75%;
+        margin: 0 auto;
+        box-shadow: none;
     }
     #next-item {
         width: 70%;
         padding: 1rem;
     }
-}
+}
diff --git a/views/timer.ejs b/views/timer.ejs
@@ -7,19 +7,18 @@
     <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
-    <div id="pri-container">
-        <div id="time-container"></div>
-        <button id="next-item" class="next-button">Next Item</button>
-    </div>
-    <script src="/main.js"></script>
-    <script>
-        const agendaItems = <%- JSON.stringify(agendaItems) %>;
-        const timeItems = <%- JSON.stringify(timeItems) %>;
-        let currentItemIndex = 0;
-        let currentInterval;
-
-        showNextItem();
-    </script>
+<main>
+    <div id="time-container"></div>
+    <button id="next-item" class="next-button">Next Item</button>
+</main>
+<script src="/main.js"></script>
+<script>
+    const agendaItems = <%- JSON.stringify(agendaItems) %>;
+    const timeItems = <%- JSON.stringify(timeItems) %>;
+    let currentItemIndex = 0;
+    let currentInterval;
+    showNextItem();
+</script>
 <footer>
     <a href="#">Link 1</a>
     <a href="#">Link 2</a>

Original file line number	Diff line number	Diff line change
`@@ -20,9 +20,9 @@ function updateTimer(minutes, seconds, timerElement, totalDuration) {`
`20`	`20`	`const remainingTime = minutes * 60 + seconds;`
`21`	`21`	`const remainingPercentage = (remainingTime / totalDuration) * 100;`
`22`	`22`	`if (remainingPercentage <= 20) {`
`23`		`- document.getElementById('pri-container').classList.add('warning');`
	`23`	`+ document.querySelector('main').classList.add('warning');`
`24`	`24`	`} else {`
`25`		`- document.getElementById('pri-container').classList.remove('warning');`
	`25`	`+ document.querySelector('main').classList.remove('warning');`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`