Basic styling for pagination

Canny-Code · Dec 4, 2024 · a972632 · a972632
1 parent bd9b428
commit a972632
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/app/javascript/stylesheets/custom/basics.css b/app/javascript/stylesheets/custom/basics.css
@@ -1,4 +1,25 @@
 @layer base {
+    .pagy {
+    @apply flex space-x-1 font-semibold text-sm text-gray-500;
+    a:not(.gap) {
+      @apply block rounded-lg px-3 py-1 bg-gray-200;
+      &:hover {
+        @apply bg-gray-300;
+      }
+      &:not([href]) { /* disabled links */
+        @apply text-gray-300 bg-gray-100 cursor-default;
+      }
+      &.current {
+        @apply text-white bg-gray-400;
+      }
+    }
+    label {
+      @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
+      input {
+        @apply bg-gray-100 border-none rounded-md;
+      }
+    }
+  }
   pre {
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */

diff --git a/app/views/dashboard/show.html.erb b/app/views/dashboard/show.html.erb
@@ -43,9 +43,12 @@
           </table>
         </div>
 
-        <div class="mt-4">
+        <!-- Pagination TODO - fix this for more and disable it for less than 2 pages -->
+        <%# <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
+        <div class="flex justify-center mt-6">  
           <%== pagy_nav(@pagy) %>
         </div>
+
       <% end %>
     </div>
   <% else %>