nicer table footer and pagination layout

messages/uniworx/de.msg

@@ -241,7 +241,7 @@ MultiFileUploadInfo: (Mehrere Dateien mit Shift oder Strg auswählen)
 
 NrColumn: Nr
 SelectColumn: Auswahl
-DBTablePagesize: Einträge
+DBTablePagesize: Einträge pro Seite
 DBTablePagesizeAll: Alle
 
 CorrDownload: Herunterladen

templates/table/layout.hamlet

@@ -3,15 +3,19 @@ $if null rows && (dbsEmptyStyle == DBESNoHeading)
   _{dbsEmptyMessage}
 $else
   ^{table}
-  _{MsgRowCount rowCount}
-  <!-- TODO: replace '5' with 'minPagesize' -->
-  $if rowCount > 5
-    <div .pagination>
+
+  <div .table-footer>
+    <div .table__row-count>
+      _{MsgRowCount rowCount}
+    <!-- TODO: replace '5' with 'minPagesize' -->
+    $if rowCount > 5
       <form .pagesize method=GET enctype=#{pagesizeEnc} action=#{rawAction}>
         ^{pagesizeWdgt}
-      $if pageCount > 1
-        <ul ##{wIdent "pagination"} .pages>
-          $forall p <- pageNumbers
-            <li .page-link :p == psPage:.current>
-              <a href=#{tblLink $ setParam (wIdent "page") (Just $ tshow p)}>
-                _{MsgPage (succ p)}
+
+  $if pageCount > 1
+    <div .pagination>
+      <ul ##{wIdent "pagination"} .pages>
+        $forall p <- pageNumbers
+          <li .page-link :p == psPage:.current>
+            <a href=#{tblLink $ setParam (wIdent "page") (Just $ tshow p)}>
+              _{MsgPage (succ p)}

templates/table/layout.lucius

@@ -1,24 +1,29 @@
+/* TABLE FOOTER */
+.table-footer {
+  display: flex;
+  flex-flow: row-reverse;
+  justify-content: space-between;
+}
+
 /* PAGINATION */
 .pagination {
     margin-top: 20px;
-    display: flex;
-    flex-direction: column-reverse;
-
-    .pagesize {
-        float: left;
-        flex-grow: 0;
-    }
+    overflow: auto;
 
     .pages {
         text-align: center;
-        flex-grow: 1;
+        white-space: nowrap;
         margin: 0;
 
         .page-link {
-          margin: 7px;
+          margin-top: 7px;
           display: inline-block;
           background-color: var(--color-grey);
 
+          + .page-link {
+            margin-left: 7px;
+          }
+
           a {
             color: var(--color-lightwhite);
             padding: 7px 13px;
@@ -42,10 +47,6 @@
               pointer-events: none;
             }
           }
-
-          &:last-child {
-            margin-right: 0;
-          }
         }
     }
 }