design totdo page

seangah8 · Dec 25, 2024 · 6e6245c · 6e6245c
1 parent 6672886
commit 6e6245c
Show file tree

Hide file tree

Showing 11 changed files with 350 additions and 33 deletions.
diff --git a/assets/css/view/style.css b/assets/css/view/style.css
diff --git a/assets/css/view/style.css.map b/assets/css/view/style.css.map
diff --git a/assets/scss/setup/_variables.scss b/assets/scss/setup/_variables.scss
@@ -1,2 +1,6 @@
-$clr1: rgb(161, 161, 234);
-$clr2:rgb(234, 161, 161);
+$clr1: rgb(231, 136, 21);
+$clr2:rgb(34, 34, 34);
+$clr3: rgb(84, 84, 84);
+$clr4: rgb(64, 64, 64);
+$clr5: rgb(40, 40, 40);
+$clr6: rgb(186, 122, 45);
diff --git a/assets/scss/view/style.scss b/assets/scss/view/style.scss
@@ -1,6 +1,170 @@
+@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Gravitas+One&family=Knewave&family=Pacifico&family=Yellowtail&display=swap');
 @import "../setup/variables";
 
+body{
+    font-family: Audiowide;
+    color: $clr1;
+    background-color: $clr2;
+}
 
+.todo-index{
+    display: grid;
+    grid-template-columns: 3fr 2fr;
+
+    .todos{
+        display: grid;
+
+        .todo-filter{
+
+            font-size: 1.5rem;
+            color: $clr2;
+            background-color: $clr1;
+            padding: 10px;
+
+            select{
+                cursor: pointer;
+                font-size: 1.5rem;
+                font-family: Audiowide;
+                color: $clr2;
+                background-color: $clr1;
+                border: solid $clr2 2px;
+                border-radius: 10px;
+            }
+        }
+
+        .add-todo{
+            cursor: pointer;
+            width: 4vw;
+            height: 4vw;
+            border: none;
+            border-radius: 50%;
+            color: $clr1;
+            background-color: $clr4;
+            font-size: 3.5rem;
+
+            &:hover{
+                background-color: $clr3;
+            }
+        }
+
+        .data-table{
+            font-size: 1.25rem;
+            border: none;
+
+
+            td {
+                border: solid $clr3 1px;
+                border-left: none;
+                border-right: none;
+                border-top: none;
+                height: 50px; 
+            }
+
+            .symbol{
+                text-align: center;
+                i{
+                    cursor: pointer;
+                    &:hover{
+                        color: $clr6;
+                    }
+                }
+            }
+
+            .importance {
+                width: 20%;
+                i{
+                    margin-left: 10px;
+                }
+
+            }
+
+            .txt{
+                width: 70%;
+            }
+
+            .data-table-row-edit{
+                background-color: $clr4;
+                height: 100%;
+                align-content: center;
+
+                input, select, button{
+                cursor: pointer;
+                font-size: 1.25rem;
+                font-family: Audiowide;
+                color: $clr2;
+                background-color: $clr1;
+                border: solid $clr2 2px;
+                border-radius: 5px;
+                margin-right: 10px;
+                }
+
+                button{
+                    color: $clr1;
+                    background-color: $clr4;
+                    border-color: $clr1;
+                }
+            }
+        }
+
+    }
+
+    .dashboard{
+        position: relative;
+        h2{
+            justify-self: center;
+        }
+        .dashboard-and-title{
+            position: fixed;
+            top:5vh;
+        }
+    }
+    .chart{
+        display: table;
+        table-layout: fixed;
+        width: 60%;
+        max-width: 700px;
+        height: 300px;
+        margin: 0 auto;
+        margin-bottom: 2em;
+        background-image: linear-gradient(to top, $clr4, rgba(0, 0, 0, 0) 5%);
+        background-size: 100% 50px;
+        background-position: left top;
+
+        li{
+            position: relative;
+            display: table-cell;
+            vertical-align: bottom;
+            height: 200px;
+            text-align: center;
+        }
+
+        span{
+            justify-self: center;
+            margin: 0px;
+            width: 5vw;
+            display: block;
+            color: $clr2;
+            background-color: $clr1;
+            animation: draw 1s ease-in-out;
+
+
+
+
+            &:before{
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 100%;
+                padding-top: 5px 1em 0;
+                text-align: center;
+                content: attr(title);
+                color: $clr1;
+            }
+        }
+
+    }
+
+}
 
 
 

diff --git a/cmps/Dashboard.jsx b/cmps/Dashboard.jsx
@@ -15,8 +15,10 @@ export function Dashboard({todos}) {
 
     return (
         <section className="dashboard">
-            <h2>Dashboard - By Importance</h2>
-            <Chart data={importanceStats} />
+            <div className="dashboard-and-title">
+                <h2>Dashboard - By Importance</h2>
+                <Chart data={importanceStats} />
+            </div>
         </section>
     )
 }
diff --git a/cmps/TodoFilter.jsx b/cmps/TodoFilter.jsx
@@ -21,7 +21,6 @@ export function TodoFilter({ filterBy, onSetFilterBy }) {
     const { orderBy } = filterByToEdit
     return (
         <section className="todo-filter">
-            <h2>Filter Todos</h2>
             <label htmlFor="order-by">Order By: </label>
             <select id="order-by" value={orderBy} name="orderBy" onChange={handleChange}>
                 <option value={'date'}>date</option>

diff --git a/cmps/data-table/DataTable.jsx b/cmps/data-table/DataTable.jsx
@@ -2,14 +2,6 @@ import { DataTableRow } from "./DataTableRow.jsx"
 
 export function DataTable({ todos, onDoneTodo, onSetTodo }) {
     return <table border="1" className="data-table">
-        <thead>
-            <tr>
-                <th>Text</th>
-                <th>Importance</th>
-                <th>Edit</th>
-                <th>IsDone</th>
-            </tr>
-        </thead>
         <tbody>
             {todos.map(todo =>
                 <DataTableRow