Merge pull request #82 from wildjames/dev

UI Tweaks on mobile

todoqueue_frontend/src/App.js

@@ -79,7 +79,13 @@ const App = () => {
         <Routes>
           <Route path="/" element={<About />} />
           <Route path="/tasks" element={
-            <Tasks selectedHousehold={selectedHousehold} showSelectedHouseholdSelector={showHouseholdSelector} setShowHouseholdSelector={setShowHouseholdSelector} />} />
+            <Tasks
+              households={households}
+              selectedHousehold={selectedHousehold}
+              setSelectedHousehold={setSelectedHousehold}
+              showSelectedHouseholdSelector={showHouseholdSelector}
+              setShowHouseholdSelector={setShowHouseholdSelector}
+            />} />
           <Route path="/help" element={<Help />} />
           <Route path="/login" element={<Login setShowHouseholdSelector={setShowHouseholdSelector} />} />
           <Route path="/logout" element={<Logout setShowHouseholdSelector={setShowHouseholdSelector} />} />
@@ -88,7 +94,12 @@ const App = () => {
           <Route path="/registration_failed" element={<FailedRegistration />} />
           <Route path="/forgot_password" element={<ForgotPassword setShowHouseholdSelector={setShowHouseholdSelector} />} />
           <Route path="/reset_password/:uid/:token" element={<ResetPassword setShowHouseholdSelector={setShowHouseholdSelector} />} />
-          <Route path="/manage_households" element={<ManageHouseholds households={households} updateHouseholds={updateHouseholds} setShowHouseholdSelector={setShowHouseholdSelector} />} />
+          <Route path="/manage_households" element={
+            <ManageHouseholds
+              households={households}
+              updateHouseholds={updateHouseholds}
+              setShowHouseholdSelector={setShowHouseholdSelector}
+            />} />
         </Routes>
       </div>
     </BrowserRouter>

todoqueue_frontend/src/components/navbar/HouseholdSelector.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function HouseholdSelector({ households, selectedHousehold, setSelectedHousehold }) {
+    return (
+        <div className="navbar-center-panel">
+            <select
+                id="household-select"
+                className="household-select"
+                onChange={e => setSelectedHousehold(e.target.value)}
+                value={selectedHousehold}
+                aria-label="Select a household"
+            >
+                <option value="" disabled hidden>Select a household</option>
+                {households.map(household => (
+                    <option key={household.id} value={household.id}>{household.name}</option>
+                ))}
+            </select>
+        </div>
+    );
+}

todoqueue_frontend/src/components/navbar/navigation.css

@@ -15,23 +15,6 @@
     gap: 20px;
 }
 
-/* Adjustments for smaller screens (less than 800px) */
-@media (max-width: 1000px) {
-    .navbar-center-panel {
-        margin-top: 15px;
-        margin-bottom: 15px;
-    }
-}
-
-/* Adjustments for larger screens (more than 800px) */
-@media (min-width: 1000px) {
-    .navbar-center-panel {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translateX(-50%) translateY(-50%);
-    }
-}
 
 .fullscreen-icon {
     display: flex;
@@ -80,20 +63,38 @@
     flex-wrap: wrap;
 }
 
