Merge pull request #47 from wildjames/dev

Mobile version partially implemented

Author: wildjames

todoqueue_frontend/src/App.css

@@ -10,4 +10,3 @@ h1 {
     color: #333;
     text-align: left;
 }
-

todoqueue_frontend/src/App.js

@@ -16,7 +16,7 @@ import { fetchHouseholds } from './api/households';
 import { Navigation } from './components/navbar/navigation';
 import { ResetPassword } from './components/resetPassword';
 import { SignUp } from './components/signup';
-import { ManageHouseholds } from './households/households';
+import { ManageHouseholds } from './components/households/households';
 
 
 const App = () => {
@@ -38,12 +38,12 @@ const App = () => {
       const fetchedHouseholds = await fetchHouseholds();
 
       setHouseholds(fetchedHouseholds);
-      
+
       if (selectedHousehold === null && fetchedHouseholds.length === 1) {
         console.log("Setting selected household to: ", fetchedHouseholds[0].id);
         setSelectedHousehold(fetchedHouseholds[0].id);
       }
-    
+
     } catch (error) {
       console.error("An error occurred while fetching data:", error);
     }

todoqueue_frontend/src/components/ConfirmRegistration.css

@@ -28,4 +28,9 @@
     top: calc(50px + 2.5em);
     width: 30%;
     font-family: 'Arial', sans-serif;
+}
+
+.confirm-registration-heading {
+    margin-left: "0px"; 
+    text-align: "center" 
 }

todoqueue_frontend/src/components/ConfirmRegistration.js

@@ -8,7 +8,7 @@ const ConfirmRegistration = () => {
         <div className="ConfirmRegistration">
 
             <div className="confirm-registration-container">
-                <h1 style={{ marginLeft: "0px", textAlign: "center" }}>Account activated!</h1>
+                <h1 className="confirm-registration-heading">Account activated!</h1>
                 <h3>You many now log in.</h3>
             </div>
 

todoqueue_frontend/src/households/households.css renamed to todoqueue_frontend/src/components/households/households.css

@@ -2,25 +2,23 @@
     text-align: center;
     font-family: 'Arial', sans-serif;
     display: block;
-    width: 40vw;
-    font-family: 'Arial', sans-serif;
+    width: 90vw;
     margin: calc(56px + 3vh) auto;
 }
 
 .household-wrapper {
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
     align-items: center;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 8px;
     margin-top: 10px;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 .household-name {
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     font-weight: bold;
 }
 
@@ -35,15 +33,31 @@
 }
 
 .household-user-name {
-    padding-left: 2rem;
     font-weight: normal;
+    padding-left: 2rem;
     font-size: 1.2rem;
 }
 
 .household-user-content {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
     background-color: #e8e8e8;
     border-radius: 8px;
+}
+
+/* Media query for larger screens */
+@media (min-width: 768px) {
+    .Households {
+        width: 40vw;
+    }
+
+    .household-wrapper {
+        flex-direction: row;
+    }
+
+    .household-name {
+        font-size: 1.5rem;
+    }
 }

todoqueue_frontend/src/households/households.js renamed to todoqueue_frontend/src/components/households/households.js

@@ -1,19 +1,20 @@
 import { useEffect, useState, useRef } from "react";
-import useAuthCheck from '../hooks/authCheck';
+import useAuthCheck from '../../hooks/authCheck';
 
-import Spinner from '../components/spinner/Spinner';
-import AlertMessage from "../components/popups/AlertPopup";
+import Spinner from '../spinner/Spinner';
+import AlertMessage from "../popups/AlertPopup";
+
+import { createHousehold, deleteHousehold } from '../../api/households';
+import HouseholdDetailsPopup from "../popups/HouseholdDetailsPopup";
 
-import { createHousehold, deleteHousehold } from '../api/households';
-import HouseholdDetailsPopup from "../components/popups/HouseholdDetailsPopup";
 import './households.css';
