Skip to content

Commit 519fd5f

Browse files
javiereguiluzjaviereguiluz
committed
minor #2166 [Site] Clean templates & css (smnandre)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Clean templates & css * Clean demo templates * Remove unused helpers * Remove unused utilities Commits ------- 6babdc9 [Site] Clean templates & css
2 parents 292f41d + 6babdc9 commit 519fd5f

File tree

3 files changed

+86
-8
lines changed

3 files changed

+86
-8
lines changed

‎ux.symfony.com/assets/styles/app.scss

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,54 @@
1111
@import "../../vendor/twbs/bootstrap/scss/variables";
1212
@import "../../vendor/twbs/bootstrap/scss/variables-dark";
1313

14+
// Remove Bootstrap variables/overrides
15+
$theme-colors: map-remove($theme-colors, "info", "light");
16+
1417
// Boostrap remainder of required parts
1518
@import "../../vendor/twbs/bootstrap/scss/maps";
1619
@import "../../vendor/twbs/bootstrap/scss/mixins";
1720
@import "../../vendor/twbs/bootstrap/scss/utilities";
1821
@import "../../vendor/twbs/bootstrap/scss/root";
1922

23+
// Remove multiple utilities with a comma-separated list
24+
// Margin
25+
$utilities: map-remove(
26+
$utilities,
27+
// Background
28+
"bg-opacity",
29+
"subtle-background-color",
30+
31+
// Negative margin
32+
"negative-margin",
33+
"negative-margin-x",
34+
"negative-margin-y",
35+
"negative-margin-top",
36+
"negative-margin-end",
37+
"negative-margin-bottom",
38+
"negative-margin-start",
39+
// Link
40+
"link-opacity",
41+
"link-offset",
42+
"link-underline",
43+
"link-underline-opacity",
44+
// Border
45+
"border",
46+
"border-top",
47+
"border-end",
48+
"border-bottom",
49+
"border-start",
50+
"border-color",
51+
"subtle-border-color",
52+
"border-width",
53+
"border-opacity",
54+
// Position
55+
"top",
56+
"bottom",
57+
"start",
58+
"end",
59+
"translate-middle",
60+
);
61+
2062
// Layout & components
2163
@import "../../vendor/twbs/bootstrap/scss/reboot";
2264
@import "../../vendor/twbs/bootstrap/scss/type";
@@ -48,8 +90,23 @@
4890
// @import "../../vendor/twbs/bootstrap/scss/spinners";
4991
// @import "../../vendor/twbs/bootstrap/scss/offcanvas";
5092
// @import "../../vendor/twbs/bootstrap/scss/placeholders";
93+
5194
// Helpers
52-
@import "../../vendor/twbs/bootstrap/scss/helpers";
95+
@import "../../vendor/twbs/bootstrap/scss/helpers/clearfix";
96+
//@import "../../vendor/twbs/bootstrap/scss/helpers/color-bg";
97+
//@import "../../vendor/twbs/bootstrap/scss/helpers/colored-links";
98+
@import "../../vendor/twbs/bootstrap/scss/helpers/focus-ring";
99+
//@import "../../vendor/twbs/bootstrap/scss/helpers/icon-link";
100+
//@import "../../vendor/twbs/bootstrap/scss/helpers/ratio";
101+
//@import "../../vendor/twbs/bootstrap/scss/helpers/position";
102+
@import "../../vendor/twbs/bootstrap/scss/helpers/stacks";
103+
//@import "../../vendor/twbs/bootstrap/scss/helpers/visually-hidden";
104+
@import "../../vendor/twbs/bootstrap/scss/helpers/stretched-link";
105+
//@import "../../vendor/twbs/bootstrap/scss/helpers/text-truncation";
106+
//@import "../../vendor/twbs/bootstrap/scss/helpers/vr";
107+
108+
109+
53110
// Utilities
54111
@import "../../vendor/twbs/bootstrap/scss/utilities/api";
55112

‎ux.symfony.com/templates/demos/live_component/invoice.html.twig

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
{% extends 'demos/live_demo.html.twig' %}
22

