Skip to content

Commit a4feb60

Browse files
javiereguiluzjaviereguiluz
committed
Display the language selector in the homepage
1 parent 31d5da9 commit a4feb60

File tree

4 files changed

+66
-44
lines changed

4 files changed

+66
-44
lines changed

‎assets/styles/app.scss

Lines changed: 21 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,36 @@ 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+
color: inherit;
402+
font-size: 21px;
403+
line-height: 1;
394404
}
395405
body#homepage .jumbotron {
396-
padding: 48px 60px !important;
406+
display: flex;
407+
flex-direction: column;
408+
height: 100%;
409+
justify-content: center;
410+
padding: 45px 15px;
397411
}
398412
body#homepage .jumbotron .btn {
399413
font-size: 19px;
400414
line-height: 1.33333;
401415
padding: 18px 27px;
402416
border-radius: 6px;
417+
margin-top: 20px;
403418
}
404419
body#homepage .jumbotron P {
405-
margin-bottom: 15px;
420+
margin-bottom: 0;
406421
font-size: 23px;
407422
font-weight: 400
408423
}

‎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: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{% macro render_language_selector() %}
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+
<span class="caret"></span>
5+
<span class="sr-only">{{ 'menu.choose_language'|trans }}</span>
6+
</a>
7+
8+
<div id="locale-selector-modal" class="modal" tabindex="-1" aria-hidden="true">
9+
<div class="modal-lg modal-dialog modal-dialog-centered">
10+
<div class="modal-content">
11+
<div class="modal-header">
12+
<p class="modal-title" lang="en">
13+
{# display this title always in English to make the language selector easier to use #}
14+
Choose your language
15+
</p>
16+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
17+
<span aria-hidden="true">&times;</span>
18+
</button>
19+
</div>
20+
21+
<div class="modal-body">
22+
<ul class="locales">
23+
{% for locale in locales() %}
24+
{% set is_active = app.request.locale == locale.code %}
25+
{% set is_rtl = locale.code in ['ar', 'fa', 'he'] %}
26+
<li class="{{ is_active ? 'active' }} {{ is_rtl ? 'rtl' }}" translate="no">
27+
<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})) }}">
28+
{{ locale.name|capitalize }}
29+
<small>{{ locale.code }}</small>
30+
</a>
31+
</li>
32+
{% endfor %}
33+
</ul>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
{% 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() }}
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)