Set css grid layout

This commit is contained in:
augustin64 2022-12-19 10:04:50 +01:00
parent a0b7f4f0c3
commit f226a80046
2 changed files with 17 additions and 8 deletions

View File

@ -147,7 +147,7 @@ input[type=submit] {
border-width: 1px; border-width: 1px;
margin: 3px; margin: 3px;
width: 178px; width: 178px;
box-shadow: 1px 1px 1px #7f7f7f; box-shadow: 2px 2px 2px #7f7f7f;
} }
.partition-thumbnail { .partition-thumbnail {
@ -172,8 +172,13 @@ input[type=submit] {
} }
#partitions-grid { #partitions-grid {
display: flex; display: grid;
overflow-x: scroll; grid-template-columns: repeat(auto-fill, 200px);
justify-content: center;
}
#partitions-grid a {
text-decoration: none;
} }
#search-partitions-grid { #search-partitions-grid {
@ -316,7 +321,7 @@ td {
.edit-button { .edit-button {
float: right; float: right;
transform: translateX(-10%); transform: translateX(-80%) translateY(-150%);
padding: 2%; padding: 2%;
border-color: black; border-color: black;
@ -325,6 +330,7 @@ td {
border-width: 1px; border-width: 1px;
box-shadow: 1px 2px 2px #7f7f7f; box-shadow: 1px 2px 2px #7f7f7f;
background-color: #e2e2e2;
} }
#paroles { #paroles {

View File

@ -33,20 +33,23 @@
{% block content %} {% block content %}
{% if partitions|length != 0 %} {% if partitions|length != 0 %}
<br/><br/>
<div id="partitions-grid"> <div id="partitions-grid">
{% for partition in partitions | reverse %} {% for partition in partitions | reverse %}
<a href="{{ album.uuid }}/{{ partition['uuid'] }}"> <div>
<a href="/{{ album.uuid }}/{{ partition['uuid'] }}">
<div class="partition" id="partition-{{ partition['uuid'] }}"> <div class="partition" id="partition-{{ partition['uuid'] }}">
<img class="partition-thumbnail" src="/static/thumbnails/{{ partition['uuid'] }}.jpg"> <img class="partition-thumbnail" src="/static/thumbnails/{{ partition['uuid'] }}.jpg">
<div class="partition-description"> <div class="partition-description">
{% if partition["user_id"] == g.user.id or g.user.access_level == 1 %}
<a href="/partition/{{ partition['uuid'] }}/edit"><div class="edit-button">✏️</div></a>
{% endif %}
<div class="partition-name">{{ partition["name"] }}</div> <div class="partition-name">{{ partition["name"] }}</div>
<div class="partition-author">{{ partition["author"] }}</div> <div class="partition-author">{{ partition["author"] }}</div>
</div> </div>
</div> </div>
</a> </a>
{% if partition["user_id"] == g.user.id or g.user.access_level == 1 %}
<a href="/partition/{{ partition['uuid'] }}/edit"><div class="edit-button">✏️</div></a>
{% endif %}
</div>
{% endfor %} {% endfor %}
</div> </div>
{% else %} {% else %}