moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: header iteration 2

Browse Source
This commit is contained in:
moanos [he/him] 2024-06-11 18:37:02 +02:00
parent 1837eca921
commit b576674098
2 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/fellchensammlung/static/fellchensammlung/css/styles.css
View File

@ -49,6 +49,7 @@ table {
background-color: var(--secondary-light-one); background-color: var(--secondary-light-one);
word-break: break-word; word-break: break-word;
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
table { table {
font-size: small; font-size: small;
@ -86,7 +87,6 @@ h1, h2 {
} }
.nav-link { .nav-link {
color: var(--text-one); color: var(--text-one);
text-align: center; text-align: center;
@ -142,12 +142,12 @@ h1, h2 {
color: var(--highlight-one-text); color: var(--highlight-one-text);
button { button {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
opacity: 1; opacity: 1;
background-color: var(--secondary-light-one); background-color: var(--secondary-light-one);
} }
} }
@ -201,6 +201,7 @@ h1, h2 {
.container-edit-buttons { .container-edit-buttons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.btn { .btn {
margin: 5px; margin: 5px;
} }
@ -518,3 +519,30 @@ textarea {
.info { .info {
border: rgba(17, 58, 224, 0.51) 4px solid; 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;
}

14
src/fellchensammlung/templates/fellchensammlung/header.html
View File

@ -8,7 +8,8 @@
<a href="{% url "index" %}" class="logo"><img src={% static 'fellchensammlung/img/logo_transparent.png' %}></a> <a href="{% url "index" %}" class="logo"><img src={% static 'fellchensammlung/img/logo_transparent.png' %}></a>
<nav id="nav" class="nav justify-content-center"> <nav id="nav" class="nav justify-content-center">
<a class="nav-link " href="{% url "search" %}"><i class="fas fa-search"></i> {% translate 'Suchen' %}</a> <a class="nav-link " href="{% url "search" %}"><i class="fas fa-search"></i> {% translate 'Suchen' %}</a>
<a class="nav-link " href="{% url "add-adoption" %}"><i class="fas fa-feather"></i> {% translate 'Vermittlung hinzufügen' %}</a> <a class="nav-link " href="{% url "add-adoption" %}"><i
class="fas fa-feather"></i> {% translate 'Vermittlung hinzufügen' %}</a>
<a class="nav-link " href="{% url "about" %}"><i class="fas fa-info"></i> {% translate 'Über uns' %}</a> <a class="nav-link " href="{% url "about" %}"><i class="fas fa-info"></i> {% translate 'Über uns' %}</a>
<a class="nav-link " href="{% url "rss" %}"><i class="fa-solid fa-rss"></i> {% translate 'RSS' %}</a> <a class="nav-link " href="{% url "rss" %}"><i class="fa-solid fa-rss"></i> {% translate 'RSS' %}</a>
@ -17,7 +18,16 @@
{% include "fellchensammlung/forms/change_language.html" %} {% include "fellchensammlung/forms/change_language.html" %}
{% if user.is_authenticated %} {% if user.is_authenticated %}
<div class="profile-card"> <div class="profile-card">
<p><a href="{{ user.get_absolute_url }}">{{ user.username }}</a></p> <div class="container-dropdown">
<button class="dropbtn">
{{ 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"> <form action="{% url 'logout' %}" method="post">
{% csrf_token %} {% csrf_token %}
<button type="submit">{% translate "Ausloggen" %}</button> <button type="submit">{% translate "Ausloggen" %}</button>