Skip to content

Commit 97f7d4e

Browse files
refactor admonitions, fix 802 (#757)
1 parent 4ec91d2 commit 97f7d4e

File tree

2 files changed

+68
-19
lines changed

2 files changed

+68
-19
lines changed

pgml-dashboard/content/blog/style_guide.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,35 @@ This is a Danger admonition.
9090

9191
!!!
9292

93+
#### Example
94+
95+
Here is an admonition with many elemnets inside.
96+
97+
!!! info
98+
99+
Explination about your information
100+
101+
``` sql
102+
SELECT pgml.train(
103+
'Orders Likely To Be Returned', -- name of your model
104+
'regression', -- objective (regression or classification)
105+
'public.orders', -- table
106+
'refunded', -- label (what are we predicting)
107+
'xgboost' -- algorithm
108+
);
109+
110+
SELECT
111+
pgml.predict(
112+
'Orders Likely To Be Returned',
113+
ARRAY[orders.*]) AS refund_likelihood,
114+
orders.*
115+
FROM orders
116+
ORDER BY refund_likelyhood DESC
117+
LIMIT 100;
118+
```
119+
120+
!!!
121+
93122
### Code
94123

95124
#### Inline Code
@@ -294,3 +323,13 @@ LIMIT 100;
294323

295324
!!!
296325

326+
### Tables
327+
328+
Tables are implemented using normal markdown. However, unlike normal markdownm, any table that overflows the article area will x-scroll by default.
329+
330+
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 | Column 7 | Column 8 | Column 9 | Column 10 |
331+
|-------------|----------|----------|----------|----------|----------|----------|----------|----------|-----------|
332+
| row 1 | text | text | text | text | text | text | text | text | text |
333+
| row 2 | text | text | text | text | text | text | text | text | text |
334+
| row 3 | text | text | text | text | text | text | text | text | text |
335+

pgml-dashboard/static/css/scss/components/_admonitions.scss

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,66 @@
1-
.admonition {
1+
@mixin admonition($primary-color) {
22
@extend .alert;
33
@extend .my-4;
4-
padding: 24px 32px;
4+
5+
$sm-space: calc($spacer * 0.75);
6+
$md-space: calc($spacer * 1.50);
7+
$lg-space: calc($spacer * 1.75);
8+
9+
display: flex;
10+
flex-direction: column;
11+
gap: $md-space;
12+
13+
padding: 0 $lg-space $md-space $lg-space;
514
color: #{$gray-100};
6-
border-color: var(--admonition-color);
15+
border-color: $primary-color;
716

817
.admonition-title {
918
@extend .gap-2;
1019

1120
display: flex;
1221
align-items: center;
13-
border-radius: 8px 8px 0px 0px;
14-
padding: 24px 32px 24px 32px;
22+
border-radius: $border-radius $border-radius 0px 0px;
23+
padding: $sm-space $lg-space;
1524
background-color: #{$gray-700};
1625
font-size: 24px;
17-
margin: -24px -32px 24px -32px;
26+
margin: 0 -#{$lg-space};
1827
}
1928

29+
// This is for icon containers, mostly used in admonition-title.
2030
.admonition-img {
2131
display: flex;
2232
align-items: center;
2333
justify-content: center;
24-
padding: 8px;
34+
padding: calc($spacer * 0.5);
2535
border-radius: var(--bs-border-radius-pill);
26-
background-color: var(--admonition-color);
36+
background-color: $primary-color;
37+
}
38+
39+
pre {
40+
margin: 0px;
2741
}
2842
}
2943

3044
.admonition-note, .admonition-abstract, .admonition-info {
31-
@extend .admonition;
32-
--admonition-color: #{$neon-tint-200};
45+
@include admonition($neon-tint-200);
3346
}
3447

3548
.admonition-tip, .admonition-example, .admonition-question {
36-
@extend .admonition;
37-
--admonition-color: #{$violet-shade-100};
49+
@include admonition($violet-shade-100);
3850
}
3951

4052
.admonition-success, .admonition-quote {
41-
@extend .admonition;
42-
--admonition-color: #{$teal-tint-100};
53+
@include admonition($teal-tint-100);
4354
}
4455

4556
.admonition-bug, .admonition-warning, .admonition-fail, .admonition-danger {
46-
@extend .admonition;
47-
--admonition-color: #{$peach-tint-100};
57+
@include admonition($peach-tint-100);
4858
}
4959

5060
.admonition-generic {
51-
@extend .admonition;
52-
--admonition-color: #{$slate-tint-1000};
61+
@include admonition($slate-tint-1000);
5362
padding: 0px;
63+
gap: 0;
5464

5565
.admonition-title {
5666
display: none;
@@ -62,7 +72,7 @@
6272

6373
div.code-block {
6474
border: none !important;
65-
border-radius: 8px 8px 0px 0px !important;
75+
border-radius: $border-radius $border-radius 0px 0px !important;
6676
margin: 0px 0px !important;
6777
pre {
6878
border-radius: inherit;

0 commit comments

Comments
 (0)