Ajout d'un menu dropdown

This commit is contained in:
augustin64 2022-08-30 21:39:02 +02:00
parent e40a344e2b
commit 1c7e272f91
2 changed files with 68 additions and 19 deletions

View File

@ -181,6 +181,7 @@ input[type=submit] {
#header-actions { #header-actions {
margin-bottom: 5px; margin-bottom: 5px;
display: inherit;
} }
#cancel-deletion { #cancel-deletion {
@ -225,4 +226,54 @@ input[type=submit] {
#users-list { #users-list {
display: flex; display: flex;
margin-right: 15px;
margin-top: 1px;
}
.dropbtn {
width: 30px;
height: 30px;
background-image: radial-gradient(circle, #373737 2px, lightgray 3px);
background-size: 100% 33.33%;
border: none;
border-radius: 3px;
}
.dropdown {
position: relative;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 5px;
transform: translate(-130px);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
border-radius: 5px;
}
.dropdown:hover .dropdown-content {
display: block;
border-radius: 5px;
}
#delete-album {
background-color: #c61918;
border-radius: 5px;
color: whitesmoke;
} }

View File

@ -12,25 +12,23 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% if user.access_level == 1 %} <div class="dropdown">
<a class="button-href" href="/albums/{{ album.uuid }}/delete"> <button class="dropbtn"></button>
<button id="delete-album">Supprimer</button> <div class="dropdown-content">
</a> {% if g.user %}
{% endif %} <a href="/albums/{{ album.uuid }}/add-partition">Ajouter une partition</a>
{% if not_participant %} {% endif %}
<a class="button-href" href="/albums/{{ album.uuid }}/join"> {% if not_participant %}
<button id="join-album">Rejoindre</button> <a href="/albums/{{ album.uuid }}/join">Rejoindre</a>
</a> {% else %}
{% else %} <a href="/albums/{{ album.uuid }}/quit">Quitter</a>
<a class="button-href" href="/albums/{{ album.uuid }}/quit"> {% endif %}
<button id="quit-album">Quitter</button> {% if user.access_level == 1 %}
</a> <a id="delete-album" href="/albums/{{ album.uuid }}/delete">Supprimer</a>
{% endif %} {% endif %}
{% if g.user %} </div>
<a class="button-href" href="/albums/{{ album.uuid }}/add-partition"> </div>
<button id="add-partition">Ajouter une partition</button>
</a>
{% endif %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}