chore: move pagination cursor title in a separate div

The progress bar will be clearer for everyone if the information about
the number of loaded articles is printed without hovering the progress
bar.

8 files changed, 39 insertions, 20 deletions

diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx
index 86e0e5b..ada23fe 100644
--- a/src/components/Buttons/Button/Button.tsx
+++ b/src/components/Buttons/Button/Button.tsx
@@ -7,15 +7,18 @@ const Button = ({
   clickHandler,
   kind = 'secondary',
   position = 'left',
+  spacing = false,
   isDisabled = false,
 }: {
   children: ReactNode;
   clickHandler: any;
   kind?: ButtonKind;
   position?: ButtonPosition;
+  spacing?: boolean;
   isDisabled?: boolean;
 }) => {
-  const classes = `${styles.btn} ${styles[position]} ${styles[kind]}`;
+  const spacingClass = spacing ? styles.spacing : '';
+  const classes = `${styles.btn} ${styles[position]} ${styles[kind]} ${spacingClass}`;
 
   return (
     <button
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 3219a96..fca8013 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -276,3 +276,8 @@
     }
   }
 }
+
+.spacing {
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
diff --git a/src/components/PaginationCursor/PaginationCursor.module.scss b/src/components/PaginationCursor/PaginationCursor.module.scss
index 17e46ac..542584c 100644
--- a/src/components/PaginationCursor/PaginationCursor.module.scss
+++ b/src/components/PaginationCursor/PaginationCursor.module.scss
@@ -1,12 +1,14 @@
 @use "@styles/abstracts/functions" as fun;
 
 .wrapper {
-  margin: var(--spacing-sm) auto var(--spacing-md);
   width: max-content;
+  margin: var(--spacing-sm) auto var(--spacing-md);
+  text-align: center;
 
   .bar[value] {
     display: block;
-    width: 30ch;
+    width: clamp(25ch, 20vw, 30ch);
+    max-width: 100%;
     height: fun.convert-px(13);
     appearance: none;
     background: var(--color-bg-tertiary);
@@ -34,3 +36,8 @@
     }
   }
 }
+
+.info {
+  margin-bottom: var(--spacing-2xs);
+  font-size: var(--font-size-sm);
+}
diff --git a/src/components/PaginationCursor/PaginationCursor.tsx b/src/components/PaginationCursor/PaginationCursor.tsx
index a8c6265..3b0c15f 100644
--- a/src/components/PaginationCursor/PaginationCursor.tsx
+++ b/src/components/PaginationCursor/PaginationCursor.tsx
@@ -12,6 +12,16 @@ const PaginationCursor = ({
 
   return (
     <div className={styles.wrapper}>
+      <div className={styles.info}>
+        {intl.formatMessage(
+          {
+            defaultMessage:
+              '{articlesCount, plural, =0 {# loaded articles} one {# loaded article} other {# loaded articles}} out of a total of {total}',
+            description: 'PaginationCursor: loaded articles count message',
+          },
+          { articlesCount: current, total }
+        )}
+      </div>
       <progress
         className={styles.bar}
         max={total}
@@ -23,14 +33,6 @@ const PaginationCursor = ({
             'Number of articles loaded out of the total available.',
           description: 'PaginationCursor: loaded articles count aria-label',
         })}
-        title={intl.formatMessage(
-          {
-            defaultMessage:
-              '{articlesCount, plural, =0 {# articles} one {# article} other {# articles}} out of a total of {total}',
-            description: 'PaginationCursor: loaded articles count message',
-          },
-          { articlesCount: current, total }
-        )}
       ></progress>
     </div>
   );
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d1d48e5..7bd1f2f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -95,10 +95,6 @@
     "defaultMessage": "Failed to load.",
     "description": "BlogPage: failed to load text"
   },
-  "CSimmh": {
-    "defaultMessage": "{articlesCount, plural, =0 {# articles} one {# article} other {# articles}} out of a total of {total}",
-    "description": "PaginationCursor: loaded articles count message"
-  },
   "CT3ydM": {
     "defaultMessage": "{date} at {time}",
     "description": "Comment: publication date"
@@ -403,6 +399,10 @@
     "defaultMessage": "Back to top",
     "description": "Footer: Back to top button"
   },
+  "du4MLN": {
+    "defaultMessage": "{articlesCount, plural, =0 {# loaded articles} one {# loaded article} other {# loaded articles}} out of a total of {total}",
+    "description": "PaginationCursor: loaded articles count message"
+  },
   "e9L59q": {
     "defaultMessage": "No comments yet.",
     "description": "CommentsList: No comment message"
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 85cfb3d..a826053 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -95,10 +95,6 @@
     "defaultMessage": "Échec du chargement.",
     "description": "BlogPage: failed to load text"
   },
-  "CSimmh": {
-    "defaultMessage": "{articlesCount, plural, =0 {# article} one {# article} other {# articles}} sur un total de {total}",
-    "description": "PaginationCursor: loaded articles count message"
-  },
   "CT3ydM": {
     "defaultMessage": "{date} à {time}",
     "description": "Comment: publication date"
@@ -188,7 +184,7 @@
     "description": "Icons: Sun icon (light theme)"
   },
   "Kqq2cm": {
-    "defaultMessage": "En charger plus ?",
+    "defaultMessage": "En afficher plus ?",
     "description": "BlogPage: load more text"
   },
   "Mj2BQf": {
@@ -403,6 +399,10 @@
     "defaultMessage": "Retour en haut",
     "description": "Footer: Back to top button"
   },
+  "du4MLN": {
+    "defaultMessage": "{articlesCount, plural, =0 {# article chargé} one {# article chargé} other {# articles chargés}} sur un total de {total}",
+    "description": "PaginationCursor: loaded articles count message"
+  },
   "e9L59q": {
     "defaultMessage": "Aucun commentaire.",
     "description": "CommentsList: No comment message"
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index c0d99e9..cea5688 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -169,6 +169,7 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
                 isDisabled={isLoadingMore}
                 clickHandler={loadMorePosts}
                 position="center"
+                spacing={true}
               >
                 {intl.formatMessage({
                   defaultMessage: 'Load more?',
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 8e4033b..42e45cd 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -150,6 +150,7 @@ const Search: NextPageWithLayout = () => {
                 isDisabled={isLoadingMore}
                 clickHandler={loadMorePosts}
                 position="center"
+                spacing={true}
               >
                 {intl.formatMessage({
                   defaultMessage: 'Load more?',