Skip to content

Commit 92bc2cf

Browse files
weaverryanweaverryan
committed
minor symfony#373 [UxSite] example tabbed-terminal block (Leannapelham)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [UxSite] example tabbed-terminal block | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Tickets | None | License | MIT The design allows for some live component demos (that need it) to show more than 2 code blocks. TODO: * [x] Make dependent form fields render tab over entire area (not just right side) * [x] Make contents dynamic again <img width="1245" alt="Screen Shot 2022-06-30 at 12 46 39 PM" src="https://user-images.githubusercontent.com/777948/176733093-1314e2c1-ddb1-49bf-9b17-d8459dd9baca.png"> Commits ------- b6df5df [UxSite] example tabbed-terminal block
2 parents 76184e3 + b6df5df commit 92bc2cf

File tree

7 files changed

+68
-16
lines changed

7 files changed

+68
-16
lines changed

‎ux.symfony.com/assets/app.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import './bootstrap';
1010
// imported to initialize global plugins
1111
import Dropdown from 'bootstrap/js/dist/dropdown';
1212
import Collapse from 'bootstrap/js/dist/collapse';
13+
import Tab from 'bootstrap/js/dist/tab';
1314

1415
// initialize symfony/ux-react
1516
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.nav-tabs {
2+
border-bottom: 1px solid $n-900;
3+
}
4+
5+
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
6+
color: #fff;
7+
background-color: $n-800;
8+
border-color: $n-800;
9+
}
10+
11+
.nav-link {
12+
color: #fff;
13+
}
14+
15+
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
16+
border-color: $n-800;
17+
color: $n-100;
18+
}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
.terminal-code {
99
background-color: $n-900;
1010
border-radius: 12px;
11-
padding: 10px 0px 0px 0px;
11+
padding: 0px;
1212
color: #fff;
1313
font-size: 12px;
1414
}
@@ -54,6 +54,11 @@
5454
.terminal-code.terminal-code-no-filename .terminal-body {
5555
border-radius: 12px;
5656
}
57+
/* for tabbed terminal blocks */
58+
.terminal-code .terminal-code.terminal-code-no-filename .terminal-body {
59+
border-top-right-radius: 0;
60+
border-top-left-radius: 0;
61+
}
5762
.homepage-terminal-swapper pre {
5863
margin-bottom: 0;
5964
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '~bootstrap';
33

44
@import './container';
5+
@import './navigation';
56
@import './images';
67
@import './type';
78
@import './terminal';

‎ux.symfony.com/templates/components/code_block.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
class: this.classString,
33
}) }}>
44
{% if showFilename %}
5-
<p class="pb-2 ps-4 mb-0">{{ filename }}</p>
5+
<p class="py-2 ps-4 mb-0">{{ filename }}</p>
66
{% endif %}
77
<div class="terminal-body ps-4" style="height: {{ height }}; overflow: auto;">
88
<pre class="pt-2">

‎ux.symfony.com/templates/liveDemoBase.html.twig‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
{% endfor %}
1717

1818
<div class="container-fluid container-xxl px-5 pt-5">
19+
{% block code_block_full %}
1920
<div class="arrow mb-3 d-none d-md-block"></div>
2021

2122
<div class="row mb-5">
@@ -26,6 +27,7 @@
2627
{% block code_block_right %}{% endblock %}
2728
</div>
2829
</div>
30+
{% endblock %}
2931

3032
<div class="p-4 markdown-container rainbow-gradient mt-5" id="demo" style="position: relative;">
3133
<div class="arrow-2 mb-3 d-sm-block" style="position:absolute; top:-55px; right: -25px;"></div>

‎ux.symfony.com/templates/live_component_demo/dependent_form_fields.html.twig‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,44 @@
11
{% extends 'liveDemoBase.html.twig' %}
22

3-
{% block code_block_left %}
4-
{% component code_block with { filename: 'src/Twig/MealPlannerComponent.php', height: '300px' } %}
5-
{% block content %}
6-
{{- source('@src/Twig/MealPlannerComponent.php')|cleanup_php_file -}}
7-
{% endblock %}
8-
{% endcomponent %}
9-
{% endblock %}
10-
11-
{% block code_block_right %}
12-
{% component code_block with { filename: 'templates/components/registration_form.html.twig', height: '300px' } %}
13-
{% block content %}
14-
{{- source('components/meal_planner.html.twig') -}}
15-
{% endblock %}
16-
{% endcomponent %}
3+
{% block code_block_full %}
4+
<div class="row mb-5">
5+
<div class="terminal-code">
6+
<ul class="nav nav-tabs">
7+
<li class="nav-item" role="presentation">
8+
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#demo_component" type="button" role="tab" aria-controls="demo_component" aria-selected="true">src/Twig/MealPlannerComponent.php</a>
9+
</li>
10+
<li class="nav-item" role="presentation">
11+
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#demo_template" type="button" role="tab" aria-controls="demo_template">templates/components/registration_form.html.twig</a>
12+
</li>
13+
<li class="nav-item" role="presentation">
14+
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#demo_form" type="button" role="tab" aria-controls="demo_form">src/Form/MealPlannerForm.php</a>
15+
</li>
16+
</ul>
17+
<div class="tab-content" id="code-tabs">
18+
<div class="tab-pane show active" id="demo_component">
19+
{% component code_block with { filename: 'src/Twig/MealPlannerComponent.php', showFilename: false, height: '300px' } %}
20+
{% block content %}
21+
{{- source('@src/Twig/MealPlannerComponent.php')|cleanup_php_file -}}
22+
{% endblock %}
23+
{% endcomponent %}
24+
</div>
25+
<div class="tab-pane" id="demo_template">
26+
{% component code_block with { filename: 'templates/components/meal_planner.html.twig', showFilename: false, height: '300px' } %}
27+
{% block content %}
28+
{{- source('components/meal_planner.html.twig') -}}
29+
{% endblock %}
30+
{% endcomponent %}
31+
</div>
32+
<div class="tab-pane" id="demo_form">
33+
{% component code_block with { filename: 'src/Form/MealPlannerForm.php', showFilename: false, height: '300px' } %}
34+
{% block content %}
35+
{{- source('@src/Form/MealPlannerForm.php')|cleanup_php_file -}}
36+
{% endblock %}
37+
{% endcomponent %}
38+
</div>
39+
</div>
40+
</div>
41+
</div>
1742
{% endblock %}
1843

1944
{% block demo_content %}

0 commit comments

Comments
 (0)