+/* Adjustments for smaller screens (less than 800px) */
+@media (max-width: 992px) {
+    .navbar-center-panel {
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+}
+
+/* Adjustments for larger screens (more than 800px) */
+@media (min-width: 992px) {
+    .navbar-center-panel {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+    }
+}
+
 /* Adjustments for large screens */
-@media (min-width: 1000px) {
+@media (min-width: 992px) {
     .navbar-expand-lg .navbar-toggler {
         display: none;
     }
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 992px) {
     .navbar-links-container {
         justify-content: space-between;
     }
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 992px) {
     .logout-link {
         margin-top: 25px;
     }
@@ -103,7 +104,7 @@
     margin-right: 0.75rem;
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 992px) {
     .navbar-links-right {
         margin-right: 1em;
     }

todoqueue_frontend/src/components/navbar/navigation.js

@@ -1,5 +1,6 @@
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
+import { HouseholdSelector } from './HouseholdSelector';
 import React, { useState, useEffect, useRef } from 'react';
 
 // My component CSS
@@ -89,20 +90,12 @@ export function Navigation({ households, selectedHousehold, setSelectedHousehold
                                 <Nav.Link href="/manage_households" style={{ paddingLeft: '2vw', paddingRight: '2vw' }}>Manage Households</Nav.Link>
 
                                 {showHouseholdSelector && (
-                                    <div className="navbar-center-panel">
-                                        <select
-                                            id="household-select"
-                                            className="household-select"
-                                            onChange={e => setSelectedHousehold(e.target.value)}
-                                            value={selectedHousehold}
-                                            aria-label="Select a household"
-                                        >
-                                            <option value="" disabled hidden>Select a household</option>
-                                            {households.map(household => (
-                                                <option key={household.id} value={household.id}>{household.name}</option>
-                                            ))}
-                                        </select>
-                                    </div>
+                                    // Replace this part with the HouseholdSelector component
+                                    <HouseholdSelector 
+                                        households={households} 
+                                        selectedHousehold={selectedHousehold} 
+                                        setSelectedHousehold={setSelectedHousehold} 
+                                    />
                                 )}
 
                             </>

todoqueue_frontend/src/components/popups/CreateFlexibleTaskPopup.js

@@ -17,10 +17,16 @@ const CreateFlexibleTaskPopup = React.forwardRef((props, ref) => {
         max_interval_minutes: 0,
     });
     const [inputError, setInputError] = useState(false);
+    const [enableSubmit, setEnableSubmit] = useState(true);
 
 
     const handleCreateTask = async (event) => {
         event.preventDefault();
+        if (!enableSubmit) {
+            return
+        }
+
+        setEnableSubmit(false);
 
         // Convert max_interval and min_interval to minutes
         const max_interval_in_minutes =
@@ -75,6 +81,7 @@ const CreateFlexibleTaskPopup = React.forwardRef((props, ref) => {
             min_interval,
             newTask.description,
         );
+        setEnableSubmit(true);
         if (response.status !== 201) {
             console.error("Error creating task. Response:", response.data);
             setInputError(true);
@@ -97,6 +104,7 @@ const CreateFlexibleTaskPopup = React.forwardRef((props, ref) => {
 
 
     const handleCreateInputChange = (e) => {
+        setEnableSubmit(true);
         const { name, value } = e.target;
 
         console.log("Setting new task in handleCreateInputChange");
@@ -131,6 +139,7 @@ const CreateFlexibleTaskPopup = React.forwardRef((props, ref) => {
 
     const handlePopupTypeChange = (e) => {
         const selectedType = e.target.value;
+        setEnableSubmit(true);
         props.setCurrentPopup(selectedType);
     };
 
@@ -224,7 +233,7 @@ const CreateFlexibleTaskPopup = React.forwardRef((props, ref) => {
                     </div>
                     <div>
                         <button
-                            className={`button create-button ${inputError ? "disabled" : "enabled"}`}
+                            className={`button create-button ${!inputError && enableSubmit ? "enabled" : "disabled"}`}
                             onClick={handleCreateTask}
                         >
                             Create Task

todoqueue_frontend/src/components/popups/CreateOneShotTaskPopup.js

@@ -15,10 +15,16 @@ const CreateOneShotTaskPopup = React.forwardRef((props, ref) => {
         description: '',
     });
     const [inputError, setInputError] = useState(false);
+    const [enableSubmit, setEnableSubmit] = useState(true);
 
 
     const handleCreateTask = async (event) => {
         event.preventDefault();
+        if (!enableSubmit) {
+            return
+        }
+
+        setEnableSubmit(false);
 
         // Convert time_to_complete to minutes
         const time_to_complete_in_minutes =
@@ -69,6 +75,7 @@ const CreateOneShotTaskPopup = React.forwardRef((props, ref) => {
             time_to_complete,
             newTask.description,
         );
+        setEnableSubmit(true);
         if (response.status !== 201) {
             console.error("Error creating one-shot task. Response:", response.data);
             setInputError(true);
@@ -95,17 +102,20 @@ const CreateOneShotTaskPopup = React.forwardRef((props, ref) => {
 
     const handleCreateInputChange = (e) => {
         const { name, value } = e.target;
+        setEnableSubmit(true);
         setNewTask((prevTask) => ({ ...prevTask, [name]: value }));
     };
 
 
     const handleDueBeforeChange = (e) => {
+        setEnableSubmit(true);
         setNewTask((prevTask) => ({ ...prevTask, due_before: e.target.checked }));
     };
 
 
     const handlePopupTypeChange = (e) => {
         const selectedType = e.target.value;
+        setEnableSubmit(true);
         props.setCurrentPopup(selectedType);
     };
 
@@ -199,7 +209,7 @@ const CreateOneShotTaskPopup = React.forwardRef((props, ref) => {
                     </div>
                     <div>
                         <button
-                            className={`button create-button ${inputError ? "disabled" : "enabled"}`}
+                            className={`button create-button ${!inputError && enableSubmit ? "enabled" : "disabled"}`}
                             onClick={handleCreateTask}
                         >
                             Create Task

todoqueue_frontend/src/components/popups/CreateScheduledTaskPopup.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import BasePopup from './BasePopup';
 import { createScheduledTask } from '../../api/tasks'; // Make sure to implement this function in your API
 import './popups.css';
@@ -15,9 +15,16 @@ const CreateScheduledTaskPopup = React.forwardRef((props, ref) => {
         months: "*",
     });
     const [inputError, setInputError] = useState(false);
+    const [enableSubmit, setEnableSubmit] = useState(true);
+
 
     const handleCreateTask = async (event) => {
         event.preventDefault();
+        if (!enableSubmit) {
+            return
+        }
+
+        setEnableSubmit(false);
 
         console.log("Checking inputs", newTask);
 
@@ -69,6 +76,7 @@ const CreateScheduledTaskPopup = React.forwardRef((props, ref) => {
             max_interval,
             newTask.description,
         );
+        setEnableSubmit(true);
 
         console.log("Created scheduled task. Response:", response_data);
         await props.fetchSetTasks();
@@ -90,6 +98,7 @@ const CreateScheduledTaskPopup = React.forwardRef((props, ref) => {
 
     const handleCreateInputChange = (e) => {
         const { name, value } = e.target;
+        setEnableSubmit(true);
 
         console.log("Setting new task in handleCreateInputChange");
         setNewTask((prevTask) => {
@@ -102,6 +111,7 @@ const CreateScheduledTaskPopup = React.forwardRef((props, ref) => {
 
     const handlePopupTypeChange = (e) => {
         const selectedType = e.target.value;
+        setEnableSubmit(true);
         props.setCurrentPopup(selectedType);
     };
 
@@ -213,7 +223,9 @@ const CreateScheduledTaskPopup = React.forwardRef((props, ref) => {
                     </div>
 
                     <div>
-                        <button className="button create-button" onClick={handleCreateTask}>
+                        <button
+                            className={`button create-button ${!inputError && enableSubmit ? "enabled" : "disabled"}`}
+                            onClick={handleCreateTask}>
                             Create Task
                         </button>
                     </div>

todoqueue_frontend/src/components/tasks/Tasks.css

@@ -21,6 +21,19 @@
     white-space: initial;
 }
 
+.empty-state.hide {
+    top: -300px;
+}
+
+.empty-state.show {
+    top: 100px;
+}
+
+.empty-state h3 {
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
 .arrow-up {
     width: 0;
     height: 0;
@@ -34,19 +47,6 @@
     margin-top: 20px;
 }
 
-.empty-state.hide {
-    top: -100px;
-}
-
-.empty-state.show {
-    top: 100px;
-}
-
-.empty-state h3 {
-    word-wrap: break-word;
-    word-break: break-word;
-}
-
 @keyframes bounce-select-prompt {
 
     0%,
@@ -122,15 +122,6 @@
     flex-shrink: 0;
 }
 
-.task-wrapper::after {
-    position: relative;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 1px;
-    background-color: lightgrey;
-}
-
 @media (max-width: 800px) {
     .Tasks .task-container {
         flex-direction: column;