Merge pull request #32 from fleetbase/feature-ui-pagination

Fix styling
fleetbase · Nov 24, 2023 · 7c0a522 · 7c0a522
2 parents 931e9b0 + aeb8668
commit 7c0a522
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 15 deletions.
diff --git a/addon/components/pagination.hbs b/addon/components/pagination.hbs
@@ -1,15 +1,30 @@
 <div id="fleetbase-pagination" class="fleetbase-pagination" ...attributes>
     <div id="fleetbase-pagination-button-wrapper" class="flex justify-between flex-1 sm:hidden {{@directionButtonWrapperClass}}">
-        <a href="#" id="fleetbase-pagination-previous-button" class="direction-button {{@directionButtonClass}} {{if this.cannotStepBackward "disabled"}}" disabled={{this.cannotStepBackward}} tabindex="-1" aria-label="Previous" {{on "click" (fn this.incrementPage -1)}}>
+        <a
+            href="#"
+            id="fleetbase-pagination-previous-button"
+            class="direction-button {{@directionButtonClass}} {{if this.cannotStepBackward 'disabled'}}"
+            disabled={{this.cannotStepBackward}}
+            tabindex="-1"
+            aria-label="Previous"
+            {{on "click" (fn this.incrementPage -1)}}
+        >
             Previous
         </a>
-        <a href="#" id="fleetbase-pagination-next-button" class="ml-3 direction-button {{@directionButtonClass}} {{if this.cannotStepForward "disabled"}}" disabled={{this.cannotStepForward}} aria-label="Next" {{on "click" (fn this.incrementPage 1)}}>
+        <a
+            href="#"
+            id="fleetbase-pagination-next-button"
+            class="ml-3 direction-button {{@directionButtonClass}} {{if this.cannotStepForward 'disabled'}}"
+            disabled={{this.cannotStepForward}}
+            aria-label="Next"
+            {{on "click" (fn this.incrementPage 1)}}
+        >
             Next
         </a>
     </div>
-    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between {{@metaInfoWrapperClass}}">
-        <div class={{@metaInfoClass}}>
-            <p class="text-sm leading-5 text-gray-700 pagination-showing {{@metaInfoParagraph}}">
+    <div class="fleetbase-pagination-meta-info-wrapper hidden sm:flex-1 sm:flex sm:items-center sm:justify-between {{@metaInfoWrapperClass}}">
+        <div class={{concat "fleetbase-pagination-meta-info" " " @metaInfoClass}}>
+            <p class="fleetbase-pagination-meta-info-content text-sm leading-5 text-gray-700 pagination-showing {{@metaInfoParagraph}}">
                 Showing
                 <span class="font-medium">
                     {{this.from}}
@@ -25,21 +40,32 @@
                 results
             </p>
         </div>
-        <div class="flex items-center justify-end {{@paginationClass}}">
+
+        <div class="fleetbase-pagination-meta-info-paging-wrapper flex items-center justify-end {{@paginationClass}} ">
             {{#if @isLoading}}
                 <div class="flex items-center justify-center mr-2 {{@loadingWrapperClass}}">
                     <Spinner @iconClass="text-sky-500 fa-spin-800ms {{@loadingIconClass}}" />
                 </div>
             {{/if}}
-            <span class="relative z-0 inline-flex shadow-sm {{@innerPaginationClass}}">
-                <button id="fleetbase-pagination-backward-button" type="button" class="page-item-arrow {{@backwardClass}} {{if this.cannotStepBackward "disabled"}}" disabled={{this.cannotStepBackward}} {{on "click" (fn this.incrementPage -1)}}>
+            <span class="fleetbase-pagination-meta-info-paging-inner relative z-0 inline-flex shadow-sm {{@innerPaginationClass}}">
+                <button
+                    id="fleetbase-pagination-backward-button"
+                    type="button"
+                    class="page-item-arrow {{@backwardClass}} {{if this.cannotStepBackward 'disabled'}}"
+                    disabled={{this.cannotStepBackward}}
+                    {{on "click" (fn this.incrementPage -1)}}
+                >
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                        <path
+                            fill-rule="evenodd"
+                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                            clip-rule="evenodd"
+                        ></path>
                     </svg>
                 </button>
 
                 {{#each this.pageItems as |item|}}
-                    <button type="button" class="page-item {{if item.current "active"}} {{@pageItemClass}}" disabled={{or item.active item.dots}} {{on "click" (fn this.goToPage item.page)}}>
+                    <button type="button" class="fleetbase-pagination-page-item page-item {{if item.current 'active'}} {{@pageItemClass}}" disabled={{or item.active item.dots}} {{on "click" (fn this.goToPage item.page)}}>
                         {{#if item.dots}}
                             <span>
                                 ...
@@ -50,9 +76,19 @@
                     </button>
                 {{/each}}
 
-                <button id="fleetbase-pagination-forward-button" type="button" class="page-item-arrow {{@forwardClass}} {{if this.cannotStepForward "disabled"}}" disabled={{this.cannotStepForward}} {{on "click" (fn this.incrementPage 1)}}>
+                <button
+                    id="fleetbase-pagination-forward-button"
+                    type="button"
+                    class="page-item-arrow {{@forwardClass}} {{if this.cannotStepForward 'disabled'}}"
+                    disabled={{this.cannotStepForward}}
+                    {{on "click" (fn this.incrementPage 1)}}
+                >
                     <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+                        <path
+                            fill-rule="evenodd"
+                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                            clip-rule="evenodd"
+                        ></path>
                     </svg>
                 </button>
             </span>

diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
@@ -1049,7 +1049,7 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
 
 .next-view-section-footer,
 .next-view-section-subheader {
-    @apply flex items-center justify-between min-w-full max-w-full flex-shrink-0 border-b border-gray-200 dark:border-gray-700;
+    @apply grid grid-cols-2 min-w-full max-w-full border-b border-gray-200 dark:border-gray-700;
     box-align: center;
     padding: 0px 24px 0px 36px;
     height: 57px;
@@ -1335,7 +1335,7 @@ section.next-view-section {
 .next-table-wrapper {
     overflow: scroll;
     height: 100vh;
-    @apply inline-block w-full min-w-full align-middle;
+    @apply grid grid-cols-1;
 }
 
 .next-table-wrapper > table {
@@ -1396,11 +1396,19 @@ body[data-theme='dark'] .next-table-wrapper .tfoot-row > td {
 }
 
 .next-table-wrapper .tfoot-wrapper {
+    @apply grid grid-cols-1;
     padding: 0px 24px 0px 36px;
     height: 53px;
     min-width: 100%;
     max-width: 100%;
-    @apply flex flex-1 flex-row items-center justify-between flex-shrink-0;
+}
+
+.next-table-wrapper .tfoot-wrapper > .fleetbase-pagination > .fleetbase-pagination-meta-info-wrapper > .fleetbase-pagination-meta-info-paging-wrapper > .fleetbase-pagination-meta-info-paging-inner {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    padding-bottom: 8px;
+    padding-right: 24px;
 }
 
 .next-table-wrapper .lt-body-wrap > .lt-scrollable .tse-scroll-content .tse-content table {