postgresml · chillenberger · Sep 4, 2024 · Aug 9, 2024 · Aug 9, 2024 · Sep 4, 2024
diff --git a/pgml-dashboard/src/components/buttons/goto_btn/goto_btn.scss b/pgml-dashboard/src/components/buttons/goto_btn/goto_btn.scss
@@ -0,0 +1,3 @@
+div[data-controller="buttons-goto-btn"] {
+
+}
diff --git a/pgml-dashboard/src/components/buttons/goto_btn/mod.rs b/pgml-dashboard/src/components/buttons/goto_btn/mod.rs
@@ -0,0 +1,30 @@
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "buttons/goto_btn/template.html")]
+pub struct GotoBtn {
+    href: String,
+    text: String,
+}
+
+impl GotoBtn {
+    pub fn new() -> GotoBtn {
+        GotoBtn {
+            href: String::new(),
+            text: String::new(),
+        }
+    }
+
+    pub fn set_href(mut self, href: &str) -> Self {
+        self.href = href.into();
+        self
+    }
+
+    pub fn set_text(mut self, text: &str) -> Self {
+        self.text = text.into();
+        self
+    }
+}
+
+component!(GotoBtn);
diff --git a/pgml-dashboard/src/components/buttons/goto_btn/template.html b/pgml-dashboard/src/components/buttons/goto_btn/template.html
@@ -0,0 +1,6 @@
+<!-- goto btn -->
+<a href="<%- href %>" class="btn btn-tertiary goto-arrow-hover-trigger">
+  <%- text %>
+  <span class="material-symbols-outlined goto-arrow-shift-animation">arrow_forward</span>
+</a>
+<!-- end goto btn -->
diff --git a/pgml-dashboard/src/components/buttons/mod.rs b/pgml-dashboard/src/components/buttons/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/buttons/goto_btn
+pub mod goto_btn;
+pub use goto_btn::GotoBtn;
diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
@@ -16,6 +16,9 @@ pub mod badges;
 pub mod breadcrumbs;
 pub use breadcrumbs::Breadcrumbs;
 
+// src/components/buttons
+pub mod buttons;
+
 // src/components/cards
 pub mod cards;
 

diff --git a/pgml-dashboard/src/components/sections/have_questions/template.html b/pgml-dashboard/src/components/sections/have_questions/template.html
@@ -1,5 +1,3 @@
-<% use crate::utils::config::standalone_dashboard; %>
-
 <div class="d-flex flex-column gap-4" data-controller="sections-have-questions">
   <div class="w-100 justify-content-center d-flex flex-column text-center">
     <h4>Have more questions?</h4>

diff --git a/pgml-dashboard/src/components/tables/large/table/mod.rs b/pgml-dashboard/src/components/tables/large/table/mod.rs
@@ -1,5 +1,5 @@
 use crate::components::tables::large::Row;
-use pgml_components::component;
+use pgml_components::{component, Component};
 use sailfish::TemplateOnce;
 
 #[derive(TemplateOnce, Default)]
@@ -8,6 +8,7 @@ pub struct Table {
     rows: Vec<Row>,
     headers: Vec<String>,
     classes: String,
+    footers: Vec<Component>,
 }
 
 impl Table {
@@ -16,6 +17,7 @@ impl Table {
             headers: headers.iter().map(|h| h.to_string()).collect(),
             rows: rows.to_vec(),
             classes: "table table-lg".to_string(),
+            footers: Vec::new(),
         }
     }
 
@@ -24,6 +26,16 @@ impl Table {
         self.rows = self.rows.into_iter().map(|r| r.selectable()).collect();
         self
     }
+
+    pub fn footers(mut self, footer: Vec<Component>) -> Self {
+        self.footers = footer;
+        self
+    }
+
+    pub fn alt_style(mut self) -> Self {
+        self.classes.push_str(" alt-style");
+        self
+    }
 }
 
 component!(Table);
diff --git a/pgml-dashboard/src/components/tables/large/table/table.scss b/pgml-dashboard/src/components/tables/large/table/table.scss
@@ -79,3 +79,44 @@ table.table.table-lg {
     height: 100%;
   }
 }
+
+table.table.table-lg.alt-style {
+  border: 1px solid #{$peach-tint-100};
+  border-spacing: 0px;
+  background: #{$gray-800};
+  border-radius: $border-radius;
+  --bs-table-hover-bg: #{$gray-800};
+
+  tbody {
+      tr td {
+      background-color: #{$gray-800};
+      border-radius: 0;
+    }
+  }
+
+  tfoot tr td {
+      background-color: #{$gray-700};
+      padding: 16px 0px;
+  }
+
+  td:first-child, td:last-child {
+    width: 67px;
+    padding: 0px
+  }
+
+  tr:first-child td:first-child {
+    border-top-left-radius: $border-radius;
+  }
+
+  tr:first-child td:last-child {
+    border-top-right-radius: $border-radius;
+  }
+
+  tr:last-child td:first-child {
+    border-bottom-left-radius: $border-radius;
+  }
+
+  tr:last-child td:last-child {
+    border-bottom-right-radius: $border-radius;
+  }
+}
diff --git a/pgml-dashboard/src/components/tables/large/table/template.html b/pgml-dashboard/src/components/tables/large/table/template.html
@@ -11,4 +11,13 @@
     <%+ row %>
     <% } %>
   </tbody>
+  <% if !footers.is_empty() {%>
+    <tfoot>
+      <tr>
+        <% for footer in footers { %>
+          <td><%+ footer %></td>
+        <% } %>
+      </tr>
+    </tfoot>
+  <% } %>
 </table>
diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -6,6 +6,7 @@
 @import "../../src/components/badges/large/label/label.scss";
 @import "../../src/components/badges/small/label/label.scss";
 @import "../../src/components/breadcrumbs/breadcrumbs.scss";
+@import "../../src/components/buttons/goto_btn/goto_btn.scss";
 @import "../../src/components/cards/blog/article_preview/article_preview.scss";
 @import "../../src/components/cards/marketing/slider/slider.scss";
 @import "../../src/components/cards/marketing/twitter_testimonial/twitter_testimonial.scss";

diff --git a/pgml-dashboard/static/css/scss/abstracts/variables.scss b/pgml-dashboard/static/css/scss/abstracts/variables.scss
@@ -129,6 +129,9 @@ $magenta-shade-800: #450029;
 $magenta-shade-900: #2e001b;
 $magenta-shade-1000: #17000d;
 
+// Orange Shade
+$orange-shade-100: #FF9145;
+
 // Colors
 $primary: #0D0D0E;
 $secondary: $gray-100;