galleryImages update done and work in frontend; b00tc4mp#160

GoteoMamez · Sep 2, 2024 · 0f6bc18 · 0f6bc18
1 parent 1da6ec2
commit 0f6bc18
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 7 deletions.
diff --git a/staff/mateo-gomez/project/app/src/components/view/components/Header.css b/staff/mateo-gomez/project/app/src/components/view/components/Header.css
@@ -11,5 +11,5 @@
     box-sizing: content-box;
     padding-right: 5vh;
     padding-left: 1vh;
-    z-index: 100;
+    z-index: 100000;
 }
diff --git a/staff/mateo-gomez/project/app/src/components/view/components/LocationFilter.css b/staff/mateo-gomez/project/app/src/components/view/components/LocationFilter.css
@@ -5,4 +5,48 @@
     margin-left: 70%;
     margin-top: 16vh;
     font-family: "Langar", system-ui;
+    display: inline-block;
+}
+
+.LocationsList {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: rgba(0, 0, 0, 0.381);
+    border: 1px solid #dddddd34;
+    border-radius: 4px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
+}
+
+.LocationsList li {
+    padding: 0px;
+    cursor: pointer;
+    text-align: left;
+}
+
+.LocationsList li.selected {
+    background-color: #f0f0f082;
+}
+
+@media (max-width: 600px) {
+    .LocationsList {
+        max-width: 95vw;
+
+    }
+}
+
+.CityFilter .LocationsList li {
+    padding: 4px !important;
+    margin: 2px 0 !important;
+}
+
+.LocationButton {
+    padding: 0;
+    margin: 0;
 }
diff --git a/staff/mateo-gomez/project/app/src/components/view/components/LocationFilter.jsx b/staff/mateo-gomez/project/app/src/components/view/components/LocationFilter.jsx
@@ -26,14 +26,14 @@ function LocationFilter({ posts, onFilteredChange }) {
                 <span className="DropdownIcon">{isComponentOpen ? '▲' : '▼'}</span>
             </div>
             {isComponentOpen && (
-                <ul>
+                <ul className="LocationsList">
                     {locations.map((city, index) => (
                         <li
                             key={index}
                             className={selectedLocation === city ? 'selected' : ''}
                             onClick={() => handleLocationClick(city)}
                         >
-                            <Button>{city}</Button>
+                            <Button className='LocationButton'>{city}</Button>
                         </li>
                     ))}
                 </ul>

diff --git a/staff/mateo-gomez/project/app/src/components/view/components/PostListBoardSelection.css b/staff/mateo-gomez/project/app/src/components/view/components/PostListBoardSelection.css
@@ -6,7 +6,7 @@
     top: 0;
     width: 100%;
     background: black;
-    z-index: 100;
+    z-index: 100000;
     padding-top: 1vh;
     padding-bottom: 2vh;
     height: 5vh;

diff --git a/staff/mateo-gomez/project/app/src/components/view/components/UserProfile.jsx b/staff/mateo-gomez/project/app/src/components/view/components/UserProfile.jsx
@@ -40,9 +40,12 @@ function UserProfile({ userId, isOwnProfile }) {
     const handleUpdateGalleryImages = (event) => {
         event.preventDefault()
 
-        const target = event.target
+        const field = document.getElementById('newImage')
+
+        const newImage = field.value
+
+        console.log(newImage)
 
-        const newImage = target.galleryImages.value
 
         try {
             if (newImage) {
@@ -109,7 +112,7 @@ function UserProfile({ userId, isOwnProfile }) {
                     </div>
                     <Form onSubmit={handleUpdateGalleryImages} className='GalleryImageForm'>
                         <Field id="newImage" name="newImage" type='text' placeholder='Add new Image' value={newImage} ></Field>
-                        <Button type='button' onClick={handleUpdateGalleryImages} className='UpdateGalleryButton'>
+                        <Button className='UpdateGalleryButton'>
                             Save Gallery Images
                         </Button>
                     </Form>