From 66822d929b48c93e44acb2c73a542417549335ac Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 1 Feb 2022 23:26:27 +0100
Subject: 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.
---
 src/components/PaginationCursor/PaginationCursor.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'src/components/PaginationCursor/PaginationCursor.tsx')

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>
   );
-- 
cgit v1.2.3