Add styling for pagination of GuideCard index (#101)

* Add styling for pagination of GuideCard index * more styling * More pagination styling Co-authored-by: Hector Correa <[email protected]> * fix tabs * more tab fixes * white-space fixes * More styling for GuideCard index page Co-authored-by: Hector Correa <[email protected]> --------- Co-authored-by: Hector Correa <[email protected]>
pulibrary · Jun 29, 2023 · 9bc1ece · 9bc1ece
1 parent a15f538
commit 9bc1ece
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 3 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -14,8 +14,85 @@
  *= require_self
  */
 body {
-  margin: 0;
+    margin: 0;
 }
+
 #main-content {
-  margin: 20px 100px;
+    margin: 20px 100px;
+}
+
+#list_header {
+    color: orange
+}
+
+.pagination {
+    display: flex;
+    list-style: none;
+    border-radius: 15rem;
+    padding: 5px;
+    padding-top: 25px;
+}
+
+.page-link {
+    color: black;
+    font-size: 15px;
+    position: relative;
+    padding: 0.5rem 0.75rem;
+    margin-left: -3px;
+    line-height: 1.25;
+    border: .25px solid #eae7e2;
+    white-space: nowrap;
+    z-index: 3;
+    text-decoration: none;
+}
+
+.page-link {
+    position:relative;
+    display:block;
+    padding:0.5rem 0.75rem;
+    margin-left:-1px;
+    line-height:1.25;
+    color:#3072AB;
+    background-color:#ffffff;
+    border:1px solid #dee2e6
+}
+
+.page-link:hover {
+    z-index:2;
+    color:#1f4a6f;
+    text-decoration:none;
+    background-color:#e9ecef;
+    border-color:#dee2e6
+}
+
+.page-link:focus {
+    z-index:3;
+    outline:0;
+    box-shadow:0 0 0 0.2rem rgba(48,114,171,0.25)
+}
+
+.page-item:first-child .page-link {
+    margin-left:0;
+    border-top-left-radius:0.25rem;
+    border-bottom-left-radius:0.25rem
+}
+
+.page-item:last-child .page-link {
+    border-top-right-radius:0.25rem;
+    border-bottom-right-radius:0.25rem
+}
+
+.page-item.active .page-link {
+    z-index:3;
+    color:#ffffff;
+    background-color:#3072AB;
+    border-color:#3072AB
+}
+
+.page-item.disabled .page-link {
+    color:#6c757d;
+    pointer-events:none;
+    cursor:auto;
+    background-color:#ffffff;
+    border-color:#dee2e6
 }
diff --git a/app/views/guide_cards/index.html.erb b/app/views/guide_cards/index.html.erb
@@ -1,4 +1,4 @@
-<h1> GuideCard Index </h1>
+<h1 id="list_header"> GuideCard Index </h1>
 
 <% @guide_cards.each do |card| %>
   <h2> <%= link_to card.heading, guide_card_path(card.id) %> </h2>