Merge pull request #38 from samply/feature/ui-fixes-2024-01-16

Feature/UI fixes 2024 01 16
samply · Jan 17, 2024 · 76491c3 · 76491c3
2 parents 464780a + 046784d
commit 76491c3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/demo/public/catalogues/catalogue-dktk.json b/packages/demo/public/catalogues/catalogue-dktk.json
@@ -22,7 +22,7 @@
                     },
                     {
                         "key": "other",
-                        "name": "D%",
+                        "name": "Sonstiges / intersexuell",
                         "description": "Divers / intersexuell"
                     },
                     {

diff --git a/packages/demo/src/styles/default/result-table.css b/packages/demo/src/styles/default/result-table.css
@@ -54,10 +54,20 @@ lens-result-table {
   }
 
   lens-result-table::part(table-pagination-button) {
-    border: solid 1px var(--gray);
+    border: solid 1px var(--blue);
     background: var(--white);
     border-radius: var(--border-radius-small);
     padding: var(--gap-xxs) var(--gap-s);
+    cursor: pointer;
+  }
+
+
+  lens-result-table::part(pagination-button-disabled) {
+    border: solid 1px var(--light-gray);
+    background: var(--white);
+    border-radius: var(--border-radius-small);
+    padding: var(--gap-xxs) var(--gap-s);
+    cursor: auto;
   }
 
   lens-result-table::part(info-button) {

diff --git a/packages/lib/src/components/results/ResultTableComponent.wc.svelte b/packages/lib/src/components/results/ResultTableComponent.wc.svelte
@@ -212,16 +212,18 @@
 <slot name="above-pagination"/>
 <div part="table-pagination">
     <button
-        part="table-pagination-button pagination-pagination-previous"
+        part="table-pagination-button pagination-pagination-previous 
+                {activePage === 1 ? 'pagination-button-disabled' : ''}"
         disabled={activePage === 1}
         on:click={() => {
             activePage = activePage - 1;
         }}>&#8592;</button
     >
     <div part="table-pagination-pagenumber">{activePage}</div>
     <button
-    part="table-pagination-button pagination-pagination-next"
-    disabled={activePage === Math.ceil(tableRowData.length / pageSize)}
+    part="table-pagination-button pagination-pagination-next
+            {activePage === Math.ceil(tableRowData.length / pageSize) || pageItems.length === 0 ? 'pagination-button-disabled' : ''}"
+    disabled={activePage === Math.ceil(tableRowData.length / pageSize)|| pageItems.length === 0}
     on:click={() => {
         activePage = activePage + 1;
     }}>&#8594;</button