From 1290fa1b7f281b66cf3e6aaf76875b2e7a471abb Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Sat, 17 Jun 2023 11:36:48 -0600
Subject: [PATCH] refactor admonitions, fix 802
---
pgml-dashboard/content/blog/style_guide.md | 39 +++++++++++++++
.../css/scss/components/_admonitions.scss | 48 +++++++++++--------
2 files changed, 68 insertions(+), 19 deletions(-)
diff --git a/pgml-dashboard/content/blog/style_guide.md b/pgml-dashboard/content/blog/style_guide.md
index b60f94258..3f3ed164a 100644
--- a/pgml-dashboard/content/blog/style_guide.md
+++ b/pgml-dashboard/content/blog/style_guide.md
@@ -90,6 +90,35 @@ This is a Danger admonition.
!!!
+#### Example
+
+Here is an admonition with many elemnets inside.
+
+!!! info
+
+Explination about your information
+
+``` sql
+SELECT pgml.train(
+ 'Orders Likely To Be Returned', -- name of your model
+ 'regression', -- objective (regression or classification)
+ 'public.orders', -- table
+ 'refunded', -- label (what are we predicting)
+ 'xgboost' -- algorithm
+);
+
+SELECT
+ pgml.predict(
+ 'Orders Likely To Be Returned',
+ ARRAY[orders.*]) AS refund_likelihood,
+ orders.*
+FROM orders
+ORDER BY refund_likelyhood DESC
+LIMIT 100;
+```
+
+!!!
+
### Code
#### Inline Code
@@ -294,3 +323,13 @@ LIMIT 100;
!!!
+### Tables
+
+Tables are implemented using normal markdown. However, unlike normal markdownm, any table that overflows the article area will x-scroll by default.
+
+| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9 | Column 10 |
+|-------------|----------|----------|----------|----------|----------|----------|----------|----------|-----------|
+| row 1 | text | text | text | text | text | text | text | text | text |
+| row 2 | text | text | text | text | text | text | text | text | text |
+| row 3 | text | text | text | text | text | text | text | text | text |
+
diff --git a/pgml-dashboard/static/css/scss/components/_admonitions.scss b/pgml-dashboard/static/css/scss/components/_admonitions.scss
index 357a84e83..e145e7dc8 100644
--- a/pgml-dashboard/static/css/scss/components/_admonitions.scss
+++ b/pgml-dashboard/static/css/scss/components/_admonitions.scss
@@ -1,56 +1,66 @@
-.admonition {
+@mixin admonition($primary-color) {
@extend .alert;
@extend .my-4;
- padding: 24px 32px;
+
+ $sm-space: calc($spacer * 0.75);
+ $md-space: calc($spacer * 1.50);
+ $lg-space: calc($spacer * 1.75);
+
+ display: flex;
+ flex-direction: column;
+ gap: $md-space;
+
+ padding: 0 $lg-space $md-space $lg-space;
color: #{$gray-100};
- border-color: var(--admonition-color);
+ border-color: $primary-color;
.admonition-title {
@extend .gap-2;
display: flex;
align-items: center;
- border-radius: 8px 8px 0px 0px;
- padding: 24px 32px 24px 32px;
+ border-radius: $border-radius $border-radius 0px 0px;
+ padding: $sm-space $lg-space;
background-color: #{$gray-700};
font-size: 24px;
- margin: -24px -32px 24px -32px;
+ margin: 0 -#{$lg-space};
}
+ // This is for icon containers, mostly used in admonition-title.
.admonition-img {
display: flex;
align-items: center;
justify-content: center;
- padding: 8px;
+ padding: calc($spacer * 0.5);
border-radius: var(--bs-border-radius-pill);
- background-color: var(--admonition-color);
+ background-color: $primary-color;
+ }
+
+ pre {
+ margin: 0px;
}
}
.admonition-note, .admonition-abstract, .admonition-info {
- @extend .admonition;
- --admonition-color: #{$neon-tint-200};
+ @include admonition($neon-tint-200);
}
.admonition-tip, .admonition-example, .admonition-question {
- @extend .admonition;
- --admonition-color: #{$violet-shade-100};
+ @include admonition($violet-shade-100);
}
.admonition-success, .admonition-quote {
- @extend .admonition;
- --admonition-color: #{$teal-tint-100};
+ @include admonition($teal-tint-100);
}
.admonition-bug, .admonition-warning, .admonition-fail, .admonition-danger {
- @extend .admonition;
- --admonition-color: #{$peach-tint-100};
+ @include admonition($peach-tint-100);
}
.admonition-generic {
- @extend .admonition;
- --admonition-color: #{$slate-tint-1000};
+ @include admonition($slate-tint-1000);
padding: 0px;
+ gap: 0;
.admonition-title {
display: none;
@@ -62,7 +72,7 @@
div.code-block {
border: none !important;
- border-radius: 8px 8px 0px 0px !important;
+ border-radius: $border-radius $border-radius 0px 0px !important;
margin: 0px 0px !important;
pre {
border-radius: inherit;
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy