dbroqua/MusicTopus
2
0
Fork 0
Code Issues 9 Pull requests Projects Releases 14 Packages Wiki Activity Actions

Minor css changes

Browse source
This commit is contained in:
Damien Broqua 2025-02-17 15:03:08 +01:00
parent 3d3228f12d
commit c94bfb570a
6 changed files with 33 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/500.html
View file

@ -17,7 +17,7 @@
<link href="/css/main.css" rel="stylesheet" /> <link href="/css/main.css" rel="stylesheet" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
</head> </head>
<body class="body-500"> <body class="body-500 flex flex-col align-items-center justify-center">
<img src="/img/404.svg" alt="Image représentant la mascotte tenant un vinyle cassé" /> <img src="/img/404.svg" alt="Image représentant la mascotte tenant un vinyle cassé" />
Nous sommes désolé mais quelque chose a mal tourné de notre côté. Nous sommes désolé mais quelque chose a mal tourné de notre côté.
<br /> <br />

7
sass/500.scss
View file

@ -1,16 +1,9 @@
.body-500 { .body-500 {
padding: 0; padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 400; font-weight: 400;
font-size: larger; font-size: larger;
line-height: 200%; line-height: 200%;
text-align: center;
img { img {
max-width: 60%; max-width: 60%;
margin-bottom: 32px; margin-bottom: 32px;

28
sass/collection.scss
View file

@ -4,30 +4,6 @@
cursor: pointer; cursor: pointer;
} }
} }
.filters {
display: flex;
justify-content: end;
padding: 0.5rem 0;
.field {
padding: 0 0.5rem;
select {
width: auto;
}
@include respond-to("small-up") {
width: 33%;
&:last-child {
padding-right: 0;
}
}
}
@include respond-to("small") {
flex-direction: column;
}
}
.showMoreFilters { .showMoreFilters {
cursor: pointer; cursor: pointer;
@ -53,8 +29,4 @@
} }
} }
} }
.total {
margin: 0.75rem 0;
}
} }

17
sass/pagination.scss
View file

@ -1,25 +1,8 @@
.pagination { .pagination {
font-size: 1rem; font-size: 1rem;
align-items: center;
display: flex;
text-align: center;
justify-content: space-between;
margin: 0.75rem 0; margin: 0.75rem 0;
.pagination-list { .pagination-list {
align-items: center;
display: flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-end;
@include respond-to("small") {
justify-content: center;
}
.pagination-link { .pagination-link {
align-items: center; align-items: center;
border: 1px solid transparent; border: 1px solid transparent;

6
views/components/filters/index.ejs
View file

@ -1,16 +1,16 @@
<div class="filters"> <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<%- include('./artist') %> <%- include('./artist') %>
<%- include('./format') %> <%- include('./format') %>
<%- include('./sort') %> <%- include('./sort') %>
</div> </div>
<div class="filters" v-if="moreFilters"> <div class="grid grid-cols-1 md:grid-cols-3 gap-10" v-if="moreFilters">
<%- include('./year') %> <%- include('./year') %>
<%- include('./genre') %> <%- include('./genre') %>
<%- include('./style') %> <%- include('./style') %>
</div> </div>
<span @click="showMoreFilters" class="showMoreFilters"> <span @click="showMoreFilters" class="showMoreFilters mt-10">
<template v-if="!moreFilters">Voir plus de filtres</template> <template v-if="!moreFilters">Voir plus de filtres</template>
<template v-if="moreFilters">Voir moins de filtres</template> <template v-if="moreFilters">Voir moins de filtres</template>
<i class="icon-left-open down" v-if="!moreFilters"></i> <i class="icon-left-open down" v-if="!moreFilters"></i>

7
views/pages/collection.ejs
View file

@ -73,11 +73,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-between md:align-items-center flex-col md:flex-row">
<div class="total"> <div class="total">
<strong>Nombre total d'éléments : </strong>{{total}} <strong>Nombre total d'éléments : </strong>{{total}}
</div> </div>
<nav class="pagination" role="navigation" aria-label="Pagination"> <nav class="pagination" role="navigation" aria-label="Pagination">
<ul class="pagination-list"> <ul class="flex justify-center md:justify-end pagination-list">
<li v-if="page > 1"> <li v-if="page > 1">
<a class="pagination-link" @click="goTo(1)" aria-label="Aller à la première page">&laquo;</a> <a class="pagination-link" @click="goTo(1)" aria-label="Aller à la première page">&laquo;</a>
</li> </li>
@ -98,6 +100,9 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
<% if ( pageType === 'private' ) { %> <% if ( pageType === 'private' ) { %>
<div class="modal" :class="{'is-visible': showModalDelete}"> <div class="modal" :class="{'is-visible': showModalDelete}">