Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE reorganising post grid actions order
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Nonimart 2026-01-27 16:40:10 +01:00
parent f8d755712c
commit c8864396b8
2 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/css/components/post-grid.css
View File

@ -3,7 +3,7 @@
/* @apply flex flex-col md:grid md:grid-cols-2 gap-4 md:items-center justify-between pb-12; */ /* @apply flex flex-col md:grid md:grid-cols-2 gap-4 md:items-center justify-between pb-12; */
@apply pb-12 grid grid-cols-2 gap-4 gap-y-8 items-end; @apply pb-12 grid grid-cols-2 gap-4 gap-y-8 items-end;
.post-count { .post-count {
@apply flex items-end gap-2; @apply flex items-end gap-2 col-span-1;
&__count { &__count {
@apply font-normal uppercase fjalla; @apply font-normal uppercase fjalla;
@ -16,7 +16,7 @@
} }
.search-bar { .search-bar {
@apply md:justify-self-end text-primary relative; @apply md:justify-self-end text-primary relative w-full md:max-w-[500px];
&:after { &:after {
@apply absolute top-1/2 -translate-y-1/2; @apply absolute top-1/2 -translate-y-1/2;
@ -31,12 +31,11 @@
background-size: contain; background-size: contain;
} }
input { input {
@apply w-full md:w-auto !py-4 px-4 border border-primary rounded-full text-base; @apply w-full !py-4 px-4 border border-primary rounded-full text-base;
padding-right: 33px; padding-right: 33px;
line-height: 1.5; line-height: 1.5;
height: auto; height: auto;
width: 500px;
max-width: 100%;
&::placeholder { &::placeholder {
@apply !text-base font-normal text-carhop-green-700; @apply !text-base font-normal text-carhop-green-700;
} }
@ -62,10 +61,11 @@
} }
select[name='sort_by'] { select[name='sort_by'] {
@apply pr-12 w-fit justify-self-end; @apply pr-12 w-fit justify-self-end col-span-1;
} }
} }
.search-by { .search-by {
@apply col-span-2 md:col-span-1;
&__label { &__label {
@apply text-primary font-semibold nunito; @apply text-primary font-semibold nunito;
} }
@ -89,7 +89,7 @@
} }
} }
&__toolbar-actions { &__toolbar-actions {
@apply flex flex-wrap items-center gap-4 justify-self-end; @apply flex flex-wrap md:items-center gap-4 justify-self-end w-full md:justify-end col-span-2 md:col-span-1;
select[name='etiquettes'] { select[name='etiquettes'] {
/* @apply bg-blue-300; */ /* @apply bg-blue-300; */

28
template-parts/articles/articles-grid.php
View File

@ -48,19 +48,6 @@ $thematiques = get_terms(array(
</div> </div>
</div> </div>
<select name="sort_by">
<option value="date_desc" selected><?php _e('Numéros récents en premier', 'dynamiques'); ?></option>
<option value="date_asc"><?php _e('Numéros anciens en premier', 'dynamiques'); ?></option>
<option value="title_asc"><?php _e('Par ordre alphabétique', 'dynamiques'); ?></option>
</select>
<h2 class="post-count">
<span class="post-count__count">
<?php echo $post_count; ?>
</span>
<span class="post-count__text">
<?php _e('articles', 'dynamiques'); ?>
</span>
</h2>
<div class="post-grid__toolbar-actions" data-post-type="articles"> <div class="post-grid__toolbar-actions" data-post-type="articles">
<div class="search-bar"> <div class="search-bar">
<input type="text" placeholder="<?php _e('Rechercher par mot-clé', 'dynamiques'); ?>"> <input type="text" placeholder="<?php _e('Rechercher par mot-clé', 'dynamiques'); ?>">
@ -84,6 +71,21 @@ $thematiques = get_terms(array(
</div> </div>
<h2 class="post-count">
<span class="post-count__count">
<?php echo $post_count; ?>
</span>
<span class="post-count__text">
<?php _e('articles', 'dynamiques'); ?>
</span>
</h2>
<select name="sort_by">
<option value="date_desc" selected><?php _e('Numéros récents en premier', 'dynamiques'); ?></option>
<option value="date_asc"><?php _e('Numéros anciens en premier', 'dynamiques'); ?></option>
<option value="title_asc"><?php _e('Par ordre alphabétique', 'dynamiques'); ?></option>
</select>