Skip to content

Commit 37813f6

Browse files
javiereguiluzjaviereguiluz
committed
feature #1478 Display the language selector in the homepage (javiereguiluz)
This PR was squashed before being merged into the main branch. Discussion ---------- Display the language selector in the homepage Fixes #1429 and does other minor design tweaks for the homepage. It looks like this when the current language is `hr`: ![language-selector-homepage](https://github.com/symfony/demo/assets/73419/c8ac7193-2478-41ec-8bb8-7ac74d171aee) Commits ------- 9a8644c Display the language selector in the homepage
2 parents 263c879 + 9a8644c commit 37813f6

File tree

4 files changed

+82
-44
lines changed

4 files changed

+82
-44
lines changed

‎assets/styles/app.scss

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@ header nav.navbar .nav-item {
139139
margin-left: 20px;
140140
}
141141

142+
.modal-backdrop {
143+
/* needed to lower the default 1,040 value which interferes with some styles */
144+
z-index: 1024;
145+
}
142146
#locale-selector-modal {
143147
background: var(--text-color);
144148
}
@@ -384,25 +388,49 @@ body#homepage {
384388
text-align: center;
385389
}
386390
body#homepage .page-header {
391+
display: flex;
392+
justify-content: space-between;
387393
padding-bottom: 9.5px;
388-
margin: 42px 0px 21px;
394+
margin: 60px 0 30px;
389395
}
390396
body#homepage .page-header h1 {
391-
font-size: 39px;
392-
margin-top: 21px;
393-
margin-bottom: 10.5px
397+
font-size: 32px;
398+
margin: 0;
399+
}
400+
body#homepage .page-header a.language-selector-dropdown-button {
401+
align-items: center;
402+
border: 2px solid var(--gray-300);
403+
border-radius: 4px;
404+
color: inherit;
405+
display: inline-flex;
406+
font-size: 16px;
407+
line-height: 1;
408+
padding: 5px 15px;
409+
}
410+
body#homepage .page-header a.language-selector-dropdown-button:hover {
411+
background: var(--gray-100);
412+
border-color: var(--gray-800);
413+
}
414+
body#homepage .page-header a.language-selector-dropdown-button .current-language {
415+
display: inline-flex;
416+
margin-inline: 5px 10px;
394417
}
395418
body#homepage .jumbotron {
396-
padding: 48px 60px !important;
419+
display: flex;
420+
flex-direction: column;
421+
height: 100%;
422+
justify-content: center;
423+
padding: 45px 15px;
397424
}
398425
body#homepage .jumbotron .btn {
399426
font-size: 19px;
400427
line-height: 1.33333;
401428
padding: 18px 27px;
402429
border-radius: 6px;
430+
margin-top: 20px;
403431
}
404432
body#homepage .jumbotron P {
405-
margin-bottom: 15px;
433+
margin-bottom: 0;
406434
font-size: 23px;
407435
font-weight: 400
408436
}

‎templates/base.html.twig

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -77,48 +77,14 @@
7777
{% endif %}
7878

7979
<li class="nav-item dropdown">
80-
<a href="#" class="nav-link dropdown-toggle" data-toggle="modal" data-target="#locale-selector-modal" role="button" id="locales">
81-
<i class="fa fa-solid fa-globe" aria-hidden="true"></i>
82-
<span class="caret"></span>
83-
<span class="sr-only">{{ 'menu.choose_language'|trans }}</span>
84-
</a>
80+
{% from 'default/_language_selector.html.twig' import render_language_selector %}
81+
{{ render_language_selector() }}
8582
</li>
8683
</ul>
8784
</div>
8885
</div>
8986
</nav>
9087
</header>
91-
92-
<div id="locale-selector-modal" class="modal" tabindex="-1" aria-hidden="true">
93-
<div class="modal-lg modal-dialog modal-dialog-centered">
94-
<div class="modal-content">
95-
<div class="modal-header">
96-
<p class="modal-title" lang="en">
97-
{# display this title always in English to make the language selector easier to use #}
98-
Choose your language
99-
</p>
100-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
101-
<span aria-hidden="true">&times;</span>
102-
</button>
103-
</div>
104-
105-
<div class="modal-body">
106-
<ul class="locales">
107-
{% for locale in locales() %}
108-
{% set is_active = app.request.locale == locale.code %}
109-
{% set is_rtl = locale.code in ['ar', 'fa', 'he'] %}
110-
<li class="{{ is_active ? 'active' }} {{ is_rtl ? 'rtl' }}" translate="no">
111-
<a class="stretched-link" lang="{{ locale.code }}" hreflang="{{ locale.code }}" href="{{ path(app.request.get('_route', 'blog_index'), app.request.get('_route_params', [])|merge({_locale: locale.code})) }}">
112-
{{ locale.name|capitalize }}
113-
<small>{{ locale.code }}</small>
114-
</a>
115-
</li>
116-
{% endfor %}
117-
</ul>
118-
</div>
119-
</div>
120-
</div>
121-
</div>
12288
{% endblock %}
12389

12490
<div class="container body-container">

‎templates/default/_language_selector.html.twig

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{% 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">
3+
<i class="fa fa-solid fa-globe" aria-hidden="true"></i>
4+
{% if display_current_language %}
5+
<span class="current-language">{{ app.request.locale|locale_name }}</span>
6+
{% endif %}
7+
<span class="caret"></span>
8+
<span class="sr-only">{{ 'menu.choose_language'|trans }}</span>
9+
</a>
10+
11+
<div id="locale-selector-modal" class="modal" tabindex="-1" aria-hidden="true">
12+
<div class="modal-lg modal-dialog modal-dialog-centered">
13+
<div class="modal-content">
14+
<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>
22+
</div>
23+
24+
<div class="modal-body">
25+
<ul class="locales">
26+
{% for locale in locales() %}
27+
{% set is_active = app.request.locale == locale.code %}
28+
{% set is_rtl = locale.code in ['ar', 'fa', 'he'] %}
29+
<li class="{{ is_active ? 'active' }} {{ is_rtl ? 'rtl' }}" translate="no">
30+
<a class="stretched-link" lang="{{ locale.code }}" hreflang="{{ locale.code }}" href="{{ path(app.request.get('_route', 'blog_index'), app.request.get('_route_params', [])|merge({_locale: locale.code})) }}">
31+
{{ locale.name|capitalize }}
32+
<small>{{ locale.code }}</small>
33+
</a>
34+
</li>
35+
{% endfor %}
36+
</ul>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
{% endmacro %}

‎templates/default/homepage.html.twig

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@
1212
{% block body %}
1313
<div class="page-header">
1414
<h1>{{ 'title.homepage'|trans|raw }}</h1>
15+
16+
{% from 'default/_language_selector.html.twig' import render_language_selector %}
17+
{{ render_language_selector(true) }}
1518
</div>
1619

1720
<div class="row">
18-
<div class="col-sm-6">
21+
<div class="col-sm">
1922
<div class="jumbotron">
2023
<p>
2124
{{ 'help.browse_app'|trans|raw }}
@@ -28,7 +31,7 @@
2831
</div>
2932
</div>
3033

31-
<div class="col-sm-6">
34+
<div class="col-sm">
3235
<div class="jumbotron">
3336
<p>
3437
{{ 'help.browse_admin'|trans|raw }}

0 commit comments

Comments
 (0)