Fixed delete button and adjusted styling on species editing page

routes/species_portal/species_editor.py

@@ -1,5 +1,5 @@
 from flask import render_template, Blueprint, request, redirect, url_for
-from database.db_commands import delete_species, get_species_by_id, update_species
+from database.db_commands import delete_species, get_species_by_id, update_species, get_species_by_name
 import uuid
 
 page = Blueprint("species_editor", __name__, url_prefix="/species/editor")
@@ -41,7 +41,7 @@ def species_update(species_id):
             error_information=error_information
         )
         
-@page.route("/<eng_name>")
+@page.route("/success/<eng_name>")
 def edit_success(eng_name):
     return render_template(
             "species_portal/species_portal_success.jinja",

static/styles.css

@@ -592,7 +592,7 @@ input:focus {
 
 .form{
   width: 100%;
-  flex-direction: row;
+  flex-direction:column;
   display: flex;
 }
 
@@ -608,6 +608,8 @@ input:focus {
   max-width: 600px;
   background: var(--green3);
   padding: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   border-radius: 20px;
   border: 2px solid var(--primary);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
@@ -690,9 +692,8 @@ input:focus {
   margin-bottom: 10px;
 }
 
-/* Labels */
 .form-group label {
-  margin-bottom: 5px;
+  margin-bottom: 4px;
   font-weight: 700;
   font-size: 1rem;
 }
@@ -803,4 +804,11 @@ input:focus {
     align-items: center;
     justify-content: center;
     cursor: pointer;
+}
+
+.button-row {
+  display: flex;
+  gap: 2px;
+  margin-top: 10px;
+  flex-direction: column;
 }

templates/species_portal/species_editor.jinja

@@ -5,8 +5,9 @@
 {% block content %}
 {% from 'button.jinja' import button %}
 <h1 style="text-align: center;">SPECIES EDITOR</h1>
-<section id="hero" class="form">
-    <form action="{{ url_for('species_editor.species_update', species_id=species_id) }}" class="container" method="POST"
+<div style="display:flex;flex-direction: row;">
+<section id="hero" class="container">
+    <form action="{{ url_for('species_editor.species_update', species_id=species_id) }}" class="form" method="POST"
         enctype="multipart/form-data">
         <div class="form-group">
             <label for="eng_name">English Name:</label>
@@ -18,7 +19,7 @@
         </div>
         <div class="form-group">
             <label for="main_text">Species Information:</label>
-            <textarea id="main_text" name="main_text" rows="5" required>{{ sp['body_text'] }}</textarea>
+            <textarea id="main_text" name="main_text" rows="4.5" required>{{ sp['body_text'] }}</textarea>
         </div>
         <div class="form-group">
             <label for="species_image">Species Image:</label>
@@ -47,16 +48,21 @@
                 {% endfor %}
             </select>
         </div>
-        <button type="submit" class="submit-button">
-            Update Species Information
-        </button>
-        <form action="{{ url_for('species_editor.delete_species_from_database', species_english=sp['species_english']) }}" method="POST" class="container" style="text-align: center;">
+        <div class="button-row">
+            <button type="submit" class="submit-button">
+                Update Species Information
+            </button>
+        </div>
+    </form>
+    <form action="{{ url_for('species_editor.delete_species_from_database', species_english=sp['species_english']) }}" method="POST" style="text-align: center; margin-bottom: 0px;">
+        <div class="button-row">
             <button type="submit" class="delete-button">Delete from Database</button>
-        </form>
+        </div>
     </form>
-    <div class="container" style="height: fit-content; width:fit-content; text-align:center; max-width: 40%">
-    <p> Current photo: </p>
-    <img src="/images/species_database/{{ sp['photoid'] }}.jpg" style="width: 100%; height: auto; margin: auto">
-    </div>
 </section>
+    <div class="container" style="height: fit-content; width:fit-content; text-align:center; max-width: 40%; padding:20px">
+        <p> Current photo: </p>
+        <img src="/images/species_database/{{ sp['photoid'] }}.jpg" style="width: 100%; height: auto; margin: auto">
+    </div>
+</div>
 {% endblock %}