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

View File

@ -33,20 +33,23 @@
{% block content %}
{% if partitions|length != 0 %}
<br/><br/>
<div id="partitions-grid">
{% 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'] }}">
<img class="partition-thumbnail" src="/static/thumbnails/{{ partition['uuid'] }}.jpg">
<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-author">{{ partition["author"] }}</div>
</div>
</div>
</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 %}
</div>
{% else %}