mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
Make search page header more compact and fix layout structure
- Reduce all spacing and padding in header for more compact fit - Fix back button overflow by removing width: 100% and adding overflow handling - Make filter section more compact with smaller fonts and spacing - Add main-wrapper div to group main and footer - Keep rounded corners (40px) on all three sections like main.css - Footer stays at bottom of main content area - Fix HTML structure: footer outside main, both inside wrapper
This commit is contained in:
Théophile Gervreau-Mercier
@@ -29,7 +29,7 @@ if (rand(1, 100) === 1) {
|
||||
|
||||
// Pagination - adjust to grid
|
||||
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
|
||||
$itemsPerPage = 12; // Default grid size (3 rows × 4 columns)
|
||||
$itemsPerPage = 9; // Default grid size (3 rows × 3 columns)
|
||||
|
||||
// Collect search parameters
|
||||
$searchParams = [];
|
||||
@@ -118,195 +118,7 @@ try {
|
||||
<title>Recherche - Posterg</title>
|
||||
<link rel="stylesheet" href="assets/modern-normalize.css">
|
||||
<link rel="stylesheet" href="assets/common.css">
|
||||
<link rel="stylesheet" href="assets/main.css">
|
||||
<style>
|
||||
header {
|
||||
padding: 1rem 2rem !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0.75rem !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.search-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 0.5rem 0.9rem;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.search-form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.9rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 15px;
|
||||
font-size: 0.9rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #333;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-button, .filter-button {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 0.5rem 0.9rem;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-button:hover, .filter-button:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.filter-button.active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filters-panel {
|
||||
display: none;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.75rem;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.filters-panel.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.filters-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.filters-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.filters-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.4rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
font-size: 0.8rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reset-button:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(255, 100, 100, 0.2);
|
||||
color: white;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.results-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.1rem;
|
||||
height: 100%;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.results-count {
|
||||
font-weight: 700;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="assets/search.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@@ -318,14 +130,17 @@ try {
|
||||
type="text"
|
||||
name="query"
|
||||
class="search-input"
|
||||
placeholder="Rechercher par titre, auteur, mots-clés..."
|
||||
placeholder="Rechercher..."
|
||||
value="<?= htmlspecialchars($_GET['query'] ?? ''); ?>"
|
||||
autofocus
|
||||
>
|
||||
<button type="submit" class="search-button">Rechercher</button>
|
||||
<button type="button" class="filter-button <?= $showFilters ? 'active' : ''; ?>" onclick="toggleFilters()">
|
||||
Filtres
|
||||
</button>
|
||||
|
||||
<div class="search-actions">
|
||||
<button type="submit" class="search-button">Rechercher</button>
|
||||
<button type="button" class="filter-button <?= $showFilters ? 'active' : ''; ?>" onclick="toggleFilters()">
|
||||
Filtres
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Hidden field to maintain filter panel state -->
|
||||
<input type="hidden" name="filters" id="filters-state" value="<?= $showFilters ? 'show' : 'hide'; ?>">
|
||||
@@ -466,7 +281,8 @@ try {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="main-wrapper">
|
||||
<main>
|
||||
<div class="cards-container">
|
||||
<?php if (count($results) > 0): ?>
|
||||
<?php foreach ($results as $item): ?>
|
||||
@@ -513,14 +329,15 @@ try {
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="results-footer">
|
||||
<span class="results-count"><?= (int)$totalItems; ?></span>
|
||||
<span>résultat<?= $totalItems > 1 ? 's' : ''; ?> trouvé<?= $totalItems > 1 ? 's' : ''; ?></span>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="results-footer">
|
||||
<span class="results-count"><?= (int)$totalItems; ?></span>
|
||||
<span>résultat<?= $totalItems > 1 ? 's' : ''; ?></span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleFilters() {
|
||||
|
||||
Reference in New Issue
Block a user