Merge branch 'ao994:main' into main

ak2466 · Apr 22, 2024 · 825f112 · 825f112
2 parents 533f47e + 7a771d9
commit 825f112
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/Code/plant-pals/profile_of_user/templates/search.html b/Code/plant-pals/profile_of_user/templates/search.html
@@ -10,23 +10,26 @@
 {% block body %} 
 <link rel="stylesheet" href="{% static '/profile_of_user/search.css' %}">
 
-
-    <form class = search-bar action="{% url 'Search' %}" method="POST">
+<!-- Search bar and search button -->
+<div class = "container-fluid d-flex justify-content-center">
+    <form class = "d-flex flex-column align-items-center" action="{% url 'Search' %}" method="POST">
         {% csrf_token %}
-        <input class="search" type="text" name="q" placeholder="Search">
-        <input type="submit" value="Submit">
+        <input class=" search form-control" type="search" name="q" placeholder="Search">
+        <input type="submit" value="Submit" class = "mx-auto">
     </form> 
+</div>
 
+<!-- results -->
 {% if search_result %}
-    <ul>
+    <ul class = "mt-3">
     {% for result in search_result %}
         <li class = 'result'>
-            <a href="{{ result.scientific_name }}/">{{ result.scientific_name }}</a>
+            <a href="{{ result.scientific_name }}/">{{ result.common_name }} ({{ result.scientific_name }})</a>
         </li>
     {% endfor %}
     </ul>
 {% else %}
-    <p>Sorry, that plant does not seem to be searchable.  Maybe one of those pesky zombies got to them.</p>
+    <p>Sorry, that plant does not seem to be searchable. Maybe one of those pesky zombies got to them.</p>
 {% endif %}
 
 {% endblock %}
diff --git a/Code/plant-pals/profile_of_user/templates/search_result.html b/Code/plant-pals/profile_of_user/templates/search_result.html
@@ -5,17 +5,18 @@
 
 {% block body %} 
 <link rel="stylesheet" href="{% static '/profile_of_user/search_result.css' %}">
+
 <div class = 'results'>
-    
-<p>Scientific Name: {{ plant.scientific_name }}</p>
-<p>Common Name: {{ plant.common_name }}</p>
-<p>Growth Habit: {{ plant.growth_habit }}</p>
-<p>Duration: {{ plant.duration }}</p>
-<p>Sun Requirements: {{ plant.sun_requirements }}</p>
-<p>Water: {{ plant.water }}</p>
-<p>Low Tempurature Threshold (F): {{ plant.temp_low_F }}</p>
-<p>High Tempurature Threshold (F):{{ plant.temp_high_F }}</p>
-<p>{{ plant.image }}</p>
+
+    <p>Scientific Name: {{ plant.scientific_name }}</p>
+    <p>Common Name: {{ plant.common_name }}</p>
+    <p>Growth Habit: {{ plant.growth_habit }}</p>
+    <p>Duration: {{ plant.duration }}</p>
+    <p>Sun Requirements: {{ plant.sun_requirements }}</p>
+    <p>Water: {{ plant.water }}</p>
+    <p>Low Tempurature Threshold (F): {{ plant.temp_low_F }}</p>
+    <p>High Tempurature Threshold (F): {{ plant.temp_high_F }}</p>
+    <img src="/media/{{plant.image}}" class = "img-fluid img-thumbnail rounded plant-picture" alt = "Picture of {{ plant.common_name }}.">
 
 </div>
 

diff --git a/Code/plant-pals/static/profile_of_user/search.css b/Code/plant-pals/static/profile_of_user/search.css
@@ -1,13 +1,15 @@
 @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
 
-body{
+body {
+  text-align: left;
+}
+
+.result{
   font-family: "Indie Flower", cursive;
   font-weight: 400;
   font-style: normal;
-    text-align: left;
-  }
-
-.result{
+  font-size: large;
+
   text-align: block;
   color:#16a085;
 }
@@ -24,8 +26,17 @@ input[type="submit"] {
     text-transform: uppercase;
     transition: 0.1s ease;
     cursor: pointer;
-    position: left;
-    left: 250px;
+    left:auto;
+
   }
 
-
+
+  .search-box
+{
+    text-align: center;
+}
+
+.search 
+{
+    max-width: 1000px;  
+}
diff --git a/Code/plant-pals/static/profile_of_user/search_result.css b/Code/plant-pals/static/profile_of_user/search_result.css
@@ -1,17 +1,21 @@
 @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
 
-body{
+.results{
   font-family: "Indie Flower", cursive;
   font-weight: 400;
   font-style: normal;
-    text-align: center;
-    color: forestgreen
-  }
-
-.results{
+  color: forestgreen;
+  text-align: center;
   font-size: 20px; 
 }
 
+.plant-picture
+{
+  max-width: 400px;
+  max-height: 400px;
+
+}
+