added very small changes to help make filters page mobile friendly, a…

…dded hover text on display icons, and added space between pruning months
ayanahye · Nov 24, 2023 · 08eeabb · 08eeabb
1 parent 135d2f3
commit 08eeabb
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 16 deletions.
diff --git a/app/components/plantIcons.tsx b/app/components/plantIcons.tsx
@@ -19,28 +19,28 @@ interface PlantIconsProps {
 const PlantIcons: React.FC<PlantIconsProps> = ({plantDetail}) => (
     <div className={`card-text ${styles.plantIco}`}>
         {plantDetail.poisonous_to_humans === 1 && (
-            <Image src="/images/warning-icon.webp" alt="danger" width={50} height={50}/>
+            <Image src="/images/warning-icon.webp" alt="danger" width={50} height={50} title="Danger"/>
         )}
         {plantDetail.drought_tolerant && (
-            <Image src="/images/desert.svg" alt="drought_tolerant" width={55} height={55}/>
+            <Image src="/images/desert.svg" alt="drought_tolerant" width={55} height={55} title="Drought Tolerant"/>
         )}
         {plantDetail.indoor && (
-            <Image src="/images/indoor.svg" alt="indoor" width={50} height={50}/>
+            <Image src="/images/indoor.svg" alt="indoor" width={50} height={50} title="Indoor"/>
         )}
         {plantDetail.flowers && (
-            <Image src="/images/flower.svg" alt="flowers" width={50} height={50}/>
+            <Image src="/images/flower.svg" alt="flowers" width={50} height={50} title="Flowers"/>
         )}
         {plantDetail.leaf && (
-            <Image src="/images/leaf.svg" alt="leaf" width={50} height={50}/>
+            <Image src="/images/leaf.svg" alt="leaf" width={50} height={50} title="Leaf"/>
         )}
         {(plantDetail.edible_fruit || plantDetail.edible_leaf) && (
-            <Image src="/images/apple.svg" alt="edible" width={50} height={50}/>
+            <Image src="/images/apple.svg" alt="edible" width={50} height={50} title="Edible"/>
         )}
         {plantDetail.medicinal && (
-            <Image src="/images/medicinal.svg" alt="medicinal" width={50} height={50}/>
+            <Image src="/images/medicinal.svg" alt="medicinal" width={50} height={50} title="Medicinal"/>
         )}
         {plantDetail.tropical && (
-            <Image src="/images/rare.webp" alt="rare" width={50} height={50}/>
+            <Image src="/images/rare.webp" alt="rare" width={50} height={50} title="Rare"/>
         )}
     </div>
 );

diff --git a/app/filtering/Filter.css b/app/filtering/Filter.css
@@ -6,7 +6,7 @@
     max-height: 100vh;
     overflow-y: auto;
     background-color: white;
-    padding: 200px;
+    padding: 50px 200px;
 }
 
 .filterPart {
@@ -15,7 +15,7 @@
     align-items: left;
     justify-content: right;
     /* width: 185em; */
-    padding: 20px;
+    padding: 0px 20px;
 
 }
 
@@ -24,7 +24,7 @@
     background-color: rgb(235, 249, 235);
     color:black;
     flex: 1;
-    font-size: 50px;
+    font-size: 25px;
     text-align: left;
     border:none;
     padding:0;
@@ -51,7 +51,7 @@
     padding-top: 20px;
     overflow: auto;
     justify-content: center;
-    font-size: 60px;
+    font-size: 25px;
 }
 .filterBlock {
     height: 400px;
@@ -75,7 +75,7 @@
 /* name of filter */
 .right-align {
     text-align: start;
-    font-size: 35px;
+    font-size: 25px;
 }
 
 
@@ -197,3 +197,61 @@ details {
     justify-content: space-evenly;
 
 }
+
+
+
+@media (max-width: 850px) {
+    .main-filter {
+        padding: 20px; 
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .filterPart {
+        flex-direction: column;
+    }
+
+    #full-width {
+        font-size: 20px; 
+    }
+
+    .filterBlock {
+        width: 100%; 
+        border-radius: 0; 
+        padding: 20px; 
+        margin: 0; 
+    }
+
+    .scroll-object1 {
+        width: 100%; 
+        border-radius: 0; 
+    }
+
+    .information {
+        font-size: 20px; /* Adjust font size for smaller screens */
+        padding: 10px; /* Adjust padding for smaller screens */
+        margin: 0;
+        width: 95vw;
+
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+    .filterBlock {
+        width: 92vw;
+        margin: 0;
+        text-align: center;
+    }
+
+    #img-b {
+        width: 92vw;
+    }
+}
+
diff --git a/app/filtering/filter.jsx b/app/filtering/filter.jsx
@@ -133,7 +133,8 @@ export default function Filter(props) {
             <h3 style={{paddingBottom: '10px'}}>{props.speciesList.common_name || "No name yet"}</h3>
 
             <div class = "container">
-            <Image alt="backup" src={props.speciesList.default_image.regular_url} class="d-block w-1000 l-1000" height={400} width={400} style={{ border: '5px solid #000' , borderRadius: '15px'}}/>
+
+            <Image id="img-b" alt="backup" src={props.speciesList.default_image.regular_url} class="d-block w-1000 l-1000" height={400} width={400} style={{ border: '5px solid #000' , borderRadius: '15px'}}/>
 
 
             <div className="filterPart">
@@ -182,7 +183,7 @@ export default function Filter(props) {
 
 
                                 {props.speciesList["pruning_month"] && (
-                                <span>The best month to prune the plant is {props.speciesList["pruning_month"]} and </span>
+                                 <span>The best month to prune the plant is{" "} {props.speciesList["pruning_month"].join(", ")} and{" "}</span>
                                 )}
 
 

diff --git a/app/globals.css b/app/globals.css
@@ -118,4 +118,11 @@ body > .navbar {
 }
 .nav-item:hover .nav-link {
         background-color:#b9ffb4;
-      }
+      }
+
+
+@media (max-width: 600px) {
+        .navbar-nav .nav-link {
+                width: 100%; /* Make the navbar links take up the full width */
+            }
+}