Merge pull request #12 from acmucsd-projects/user-page

Finishing touches!

admin/meetings/07312024-midweek-meeting-3.md

@@ -0,0 +1,15 @@
+# [Team Name]: Sprint 2 Review <br> 07/31/2024 6:00pm - 7:00pm
+
+## Members Present
+- Vinod
+- Gowtham
+- Tia
+
+## Next Meeting: Monday, August 5, 2024
+- Since a few of us have finals on Saturday, we're shifting the meeting back to Monday, August 5, 2024.
+
+## Check In
+- More progress has been made with MongoDB.
+- Landing Page officially done (for now)
+- Other pages have been assigned.
+  - Please message in the Discord if you cannot work on your page! We'll adjust accordingly to help out!

source/css/index.css

@@ -1,8 +1,3 @@
-/*header>img{
-    margin-left: 0px;
-    border-radius: 0px;
-}*/
-
 .sign-up{
     background-color: rgba(254, 153, 32, 0.80);
     padding: 7.5px;
@@ -14,7 +9,7 @@
 
 }
 
-.links{
+.header-links{
     padding-left: 50px;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr; 

source/css/main.css

@@ -8,6 +8,16 @@
     /*font-family: "Sulphur Point", sans-serif;*/
     font-family: monospace;
     font-style: normal;
+    text-decoration: none;
+}
+
+a {
+    color: black;
+}
+
+a:visited {
+    color: black;
+    text-decoration: none;
 }
 
 html,
@@ -54,25 +64,22 @@ header {
         padding-left: 100px;
     }
 
-    /* This handles the class of "back" buttons in the headers. Home button on project.html and back button on notes.html */
-    .back {
-        &>i {
-            font-size: 2em;
-            font-weight: 700;
-            letter-spacing: 5px;
-            margin: 3px;
-            margin-left: 8px;
-            color: white;
-        }
-
-        &:hover {
-            opacity: 60%;
-        }
+    #home-button-logo:hover{
+            cursor:pointer;
+            opacity: 80%;
     }
 }
 
 @media screen and (max-width: 768px) {
     body {
         padding-top: 120px;
     }
+}
+
+.header-links{
+    padding-left: 50px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr; 
+    column-gap: 50px;
+    font-size: 165%;
 }

source/css/make-list.css

