mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
refactor: improve layout ratios and pagination UI
Layout improvements:
- Fixed header/main/footer ratios to 2:5, 3:5, 1:5 using flex
- Default to sans-serif font system stack
- Made sections properly flex-based instead of viewport height
Pagination improvements:
- First/previous/next/last navigation buttons (‹‹ ‹ › ››)
- Current page highlighted in colored badge
- Disabled state for unavailable actions
- Clean rounded button design with hover effects
- Proper spacing and visual hierarchy
Card styling:
- Better typography hierarchy
- Hover effects (lift + shadow)
- Improved spacing and readability
- Year displayed in brand color
Tests passing ✅
This commit is contained in:
Théophile Gervreau-Mercier
@@ -4,22 +4,25 @@ body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
||||
Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Layout ratios: header 2/5, main 3/5, footer 1/5 */
|
||||
header {
|
||||
height: 20vh;
|
||||
}
|
||||
main {
|
||||
height: 60vh;
|
||||
}
|
||||
footer {
|
||||
height: 10vh;
|
||||
font-size: 0.8em;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
main {
|
||||
flex: 4;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
@@ -29,28 +32,70 @@ header, main, footer {
|
||||
}
|
||||
|
||||
header {
|
||||
font-family: "police1";
|
||||
font-family: "police1", sans-serif;
|
||||
background: #9557b5ff;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
gap: 6%;
|
||||
padding: 1rem 4rem;
|
||||
.title {
|
||||
color: white;
|
||||
}
|
||||
gap: 4%;
|
||||
padding: 1.5rem 3rem;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header .title {
|
||||
color: white;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
header section {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
header section p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
header section p:first-child {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
header section p:not(:first-child) {
|
||||
font-size: 14px;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
header .title, header section, header nav {
|
||||
header nav {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
header nav button {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
header nav button:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
header nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
/* Filter info banner */
|
||||
@@ -79,36 +124,76 @@ header .title, header section, header nav {
|
||||
.clear-filter:hover {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
main {
|
||||
height: 60vh;
|
||||
|
||||
main {
|
||||
background: #3c856bff;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
grid-auto-flow: column;
|
||||
|
||||
/* critical: force column width so new columns form */
|
||||
grid-auto-columns: 260px;
|
||||
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #eee;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
scroll-snap-align: start;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
background: #3c856bff;
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card .title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card .authors {
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.card .year {
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
color: #9557b5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: #222222ff;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Years navigation in footer */
|
||||
@@ -116,15 +201,16 @@ footer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.years-scroll {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scroll-behavior: smooth;
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.75rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -161,20 +247,76 @@ footer {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* .card { */
|
||||
/* width: 20%; */
|
||||
/* border: 1px solid white; */
|
||||
/* color: white; */
|
||||
/* margin: 1ch; */
|
||||
/* padding: 2ch; */
|
||||
/* } */
|
||||
main {
|
||||
scroll-snap-type: x mandatory;
|
||||
/* Pagination controls */
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
margin: 1rem auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.card {
|
||||
scroll-snap-align: start;
|
||||
.pagination-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #3c856b;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.item {
|
||||
width: 50%;
|
||||
|
||||
.pagination-btn:hover:not(.disabled) {
|
||||
background: white;
|
||||
border-color: #9557b5;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.pagination-btn.disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0 1rem;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.page-current {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #9557b5;
|
||||
background: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
min-width: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-separator {
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.page-total {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@@ -65,15 +65,36 @@ include APP_ROOT . '/templates/header.php';
|
||||
<?php
|
||||
$yearParam = $year ? '&year=' . (int)$year : '';
|
||||
?>
|
||||
<?php if ($page > 1): ?>
|
||||
<a href="?page=<?= (int)($page - 1) . $yearParam ?>" class="pagination-previous">Précédent</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($page < $totalPages): ?>
|
||||
<a href="?page=<?= (int)($page + 1) . $yearParam ?>" class="pagination-next">Suivant</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<span class="pagination-info">Page <?= (int)$page ?> sur <?= (int)$totalPages ?></span>
|
||||
|
||||
<a href="?page=1<?= $yearParam ?>"
|
||||
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
|
||||
<?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
|
||||
‹‹
|
||||
</a>
|
||||
|
||||
<a href="?page=<?= max(1, (int)($page - 1)) . $yearParam ?>"
|
||||
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
|
||||
<?= $page <= 1 ? 'aria-disabled="true"' : '' ?>>
|
||||
‹
|
||||
</a>
|
||||
|
||||
<span class="pagination-info">
|
||||
<span class="page-current"><?= (int)$page ?></span>
|
||||
<span class="page-separator">/</span>
|
||||
<span class="page-total"><?= (int)$totalPages ?></span>
|
||||
</span>
|
||||
|
||||
<a href="?page=<?= min($totalPages, (int)($page + 1)) . $yearParam ?>"
|
||||
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
|
||||
<?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
|
||||
›
|
||||
</a>
|
||||
|
||||
<a href="?page=<?= $totalPages . $yearParam ?>"
|
||||
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
|
||||
<?= $page >= $totalPages ? 'aria-disabled="true"' : '' ?>>
|
||||
››
|
||||
</a>
|
||||
</nav>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user