Skip to content

Commit 737e9c4

Browse files
rosierrosier
committed
Upgrade Bootstrap javascript files from 4.6.2 to 5.3.7
Also upgrade popper from popper.js to @popperjs/core 2.11
1 parent c1691a8 commit 737e9c4

File tree

6 files changed

+41
-76
lines changed

6 files changed

+41
-76
lines changed

‎assets/app.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@ import 'highlight.js/styles/github-dark-dimmed.css';
55
import 'lato-font/css/lato-font.css';
66

77
// loads the Bootstrap plugins
8-
import 'bootstrap/js/dist/alert';
9-
import 'bootstrap/js/dist/collapse';
10-
import 'bootstrap/js/dist/dropdown';
11-
import 'bootstrap/js/dist/tab';
12-
import 'bootstrap/js/dist/modal';
13-
import 'jquery'
8+
import 'bootstrap';
149

1510
// loads the code syntax highlighting library
1611
import './js/highlight.js';

‎importmap.php

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,11 @@
2323
'@hotwired/stimulus' => [
2424
'version' => '3.2.2',
2525
],
26-
'bootstrap/js/dist/alert' => [
27-
'version' => '4.6.2',
26+
'@popperjs/core' => [
27+
'version' => '2.11.8',
2828
],
29-
'bootstrap/dist/css/bootstrap.min.css' => [
30-
'version' => '4.6.2',
31-
'type' => 'css',
29+
'bootstrap' => [
30+
'version' => '5.3.7',
3231
],
3332
'jquery' => [
3433
'version' => '3.7.1',
@@ -55,18 +54,6 @@
5554
'version' => '4.6.13',
5655
'type' => 'css',
5756
],
58-
'bootstrap/js/dist/collapse' => [
59-
'version' => '4.6.2',
60-
],
61-
'bootstrap/js/dist/dropdown' => [
62-
'version' => '4.6.2',
63-
],
64-
'bootstrap/js/dist/tab' => [
65-
'version' => '4.6.2',
66-
],
67-
'bootstrap/js/dist/modal' => [
68-
'version' => '4.6.2',
69-
],
7057
'highlight.js/styles/github-dark-dimmed.css' => [
7158
'version' => '11.9.0',
7259
'type' => 'css',
@@ -75,9 +62,6 @@
7562
'version' => '3.0.0',
7663
'type' => 'css',
7764
],
78-
'popper.js' => [
79-
'version' => '1.16.1',
80-
],
8165
'typeahead.js' => [
8266
'version' => '0.11.1',
8367
],

‎templates/base.html.twig

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
<!DOCTYPE html>
77
<html lang="{{ app.locale }}" dir="{{ is_rtl() ? 'rtl' : 'ltr' }}">
88
<head>
9-
<meta charset="UTF-8" />
10-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
11-
<meta name="view-transition" content="same-origin" />
9+
<meta charset="utf-8">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<meta name="view-transition" content="same-origin">
1212
<title>{% block title %}Symfony Demo application{% endblock %}</title>
1313
<link rel="alternate" type="application/rss+xml" title="{{ 'rss.title'|trans }}" href="{{ path('blog_rss') }}">
14+
<link rel="shortcut icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
1415

1516
{#
1617
Those two blocks defines frontend entrypoint for CSS and JavaScript assets
@@ -20,7 +21,6 @@
2021
{% block javascripts %}
2122
{% block importmap %}{{ importmap('app') }}{% endblock %}
2223
{% endblock %}
23-
<link rel="shortcut icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
2424
</head>
2525

2626
<body id="{% block body_id %}{% endblock %}" class="{{ is_rtl(app.locale) ? 'rtl' }}">
@@ -33,12 +33,11 @@
3333
<a class="navbar-brand" href="{{ path('homepage') }}">
3434
Symfony Demo
3535
</a>
36-
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#appNavbar" aria-controls="appNavbar" aria-expanded="false" aria-label="Toggle navigation">
37-
<span class="navbar-toggler-icon"></span>
36+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#appNavbar" aria-controls="appNavbar" aria-expanded="false" aria-label="Toggle navigation">
37+
<span class="navbar-toggler-icon"></span>
3838
</button>
39-
40-
<div class="navbar-collapse collapse" id="appNavbar">
41-
<ul class="navbar-nav ml-auto">
39+
<div class="collapse navbar-collapse" id="appNavbar">
40+
<ul class="navbar-nav">
4241
{% block header_navigation_links %}
4342
<li class="nav-item{{ _route == 'blog_index' ? ' active' : '' }}">
4443
<a class="nav-link" href="{{ path('blog_index') }}">
@@ -60,24 +59,22 @@
6059

6160
{% if app.user %}
6261
<li class="nav-item dropdown">
63-
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="user">
64-
<twig:ux:icon name="tabler:user"/>
65-
<span class="caret"></span>
66-
<span class="sr-only">{{ app.user.fullname }}</span>
62+
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
63+
<twig:ux:icon name="tabler:user"/> {{ app.user.fullname }}
6764
</a>
68-
<div class="dropdown-menu user" role="menu" aria-labelledby="user">
69-
<a class="dropdown-item" href="{{ path('user_edit') }}">
65+
<ul class="dropdown-menu">
66+
<li><a class="dropdown-item" href="{{ path('user_edit') }}">
7067
<twig:ux:icon name="tabler:id-badge-2"/> {{ 'menu.user'|trans }}
71-
</a>
72-
<div class="dropdown-divider"></div>
73-
<a class="dropdown-item" href="{{ logout_path() }}">
68+
</a></li>
69+
<li><hr class="dropdown-divider"></li>
70+
<li><a class="dropdown-item" href="{{ logout_path() }}">
7471
<twig:ux:icon name="tabler:logout"/> {{ 'menu.logout'|trans }}
75-
</a>
76-
</div>
72+
</a></li>
73+
</ul>
7774
</li>
7875
{% endif %}
7976

80-
<li class="nav-item dropdown">
77+
<li class="nav-item">
8178
{% from 'default/_language_selector.html.twig' import render_language_selector %}
8279
{{ render_language_selector() }}
8380
</li>

‎templates/debug/source_code.html.twig

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{{ 'help.show_code'|trans|raw }}
44
</p>
55

6-
<button type="button" class="btn btn-secondary py-3 btn-lg btn-block" data-toggle="modal" data-target="#sourceCodeModal">
6+
<button type="button" class="btn btn-secondary py-3 btn-lg btn-block" data-bs-toggle="modal" data-bs-target="#sourceCodeModal">
77
<twig:ux:icon name="tabler:code"/> {{ 'action.show_code'|trans }}
88
</button>
99

@@ -12,23 +12,21 @@
1212
<div class="modal-content">
1313
<div class="modal-header">
1414
<h5 class="modal-title"><twig:ux:icon name="tabler:code"/> {{ 'title.source_code'|trans }}</h5>
15-
<button type="button" class="close" data-dismiss="modal" aria-label="{{ 'action.close'|trans }}">
16-
<span aria-hidden="true">&times;</span>
17-
</button>
15+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'action.close'|trans }}"></button>
1816
</div>
1917

2018
<div class="modal-body">
2119
<ul class="nav nav-tabs" id="myTab" role="tablist">
22-
<li class="nav-item">
23-
<a class="nav-link active" id="controller-tab" data-toggle="tab" href="#controller-code" role="tab" aria-controls="home" aria-selected="true" target="_blank">{{ 'title.controller_code'|trans }}</a>
20+
<li class="nav-item" role="presentation">
21+
<button class="nav-link active" id="controller-tab" data-bs-toggle="tab" data-bs-target="#controller-code" type="button" role="tab" aria-controls="controller-code" aria-selected="true">{{ 'title.controller_code'|trans }}</button>
2422
</li>
25-
<li class="nav-item">
26-
<a class="nav-link" id="template-tab" data-toggle="tab" href="#template-code" role="tab" aria-controls="profile" aria-selected="false" target="_blank">{{ 'title.twig_template_code'|trans }}</a>
23+
<li class="nav-item" role="presentation">
24+
<button class="nav-link" id="template-tab" data-bs-toggle="tab" data-bs-target="#template-code" type="button" role="tab" aria-controls="template-code" aria-selected="false">{{ 'title.twig_template_code'|trans }}</button>
2725
</li>
2826
</ul>
2927

3028
<div class="tab-content" id="myTabContent">
31-
<div class="tab-pane show active" id="controller-code" role="tabpanel" aria-labelledby="controller-tab">
29+
<div class="tab-pane show active" id="controller-code" role="tabpanel" aria-labelledby="controller-tab" tabindex="0">
3230
{% if controller %}
3331
<p class="file-link">{{ link_source_file(controller.file_path, controller.starting_line) }}</p>
3432
<pre><code class="php">{{ controller.source_code }}</code></pre>
@@ -37,7 +35,7 @@
3735
{% endif %}
3836
</div>
3937

40-
<div class="tab-pane" id="template-code" role="tabpanel" aria-labelledby="template-tab">
38+
<div class="tab-pane" id="template-code" role="tabpanel" aria-labelledby="template-tab" tabindex="0">
4139
<p class="file-link">{{ link_source_file(template.file_path, template.starting_line) }}</p>
4240
<pre><code class="twig">{{ template.source_code }}</code></pre>
4341
</div>

‎templates/default/_flash_messages.html.twig

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,10 @@
1818
<div class="messages">
1919
{% for type, messages in app.flashes %}
2020
{% for message in messages %}
21-
{# Bootstrap alert, see https://getbootstrap.com/docs/3.4/components/#alerts #}
21+
{# Bootstrap alerts, see https://getbootstrap.com/docs/5.3/components/alerts/#dismissing #}
2222
<div class="alert alert-dismissible alert-{{ type }} fade show" role="alert">
23-
<button type="button" class="close" data-dismiss="alert" aria-label="{{ 'action.close'|trans }}">
24-
<span aria-hidden="true">&times;</span>
25-
</button>
26-
2723
{{ message|trans }}
24+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ 'action.close'|trans }}"></button>
2825
</div>
2926
{% endfor %}
3027
{% endfor %}

‎templates/default/_language_selector.html.twig

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,28 @@
11
{% macro render_language_selector(display_current_language = false) %}
2-
<a href="#" class="nav-link dropdown-toggle language-selector-dropdown-button" data-toggle="modal" data-target="#locale-selector-modal" role="button" id="locales">
2+
<a class="nav-link language-selector-dropdown-button" href="#" role="button" data-bs-toggle="modal" data-bs-target="#locale-selector-modal">
33
<twig:ux:icon name="tabler:world"/>
44
{% if display_current_language %}
55
<span class="current-language">{{ app.locale|locale_name }}</span>
66
{% endif %}
7-
<span class="caret"></span>
8-
<span class="sr-only">{{ 'menu.choose_language'|trans }}</span>
7+
{{ 'menu.choose_language'|trans }}
98
</a>
109

1110
<div id="locale-selector-modal" class="modal" tabindex="-1" aria-hidden="true">
1211
<div class="modal-lg modal-dialog modal-dialog-centered">
1312
<div class="modal-content">
1413
<div class="modal-header">
15-
<p class="modal-title" lang="en">
16-
{# display this title always in English to make the language selector easier to use #}
17-
Choose your language
18-
</p>
19-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
20-
<span aria-hidden="true">&times;</span>
21-
</button>
14+
{# Display this title always in English to make the language selector easier to use #}
15+
<h1 class="modal-title" lang="en">Choose your language</h1>
16+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'action.close'|trans }}"></button>
2217
</div>
2318

2419
<div class="modal-body">
2520
<ul class="locales">
2621
{% for locale in locales() %}
27-
{% set is_active = app.locale == locale.code %}
28-
<li class="{{ is_active ? 'active' }} {{ is_rtl(locale.code) ? 'rtl' }}" translate="no">
22+
{%- set is_active = app.locale == locale.code -%}
23+
<li class="{{ is_active ? 'active' }}{{ is_rtl(locale.code) ? ' rtl' }}" translate="no">
2924
<a class="stretched-link" lang="{{ locale.code }}" hreflang="{{ locale.code }}" href="{{ path(app.current_route ?? 'blog_index', app.current_route_parameters|merge({_locale: locale.code})) }}">
30-
{{ locale.name|capitalize }}
31-
<small>{{ locale.code }}</small>
25+
{{ locale.name|capitalize }} <small>{{ locale.code }}</small>
3226
</a>
3327
</li>
3428
{% endfor %}

0 commit comments

Comments
 (0)