diff --git a/resources/css/pages/singles.css b/resources/css/pages/singles.css
index b873cab..ff3349b 100644
--- a/resources/css/pages/singles.css
+++ b/resources/css/pages/singles.css
@@ -71,6 +71,13 @@
}
.search-field {
@apply relative;
+ .reset-search-button {
+ @apply absolute top-1/2 right-0 -translate-y-1/2;
+ @apply mr-2 w-8 h-8;
+ @apply bg-contain hidden;
+ background-image: url('../resources/img/icons/carhop-reset-search-cross-green.svg');
+ }
+
&:after {
content: ' ';
@apply block w-8 h-8;
@@ -79,6 +86,16 @@
@apply bg-contain;
background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
}
+
+ &:has(input:not(:placeholder-shown)) {
+ .reset-search-button {
+ @apply block;
+ }
+ &:after {
+ @apply hidden;
+ }
+ }
+
input {
@apply border border-primary text-primary w-full;
@apply w-full p-4 relative;
@@ -91,8 +108,12 @@
.tags {
@apply hidden lg:block;
}
+ .search-field + .article-tags,
+ .search-field + .revue-tags {
+ @apply mt-8;
+ }
.tags__title {
- @apply text-lg uppercase font-semibold mt-8 my-4 nunito;
+ @apply text-lg uppercase font-semibold mt-0 my-4 nunito;
}
.tags-list {
@apply flex flex-wrap gap-4;
diff --git a/resources/img/icons/carhop-reset-search-cross-green.svg b/resources/img/icons/carhop-reset-search-cross-green.svg
new file mode 100644
index 0000000..2585f88
--- /dev/null
+++ b/resources/img/icons/carhop-reset-search-cross-green.svg
@@ -0,0 +1,5 @@
+
diff --git a/resources/js/singles/search-revue.ts b/resources/js/singles/search-revue.ts
index 795e87d..8abfd0a 100644
--- a/resources/js/singles/search-revue.ts
+++ b/resources/js/singles/search-revue.ts
@@ -6,9 +6,26 @@ export default function handleSearchRevue() {
const currentRevueId = document
.querySelector('.page--single-revue')
?.getAttribute('data-revue-id') as string;
+ const revueToolbarButtons = document.querySelectorAll(
+ '.page--single-revue .revue-toolbar button'
+ ) as NodeListOf;
if (!searchRevue || !contentArea) return;
+ const resetSearchButton = document.querySelector(
+ '.page--single-revue .sidebar .search-field .reset-search-button'
+ ) as HTMLButtonElement;
+ if (!resetSearchButton) return;
+
+ function resetSearch() {
+ searchRevue.value = '';
+ contentArea.innerHTML = originalContent;
+ }
+
+ resetSearchButton.addEventListener('click', () => {
+ resetSearch();
+ });
+
// Sauvegarder le contenu original
const originalContent = contentArea.innerHTML;
@@ -40,4 +57,11 @@ export default function handleSearchRevue() {
`;
}
});
+
+ revueToolbarButtons.forEach((button) => {
+ button.addEventListener('click', (e) => {
+ e.preventDefault();
+ resetSearch();
+ });
+ });
}
diff --git a/single-revues.php b/single-revues.php
index 3594d97..e86be09 100644
--- a/single-revues.php
+++ b/single-revues.php
@@ -23,22 +23,26 @@ $articles = get_field('articles', $current_issue->ID);