33
{% block code_block_full %}
4-
<twig:Code:CodeWithExplanationRow filename="src/Twig/InvoiceCreator.php">
4+
<twig:Code:CodeWithExplanationRow filename="src/Twig/InvoiceCreator.php" sticky class="pt-5">
5+
## Main Component
6+
57
This main component keeps track of the `Invoice` (which may be new) and
68
a list of the "invoice items" - stored on a `LiveProp` called `$lineItems`.
79

@@ -16,7 +18,9 @@ This triggers the `removeLineItem()` method on this component, which
1618
removes the line item from the `$lineItems` array.
1719
</twig:Code:CodeWithExplanationRow>
1820

19-
<twig:Code:CodeWithExplanationRow filename="templates/components/InvoiceCreator.html.twig" reversed>
21+
<twig:Code:CodeWithExplanationRow filename="templates/components/InvoiceCreator.html.twig" sticky reversed class="pt-5">
22+
## Main Template
23+
2024
The template is fairly simple: rendering form fields with `data-model` to
2125
bind to writable `LiveProp`'s along with their validation errors.
2226

@@ -26,7 +30,9 @@ data: `productId`, `quantity`, and `isEditing`. It also passes a `key`,
2630
which is needed so LiveComponents can track which row is which.
2731
</twig:Code:CodeWithExplanationRow>
2832

29-
<twig:Code:CodeWithExplanationRow filename="src/Twig/InvoiceCreatorLineItem.php">
33+
<twig:Code:CodeWithExplanationRow filename="src/Twig/InvoiceCreatorLineItem.php" sticky class="pt-5">
34+
## Child Component
35+
3036
The child component for each "line item". This handles validating, saving,
3137
and changing the "edit" state of the line item.
3238

@@ -41,7 +47,14 @@ by emitting events - e.g. `line_item:save`.
4147
> "edit" mode.
4248
</twig:Code:CodeWithExplanationRow>
4349

44-
<twig:Code:CodeWithExplanationRow filename="templates/components/InvoiceCreatorLineItem.html.twig" reversed>
50+
<twig:Code:CodeWithExplanationRow
51+
filename="templates/components/InvoiceCreatorLineItem.html.twig"
52+
sticky
53+
reversed
54+
class="pt-5"
55+
>
56+
## Item template
57+
4558
Nothing too fancy here: some `data-model` elements and `data-action="live#action"`
4659
buttons.
4760

‎ux.symfony.com/templates/demos/live_component/product_form.html.twig

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
{% endblock %}
66

77
{% block code_block_full %}
8-
<twig:Code:CodeWithExplanationRow filename="src/Twig/NewProductForm.php">
8+
<twig:Code:CodeWithExplanationRow filename="src/Twig/NewProductForm.php" sticky>
9+
## New Product Form
10+
911
Live component with a form, `ValidatableComponentTrait` and a
1012
`saveProduct()` LiveAction for instant validation & an AJAX submit.
1113

@@ -19,14 +21,20 @@ Then, thanks to the `Category` type-hint + Symfony's standard
1921
Symfony uses that id to query for the `Category` object.
2022
</twig:Code:CodeWithExplanationRow>
2123

22-
<twig:Code:CodeWithExplanationRow filename="templates/components/NewProductForm.html.twig" reversed>
24+
<twig:Code:CodeWithExplanationRow filename="templates/components/NewProductForm.html.twig" sticky reversed>
25+
## New Product Template
26+
2327
Near the bottom, this renders the `BootstrapModal` component with another
2428
component - `NewCategoryForm` - inside of it. Opening the modal is done entirely
2529
with normal Bootstrap logic: an `a` tag with `data-bs-toggle="modal"`
2630
and `data-bs-target="#new-category-modal"`.
2731
</twig:Code:CodeWithExplanationRow>
2832

29-
<twig:Code:CodeWithExplanationRow filename="src/Twig/NewCategoryForm.php">
33+
<twig:Code:CodeWithExplanationRow
34+
filename="src/Twig/NewCategoryForm.php" sticky
35+
>
36+
## New Category Form
37+
3038
This component opens up in the modal! It has a `#[LiveAction]` that saves
3139
the new `Category` to the database and then does two important things:
3240

0 commit comments

Comments
 (0)