Fixing minor bug with keys in formatted message.

Author: krulis-martin

src/containers/PaginationContainer/PaginationContainer.js

@@ -48,16 +48,17 @@ export const createSortingIcon = (colName, orderByColumn, orderByDescending, set
 export const showRangeInfo = (offset, limit, totalCount) =>
   totalCount > limit && (
     <div className="text-body-secondary text-end small">
-      <FormattedMessage
-        id="app.paginationContainer.showingRange"
-        defaultMessage="showing {offset}{nbsp}-{nbsp}{offsetEnd} (of{nbsp}{totalCount})"
-        values={{
-          offset: offset + 1,
-          offsetEnd: Math.min(offset + limit, totalCount),
-          totalCount,
-          nbsp: <>&nbsp;</>,
-        }}
-      />
+      <FormattedMessage id="app.paginationContainer.showingRange" defaultMessage="showing" />{' '}
+      <span className="text-nowrap">
+        {offset + 1}. &ndash; {Math.min(offset + limit, totalCount)}.
+      </span>{' '}
+      <span className="text-nowrap">
+        <FormattedMessage
+          id="app.paginationContainer.showingRangeOf"
+          defaultMessage="(of {totalCount})"
+          values={{ totalCount }}
+        />
+      </span>
     </div>
   );
 
@@ -257,9 +258,13 @@ class PaginationContainer extends Component {
                     {this.showLimitsButtons() && (
                       <Pagination size="small">
                         {limits
-                          .map((l, idx) =>
-                            idx < 1 || totalCount > limits[idx - 1] || l === limit ? this.createLimitButton(l) : null
-                          )
+                          .map((l, idx) => (
+                            <React.Fragment key={idx}>
+                              {idx < 1 || totalCount > limits[idx - 1] || l === limit
+                                ? this.createLimitButton(l)
+                                : null}
+                            </React.Fragment>
+                          ))
                           .filter(identity)}
                       </Pagination>
                     )}
@@ -286,7 +291,7 @@ class PaginationContainer extends Component {
             )}
           </div>
         ) : (
-          <div className="text-center larger em-maring">
+          <div className="text-center larger m-5">
             <LoadingIcon gapRight={2} />
             <FormattedMessage id="generic.loading" defaultMessage="Loading..." />
           </div>

src/locales/cs.json

@@ -1312,7 +1312,8 @@
   "app.page.failedPage.explain": "Tento problém mohl být způsoben výpadkem sítě nebo interní chybou na straně serveru. Rovněž je možné, že požadované datové objekty pro zobrazení této stránky byly smazány.",
   "app.page.failedPage.sorry": "Prosíme, zkuste to později. Omlouváme se za způsobené problémy. Pokud problém přetrvává ověřte, že zobrazovaný objekt stále",
   "app.page.loadingDescription": "Prosíme počkejte než bude vše připraveno.",
-  "app.paginationContainer.showingRange": "zobrazuje se {offset}.{nbsp}-{nbsp}{offsetEnd}. (z{nbsp}{totalCount})",
+  "app.paginationContainer.showingRange": "zobrazuje se",
+  "app.paginationContainer.showingRangeOf": "(z {totalCount})",
   "app.passwordStrength.bad": "Víte to jistě?",
   "app.passwordStrength.good": "Dobře",
   "app.passwordStrength.ok": "OK",
@@ -2128,4 +2129,4 @@
   "recodex-judge-shuffle-all": "Sudí neuspořádaných tokenů a řádků",
   "recodex-judge-shuffle-newline": "Sudí neuspořádaných tokenů (ignorující konce řádků)",
   "recodex-judge-shuffle-rows": "Sudí neuspořádaných řádků"
-}
+}

src/locales/en.json

@@ -1312,7 +1312,8 @@
   "app.page.failedPage.explain": "This problem might have been caused by network failure or by internal error at server side. It is also possible that some of the resources required for displaying this page have been deleted.",
   "app.page.failedPage.sorry": "We are sorry for the inconvenience, please try again later. If the problem prevails, verify that the requested resource still exists.",
   "app.page.loadingDescription": "Please wait while we are getting things ready.",
-  "app.paginationContainer.showingRange": "showing {offset}{nbsp}-{nbsp}{offsetEnd} (of{nbsp}{totalCount})",
+  "app.paginationContainer.showingRange": "showing",
+  "app.paginationContainer.showingRangeOf": "(of {totalCount})",
   "app.passwordStrength.bad": "Are you sure?",
   "app.passwordStrength.good": "Good",
   "app.passwordStrength.ok": "OK",