square buttons

postgresml · chillenberger · Jun 15, 2023 · Jun 13, 2023 · Jun 13, 2023 · Jun 14, 2023
commit ace765e6473bdfeb84ff65d290125a27c90afdad
diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss
@@ -1,7 +1,6 @@
 .btn {
-    --bs-btn-border-radius: var(--bs-border-radius-pill);
    --bs-btn-padding-x: 22px;
-    --bs-btn-padding-y: 12px; // Need to decrease from style because border radius gets in the way.
+    --bs-btn-padding-y: 12px;

    display: flex;
    justify-content: center;

diff --git a/pgml-dashboard/static/js/btn-secondary.js b/pgml-dashboard/static/js/btn-secondary.js
@@ -47,8 +47,10 @@ export default class extends Controller {
    drawBorder(btn, canvas) {
        let btnMarginX = 22
        let btnMarginY = 12
+        let borderRadius = 8;
        let width = btn.offsetWidth
        let height = btn.offsetHeight
+

        canvas.width = width
        canvas.height = height
@@ -59,13 +61,13 @@ export default class extends Controller {

        // Draw border compensating for border thickenss
        var ctx = canvas.getContext("2d")
-        ctx.moveTo(height/2-1, 1)
-        ctx.lineTo(width-height/2-1, 1)
-        ctx.arcTo(width-1, 1, width-1, height/2-1, height/2-1)
-        ctx.arcTo(width-1, height-1, width-height/2-1, height-1, height/2-1)
-        ctx.lineTo(height/2-1, height-1)
-        ctx.arcTo(1, height-1, 1, height/2-1, height/2-1)
-        ctx.arcTo(1, 1, height/2-1, 1, height/2-1)
+        ctx.moveTo(borderRadius, 1)
+        ctx.lineTo(width-borderRadius-1, 1)
+        ctx.arcTo(width-1, 1, width-1, borderRadius-1, borderRadius-1)
+        ctx.arcTo(width-1, height-1, width-borderRadius-1, height-1, borderRadius-1)
+        ctx.lineTo(borderRadius-1, height-1)
+        ctx.arcTo(1, height-1, 1, borderRadius-1, borderRadius-1)
+        ctx.arcTo(1, 1, borderRadius-1, 1, borderRadius-1)

        var gradient = ctx.createLinearGradient(0, canvas.height, canvas.width, 0)
        gradient.addColorStop(0, "rgb(217, 64, 255)");

diff --git a/pgml-dashboard/templates/components/github_icon.html b/pgml-dashboard/templates/components/github_icon.html
@@ -1,4 +1,4 @@
-<a class="d-flex align-items-center nav-link p-0" href="https://github.com/postgresml/postgresml">
+<a class="d-flex align-items-center nav-link p-0 border-bottom-0" href="https://github.com/postgresml/postgresml">
    <span class="badge github-badge"><p>Stars | 3.3K</p></span>
    <svg width="35" height="35" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 0.25C17.3736 0.25 14.7728 0.763591 12.3463 1.76145C9.91982 2.75931 7.71504 4.22189 5.85786 6.06569C2.10714 9.78942 0 14.8399 0 20.106C0 28.8824 5.74 36.3284 13.68 38.9692C14.68 39.1281 15 38.5126 15 37.9764V34.6208C9.46 35.8121 8.28 31.9601 8.28 31.9601C7.36 29.6568 6.06 29.0412 6.06 29.0412C4.24 27.8102 6.2 27.8499 6.2 27.8499C8.2 27.9889 9.26 29.895 9.26 29.895C11 32.9132 13.94 32.0196 15.08 31.5431C15.26 30.2525 15.78 29.3788 16.34 28.8824C11.9 28.386 7.24 26.6784 7.24 19.1132C7.24 16.9092 8 15.142 9.3 13.7322C9.1 13.2358 8.4 11.1708 9.5 8.49025C9.5 8.49025 11.18 7.95414 15 10.5156C16.58 10.0787 18.3 9.86032 20 9.86032C21.7 9.86032 23.42 10.0787 25 10.5156C28.82 7.95414 30.5 8.49025 30.5 8.49025C31.6 11.1708 30.9 13.2358 30.7 13.7322C32 15.142 32.76 16.9092 32.76 19.1132C32.76 26.6982 28.08 28.3661 23.62 28.8625C24.34 29.4781 25 30.6893 25 32.5359V37.9764C25 38.5126 25.32 39.1479 26.34 38.9692C34.28 36.3085 40 28.8824 40 20.106C40 17.4985 39.4827 14.9165 38.4776 12.5075C37.4725 10.0984 35.9993 7.9095 34.1421 6.06569C32.285 4.22189 30.0802 2.75931 27.6537 1.76145C25.2272 0.763591 22.6264 0.25 20 0.25Z" fill="#FAFAFA"/>

diff --git a/pgml-dashboard/templates/content/article.html b/pgml-dashboard/templates/content/article.html
@@ -1,3 +1,5 @@
+<% use crate::utils::config::standalone_dashboard; %>
+
 <article class="docs col-12 col-xxl-8 col-xl-9 overflow-x-auto py-4 px-xl-5 order-3 order-xxl-2">
  <%- content %>

@@ -6,11 +8,13 @@ <h2 class="h2 mb-3">Have Questions?</h2>
    <p><a href="https://discord.gg/DmyJP3qJ7U">Join our Discord</a> and ask us anything! We're friendly and would love to talk about PostgresML.</p>
  </div>

+  <% if !standalone_dashboard() { %>
  <div class="mt-5 pb-3">
    <h2 class="h2 mb-3">Try It Out</h2>
    <p>Try PostresML using our <strong>free</strong> serverless cloud. It comes with GPUs, 5 GiB of space and plenty of datasets to get you started.</p>
    <div class="d-flex justify-content-center gap-2 pt-3 pb-4">
      <a class="btn btn-primary" href="<%- crate::utils::config::signup_url() %>">Get Started</a>
    </div>
  </div>
+  <% } %>
 </article>