@@ -0,0 +1,261 @@
+
+/*Formatting for the text area*/
+/*#grocery-header{
+    background: #FC9E5F;    
+    border-radius: 10px;
+
+    padding: 9px;
+
+    color:rgb(128, 57, 9);
+
+    margin: 10px;
+}
+
+/*Changing the color of the text inside the text area
+::placeholder{
+    color:rgb(128, 57, 9);
+    font-size: 110%;
+    font-weight: bold;
+}*/
+
+.title{
+    display: flex;
+    justify-content: space-between; /* Aligns text left and buttons right */
+    align-items: center; /* Aligns text and buttons vertically at the same level */
+    padding: 10px; /* Optional: Adds padding around the title */
+}
+
+
+.list-name{
+    margin:0;
+}
+
+/*Formatting of the 'Add Item' and 'Finished with your list' buttons*/
+.next-page-buttons{
+    background: #7C9E57;
+    border-radius: 30px;
+
+    padding:10px;
+    margin:10px;
+
+    font-size: 110%;
+    font-weight: bold;
+
+    display:flex;
+    gap:10px;
+
+}
+
+/*Changing cursor visuals + opacity of 'add item' and 'finished with your list' buttons */
+.next-page-buttons:hover{
+    cursor:pointer;
+    opacity: 80%;
+}
+
+#editListBtn {
+    background-color: transparent; /* Dark Blue */
+    border: none;
+    font-size: large;
+
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.menuBTN {
+    background-color: #7c9e57; /* Green */
+    border: none;
+    padding: 5px 18px;
+    text-align: center;
+    text-decoration: none;
+    /* display: inline-block; */
+    font-size: 15px;
+    border-radius: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    /* float: right; */
+}
+
+.menuBTN:hover {
+    background-color: #4f6834; /* Darker Green */
+}
+
+/*formatting for the entirety of the 3-column display*/
+.information-holder{
+    display:grid;
+    grid-template-columns: 1fr 1fr 1fr;
+
+    background-color: rgb(225, 228, 207);
+
+    border-radius: 10px;
+
+    margin: 10px;
+}
+
+/*Including border between each column to determine placement - can take out if wanted*/
+.column1, .column2, .column3{
+    border-style: solid;
+    border-color: rgb(213, 215, 200);
+    border-radius: 10px;
+}
+
+/*Adjusting font weight/size of the list of items within 1st column*/
+.column1{
+    #item-list{
+        font-weight: bold;
+        font-size: 150%
+    }    
+}
+
+/*Overall formatting for 2nd column*/
+.column2{
+
+    /*Aligning the Name and Main Image to be in the center of the column*/
+    .align-images-center{
+        display: grid;
+        justify-content: center;
+        padding-bottom: 10px;
+
+        img{
+            border-radius: 10px;
+
+            width:50%;
+            height:auto;
+
+            justify-self: center;
+        }
+    }
+
+    h2{
+        margin: 10px;
+        font-size: 175%;
+    }
+
+}
+
+/*Formatting for the 3rd Column*/
+.column3{
+
+    /*Adjusting display of 'description' and 'nutrition facts' buttons*/
+    .fact-buttons{
+        display: flex;
+        justify-content: center;
+        margin:10px;
+
+        button{
+            border-style: none;
+
+            font-size: 130%;
+
+            background-color: rgb(206, 208, 192);
+
+            font-weight: bold;
+
+            padding: 10px;
+
+        }
+
+        #description-button{
+            border-top-left-radius: 20px;
+            border-bottom-left-radius: 20px;
+
+            background-color: rgb(173, 175, 161); /*keep this way so that when page loads, it looks like description button is automatically selected.*/
+        }
+
+        #nutrition-button{
+            border-top-right-radius: 20px;
+            border-bottom-right-radius: 20px;
+        }
+
+        button:hover{
+            cursor: pointer;
+            opacity: 80%;
+        }
+
+
+    }
+
+    #displayed-text{
+        margin: 10px;
+
+        font-size: 110%;
+    }
+
+}
+
+/*Formatting for the image slider in 2nd column*/
+.image-holder{
+    display: flex;
+
+    overflow:scroll;
+    width:auto;
+    height:auto;
+    border:1px solid rgb(241, 243, 227);
+    margin:10px;
+    background-color: rgb(241, 243, 227);
+
+    border-radius: 10px;
+
+    scroll-snap-type: x mandatory;
+
+    /*Makes sure all images inside slider have rounded border + equal space between each item*/
+    img{
+        border-radius: 10px;
+        margin: 10px;
+    }
+}
+
+/*Formatting for permanent scroller (1/4)*/
+.image-holder::-webkit-scrollbar{
+    width:10px;
+    scrollbar-width: thin;
+}
+
+/*Formatting for permanent scroller (2/4)*/
+.image-holder::-webkit-scrollbar-track{
+    background-color:#f1f1f1;
+}
+
+/*Formatting for permanent scroller (3/4)*/
+.image-holder::-webkit-scrollbar-thumb{
+    background-color: #bec7b6;
+}
+
+/*Formatting for permanent scroller (4/4)*/
+.image-holder::-webkit-scrollbar-thumb:hover{
+    background-color: #3f7c4a;
+}
+
+/*Making sure the images disappear once they "overflow"/are scrolled past + format of the actual image sizes*/
+.image-holder > img{
+    display: flex;
+
+    flex-shrink: 0;
+    width:20%;
+    height:auto;
+
+    scroll-snap-align:auto;
+    scroll-behavior:auto;
+}
+
+.extra-images:hover{
+    cursor:pointer;
+}
+
+.image-holder img{
+    transition: 1s ease;
+}
+
+.image-holder img:hover{
+    -webkit-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2);
+    transition: 1s ease;
+}
+
+
+.groceryItem:hover{
+    cursor:pointer;
+
+    background: transparent;
+    color: #69563b;
+}