+import '../../utils/inputs.css';
 
 export const ManageHouseholds = ({ households, setShowHouseholdSelector }) => {
     const [selectedHousehold, setSelectedHousehold] = useState(null);
 
     const [name, setName] = useState("");
 
-    const [showSpinner, setShowSpinner] = useState(false);
     const [errorMessage, setErrorMessage] = useState("");
 
     const PopupType = {
@@ -36,10 +37,8 @@ export const ManageHouseholds = ({ households, setShowHouseholdSelector }) => {
         console.log("Creating household:", name);
         const promise = createHousehold(name);
 
-        setShowSpinner(true);
         setErrorMessage("");
         const data = await promise;
-        setShowSpinner(false);
         setName("");
 
         if (data.error) {
@@ -54,10 +53,8 @@ export const ManageHouseholds = ({ households, setShowHouseholdSelector }) => {
         console.log("Deleting household:", id);
         const promise = deleteHousehold(id);
 
-        setShowSpinner(true);
         setErrorMessage("");
         const data = await promise;
-        setShowSpinner(false);
 
 
         if (data.error) {
@@ -105,6 +102,11 @@ export const ManageHouseholds = ({ households, setShowHouseholdSelector }) => {
 
             <h2>Manage Households</h2>
 
+            {
+                errorMessage !== '' &&
+                <AlertMessage message={errorMessage} />
+            }
+
             {
                 (() => {
                     switch (currentPopup) {
@@ -151,13 +153,6 @@ export const ManageHouseholds = ({ households, setShowHouseholdSelector }) => {
                 ))}
             </div>
 
-            {
-                errorMessage !== '' &&
-                <AlertMessage message={errorMessage} />
-            }
-
-            {showSpinner && <Spinner />}
-
         </div>
     );
 

todoqueue_frontend/src/components/login/Login.css

@@ -1,6 +1,36 @@
-
 .todoqueue-auth-form {
-    max-width: 400px;
-    margin: 10% auto;
+  max-width: 400px;
+  margin: 80px auto;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Styles for tablets and larger mobile devices */
+@media (max-width: 768px) {
+  .todoqueue-auth-form {
+      max-width: 350px;
+      margin: 80px auto;
+  }
+}
+
+/* Styles for smaller mobile devices */
+@media (max-width: 480px) {
+  .todoqueue-auth-form {
+      max-width: 300px;
+      margin: 80px auto;
   }
-  
+}
+
+/* Additional styles to make the form elements look better on mobile devices */
+.form-control {
+  font-size: 16px; /* Larger font size for better readability on small screens */
+}
+
+.button, .button-secondary {
+  font-size: 16px; /* Larger font size for better tap targets */
+  padding: 10px 20px; /* Increased padding for better touch experience */
+}
+
+.Auth-form-title {
+  font-size: 24px; /* Adjust the title size for smaller screens */
+}

todoqueue_frontend/src/components/navbar/navigation.css

@@ -10,10 +10,27 @@
 .navbar-center-panel {
     display: flex;
     align-items: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+}
+
+/* Adjustments for smaller screens (less than 800px) */
+@media (max-width: 800px) {
+    .navbar-center-panel {
+        margin-top: 10px;
+        /* Add some space above the household selector */
+    }
+}
+
+/* Adjustments for larger screens (more than 800px) */
+@media (min-width: 800px) {
+    .navbar-center-panel {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+    }
 }
 
 .fullscreen-icon {
@@ -27,7 +44,7 @@
 }
 
 .household-select {
-    width: 20vw;
+    width: 15rem;
     padding: 3px;
     border: 1px solid #8d8d8d;
     border-radius: 5px;
@@ -48,6 +65,34 @@
 }
 
 .navbar-link {
-    padding-left: 2vw !important;
-    padding-right: 2vw !important;
+    padding-left: 2vw;
+    padding-right: 2vw;
+}
+
+.navbar-logo-fullscreen-container {
+    display: flex;
+    align-items: center;
+}
+
+.navbar-links-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+/* Adjustments for large screens */
+@media (min-width: 800px) {
+    .navbar-links-container {
+        justify-content: space-between;
+    }
+}
+
+@media (max-width: 800px) {
+    .logout-link {
+        margin-top: 25px;
+    }
+}
+
+.burger-button {
+    margin-right: 0.75rem;
 }

todoqueue_frontend/src/components/navbar/navigation.js

@@ -40,47 +40,52 @@ export function Navigation({ households, selectedHousehold, setSelectedHousehold
         }
     }
 
-
     return (
         <div>
-            <Navbar className="navbar" bg="dark" variant="dark" sticky="left">
-                <Navbar.Brand href="/" style={{ paddingLeft: '4vw' }}>ToDoQu</Navbar.Brand>
+            <Navbar className="navbar" bg="dark" variant="dark" sticky="left" expand="lg">
+                <div className="navbar-logo-fullscreen-container">
+                    <Navbar.Brand href="/" style={{ paddingLeft: '1rem' }}>ToDoQu</Navbar.Brand>
 
-                {isAuth && (
-                    <Nav className="me-auto">
-                        <Nav.Link href="/" style={{ paddingLeft: '2vw', paddingRight: '2vw' }}>Tasks</Nav.Link>
-                        <Nav.Link href="/manage_households" style={{ paddingLeft: '2vw', paddingRight: '2vw' }}>Manage Households</Nav.Link>
-                    </Nav>
-                )}
+                    <button
+                        onClick={toggleFullScreen}
+                        className="fullscreen-icon"
+                    >
+                        <svg fill="#ffffff" height="20px" width="20px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 384.97 384.97" xmlSpace="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g id="Fullscreen_1_"> <path d="M372.939,216.545c-6.123,0-12.03,5.269-12.03,12.03v132.333H24.061V24.061h132.333c6.388,0,12.03-5.642,12.03-12.03 S162.409,0,156.394,0H24.061C10.767,0,0,10.767,0,24.061v336.848c0,13.293,10.767,24.061,24.061,24.061h336.848 c13.293,0,24.061-10.767,24.061-24.061V228.395C384.97,221.731,380.085,216.545,372.939,216.545z"></path> <path d="M372.939,0H252.636c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h91.382L99.635,268.432 c-4.668,4.668-4.668,12.235,0,16.903c4.668,4.668,12.235,4.668,16.891,0L360.909,40.951v91.382c0,6.641,5.39,12.03,12.03,12.03 s12.03-5.39,12.03-12.03V12.03l0,0C384.97,5.558,379.412,0,372.939,0z"></path> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </g> </g></svg>
+                    </button>
+                </div>
+
+                <Navbar.Toggle aria-controls="responsive-navbar-nav" className="burger-button" />
 
-                {isAuth && showHouseholdSelector && (
-                    <Nav className="mx-auto">
-                        <div className="navbar-center-panel">
-                            <select className="household-select" onChange={e => setSelectedHousehold(e.target.value === "Select a household" ? null : e.target.value)} value={selectedHousehold}>
-                                <option value={null}>Select a household</option>
-                                {households.map(household => (
-                                    <option key={household.id} value={household.id}>{household.name}</option>
-                                ))}
-                            </select>
-                            <button
-                                onClick={toggleFullScreen}
-                                className="fullscreen-icon"
-                            >
-                                <svg fill="#ffffff" height="20px" width="20px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 384.97 384.97" xmlSpace="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g id="Fullscreen_1_"> <path d="M372.939,216.545c-6.123,0-12.03,5.269-12.03,12.03v132.333H24.061V24.061h132.333c6.388,0,12.03-5.642,12.03-12.03 S162.409,0,156.394,0H24.061C10.767,0,0,10.767,0,24.061v336.848c0,13.293,10.767,24.061,24.061,24.061h336.848 c13.293,0,24.061-10.767,24.061-24.061V228.395C384.97,221.731,380.085,216.545,372.939,216.545z"></path> <path d="M372.939,0H252.636c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h91.382L99.635,268.432 c-4.668,4.668-4.668,12.235,0,16.903c4.668,4.668,12.235,4.668,16.891,0L360.909,40.951v91.382c0,6.641,5.39,12.03,12.03,12.03 s12.03-5.39,12.03-12.03V12.03l0,0C384.97,5.558,379.412,0,372.939,0z"></path> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </g> </g></svg>
-                            </button>
-                        </div>
+                <Navbar.Collapse id="responsive-navbar-nav">
+                    <Nav className="me-auto navbar-links-container">
+                        {isAuth && (
+                            <>
+                                <Nav.Link href="/" style={{ paddingLeft: '2vw', paddingRight: '2vw' }}>Tasks</Nav.Link>
+                                <Nav.Link href="/manage_households" style={{ paddingLeft: '2vw', paddingRight: '2vw' }}>Manage Households</Nav.Link>
+
+                                {showHouseholdSelector && (
+                                    <a className="navbar-center-panel">
+                                        <select className="household-select" onChange={e => setSelectedHousehold(e.target.value === "Select a household" ? null : e.target.value)} value={selectedHousehold}>
+                                            <option value={null}>Select a household</option>
+                                            {households.map(household => (
+                                                <option key={household.id} value={household.id}>{household.name}</option>
+                                            ))}
+                                        </select>
+                                    </a>
+                                )}
+                            </>
+                        )}
                     </Nav>
-                )}
 
-                <Nav className="me-right">
-                    {!isAuth && <Nav.Link href="/signup" className="navbar-link">Sign Up</Nav.Link>}
-                    {isAuth ?
-                        <Nav.Link href="/logout" className="navbar-link">Log Out</Nav.Link> :
-                        <Nav.Link href="/login" className="navbar-link">Login</Nav.Link>
-                    }
-                </Nav>
+                    <Nav className="me-right navbar-links-container">
+                        {!isAuth && <Nav.Link href="/signup" className="navbar-link">Sign Up</Nav.Link>}
+                        {isAuth ?
+                            <Nav.Link href="/logout" className="navbar-link logout-link">Log Out</Nav.Link> :
+                            <Nav.Link href="/login" className="navbar-link">Login</Nav.Link>
+                        }
+                    </Nav>
+                </Navbar.Collapse>
             </Navbar>
         </div>
-
     );
 }