From 7d27c6c9d485aa6bd4cb32e21c31dded4805cb32 Mon Sep 17 00:00:00 2001
From: Julien Rosset <julien.rosset@solulog.fr>
Date: Wed, 15 May 2024 17:04:23 +0200
Subject: [PATCH] Locale selection: add flag

---
 assets/images/freakFlagSprite.png   | Bin 0 -> 1093 bytes
 assets/styles/_freakFlagSprite.scss |  48 ++++++++++++++++++++++++++++
 assets/styles/app.scss              |   1 +
 templates/base.html.twig            |  16 ++++++++--
 4 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 assets/images/freakFlagSprite.png
 create mode 100644 assets/styles/_freakFlagSprite.scss

diff --git a/assets/images/freakFlagSprite.png b/assets/images/freakFlagSprite.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6a7897b202dd6cd43d72a1836018efed32d74c4
GIT binary patch
literal 1093
zcmeAS@N?(olHy`uVBq!ia0vp^S_}-vCLGK_R*=_IUm)cd;1lBd|Ns9ZCk`_>{bx#E
z?Y;IcljS<otlzy$UYG_Q|G90~w}<n8Ett9R%GZ-uzx?@n=Wht(M`OMZ^AjI__>xic
z@Xz`4KU3n~OGq#<Yz3Ob$iQ&)iG&=`WX6&pzhDN3XE)M-9L@rd$YKTtz9S&aI8~cZ
znt_3Nf~SjPNX4ADS8f;0HV|PAFx_j>Cwt(>p_BjrX9zN}%iJlHx0<^p+xF&}Z)P6u
zOSZQ!^_T0N_oDgY_Nz~x_pkfi-}a%e-t?C4kwdADAt51Of?dxqulZ=<|NOP!<|Z>f
z-&!x<;>mv{dRNRYc3Ji6v}Jnyd)Mz9vu91Wo49M+|1D=9KEImL6Z?Bz{hH(})2-6Y
zH)m*F^j&wR{Kw+gZK5-}ZofBQo13@t*lz9a(ly5(J+|4^nY&Wsyv^Edy?eadOM15z
z%4yv;EV|p2ANq6sUy<JFpB}$9I#-shCAawWDVg5>W7neh3-7gg^WOdc87?30KU;fO
zoJyFM@qe#;<K5qKJ{RlkA7AMAv7X<!DfM@%N!zJhxtl*zT<6R>t;hdbL{@usMbx?1
z#b>%Nhur*MQO9+R`SVf{`BR!Ve5S5WfBhqF&aI7~-gVZ>cFlI4U6dO9_m!=I=<<K1
z1s&g3?v|IGX5&}-YVzj?uew*<aaol=Y4yc9wyMB*7zLvtfFlGd?)aCS@%C|fUUCVf
N!qe5yWt~$(6996Y66OE^

literal 0
HcmV?d00001

diff --git a/assets/styles/_freakFlagSprite.scss b/assets/styles/_freakFlagSprite.scss
new file mode 100644
index 0000000..e505738
--- /dev/null
+++ b/assets/styles/_freakFlagSprite.scss
@@ -0,0 +1,48 @@
+/*!*****************************************************
+Freak Flags, Copyright ©2024 Michael P. Cohen. Freak flags is licenced under the MIT licence.
+For complete information visit: www.freakflagsprite.com
+******************************************************/
+
+:not(img).fflag {
+    background-image  : url('../images/freakFlagSprite.png');
+    background-repeat : no-repeat;
+    background-size   : 100% 49494%;
+    display           : inline-block;
+    overflow          : hidden;
+    position          : relative;
+    vertical-align    : middle;
+    box-sizing        : content-box;
+}
+:not(img).fflag-FR {
+    background-position : center 0.2287%
+}
+:not(img).fflag-GB, :not(img).fflag-EN {
+    background-position : center 0.4524%
+}
+
+img.fflag {
+    object-fit : cover;
+}
+img.fflag-FR {
+    object-position : center 0.2287%
+}
+img.fflag-GB, img.fflag-EN {
+    object-position : center 0.4524%
+}
+
+.fflag.ff-sm {
+    width  : 18px;
+    height : 11px
+}
+.fflag.ff-md {
+    width  : 27px;
+    height : 17px
+}
+.fflag.ff-lg {
+    width  : 42px;
+    height : 27px
+}
+.fflag.ff-xl {
+    width  : 60px;
+    height : 37px
+}
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 63c4c96..1620068 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -1,3 +1,4 @@
 @import 'bootstrap';
 @import 'xdebug';
 @import 'layout';
+@import 'freakFlagSprite';
diff --git a/templates/base.html.twig b/templates/base.html.twig
index f64b69d..6cfae3e 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -15,14 +15,24 @@
             <ul class="navbar-nav">
                 <li class="nav-item"><a href="{{ path('user_signIn') }}" class="nav-link py-0">Sign In</a></li>
                 <li class="nav-item"><a href="{{ path('user_signUp') }}" class="nav-link py-0">Sign Up</a></li>
-                <li class="nav-item dropdown">
+                <li class="nav-item dropdown dropstart">
                     <a class="nav-link dropdown-toggle py-0" id="dropdown-locale" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                        {{ app.request.locale|locale_name(app.request.locale)|u.title }}
+                        <img src="{{ asset('images/freakFlagSprite.png') }}"
+                             class="fflag fflag-{{ app.request.locale|u.upper }} ff-md"
+                             alt="{{ app.request.locale|locale_name(app.request.locale)|u.title }}"
+                             title="{{ app.request.locale|locale_name(app.request.locale)|u.title }}"
+                        >
                     </a>
                     <ul class="dropdown-menu" aria-labelledby="dropdown-locale">
                         {% for locale in locale_all %}
                             <li>
-                                <a class="dropdown-item" href="{{ path(app.current_route, {'_locale': locale}) }}">{{ locale|locale_name(app.request.locale)|u.title }}</a>
+                                <a class="dropdown-item" href="{{ path(app.current_route, {'_locale': locale}) }}">
+                                    <img src="{{ asset('images/freakFlagSprite.png') }}"
+                                         class="fflag fflag-{{ locale|u.upper }} ff-md"
+                                         alt="{{ locale|locale_name(locale)|u.title }}"
+                                    >
+                                    {{ locale|locale_name(locale)|u.title }}
+                                </a>
                             </li>
                         {% endfor %}
                     </ul>