feat: re style right header buttons

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -110,9 +110,8 @@ h1, h2 {
     color: white;
 }
 
-.header-right select {
+select, button {
     width: 100%;
-    padding: 10px;
     border: none;
     border-radius: 4px;
     opacity: 1;
@@ -141,13 +140,18 @@ h1, h2 {
     background-color: var(--highlight-two);
     color: var(--highlight-one-text);
 
+    .btn2 {
+        height: 40px;
+        margin: 5px;
+    }
+
+    a:hover, .button_darken:hover {
+        background-color: var(--highlight-one);
+        color: var(--highlight-one-text);
+    }
     button {
-        width: 100%;
+        background: inherit;
-        padding: 10px;
+        color: inherit;
-        border: none;
-        border-radius: 4px;
-        opacity: 1;
-        background-color: var(--secondary-light-one);
     }
 }
 
@@ -518,31 +522,4 @@ textarea {
 
 .info {
     border: rgba(17, 58, 224, 0.51) 4px solid;
-}
-
-.container-dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    z-index: 1;
-}
-
-.container-dropdown:hover .dropdown-content {
-    display: block;
-}
-
-
-.dropbtn {
-    background-color: #f1f1f1;
-    color: black;
-    padding: 10px 20px;
-    font-size: 16px;
-    border: none;
-    cursor: pointer;
 }

src/fellchensammlung/templates/fellchensammlung/details/detail-animal-partial.html

@@ -20,8 +20,8 @@
 <p>{{ animal.description }}</p>
 <h2>{% translate "Bilder" %}</h2>
 <div class="photos">
-    {% for image in animal.get_photos %}
+        {% for image in animal.get_photos %}
-        <div class="card-photo">
+            <div class="card-photo">
             <img src="/media/{{ image.image }}" alt="{{ image.alt_text }}">
         </div>
     {% endfor %}

src/fellchensammlung/templates/fellchensammlung/forms/change_language.html

@@ -1,5 +1,5 @@
 {% load i18n %}
-<form action="{% url 'change-language' %}" method="post" onchange='this.form.submit()'>
+<form class="btn2" action="{% url 'change-language' %}" method="post" onchange='this.form.submit()'>
     {% csrf_token %}
     <select name="language" onchange='this.form.submit()'>
         {% get_current_language as LANGUAGE_CODE_CURRENT %}

src/fellchensammlung/templates/fellchensammlung/header.html

@@ -15,28 +15,19 @@
 
     </nav>
     <div class="header-right">
-        {% include "fellchensammlung/forms/change_language.html" %}
+        <div class="profile-card">
-        {% if user.is_authenticated %}
+            {% include "fellchensammlung/forms/change_language.html" %}
-            <div class="profile-card">
+            {% if user.is_authenticated %}
-                <div class="container-dropdown">
+                <a class="btn2" href="{{ user.get_absolute_url }}">Profile</a>
-                    <button class="dropbtn">
+                <form class="btn2 button_darken" action="{% url 'logout' %}" method="post">
-                        {{ user.username }} drop
-                    </button>
-                    <select class="dropdown-content">
-                    <option><a href="{{ user.get_absolute_url }}">Profile</a></option>
-
-                    <option><a href="{{ user.get_absolute_url }}">Log out</a></option>
-                    </select>
-                </div>
-                <form action="{% url 'logout' %}" method="post">
                     {% csrf_token %}
                     <button type="submit">{% translate "Ausloggen" %}</button>
                 </form>
-            </div>
+                </div>
-        {% else %}
+            {% else %}
-            <a href="{% url "django_registration_register" %}">{% translate "Registrieren" %}</a>
+                <a class="btn2" href="{% url "django_registration_register" %}">{% translate "Registrieren" %}</a>
-            <a href="{% url "login" %}">{% translate "Einloggen" %}</a>
+                <a class="btn2" href="{% url "login" %}">{% translate "Einloggen" %}</a>
-        {% endif %}
+            {% endif %}
 
     </div>
 </div>