Updated the design of the language selector

Author: javiereguiluz

assets/scss/app.scss

@@ -72,8 +72,29 @@ header ul.nav li {
   margin-bottom: 0
 }
 
+header .locales {
+  min-width: 190px;
+}
 header .locales a {
-  padding-right: 10px
+  color: #212529;
+  padding: 3px 15px;
+}
+header .locales a small {
+  border-radius: 4px;
+  border: 2px solid #dee2e6;
+  color: #7b8a8b;
+  float: left;
+  font-size: 12px;
+  line-height: 1.1;
+  margin: 2px 10px 0 0;
+  min-width: 26px;
+  padding: 0px 3px;
+  text-align: center;
+  text-transform: uppercase;
+}
+header .locales .active small,
+header .locales a:hover small {
+  color: inherit;
 }
 
 .body-container {

public/build/2.88407626.js

@@ -8,7 +8,7 @@
         "/build/app.d968f7b4.js"
       ],
       "css": [
-        "/build/app.956651a3.css"
+        "/build/app.b82aa2d9.css"
       ]
     },
     "login": {
@@ -22,7 +22,7 @@
       "js": [
         "/build/runtime.1ba6bf05.js",
         "/build/0.c90fd7d1.js",
-        "/build/2.88407626.js",
+        "/build/2.efa1b34f.js",
         "/build/admin.fcbdf98b.js"
       ],
       "css": [
@@ -43,9 +43,9 @@
     "/build/0.c90fd7d1.js": "sha384-FA3+8ecenjmV1Y751s0fKxGBNtyLBA8hDY4sqFoqvsCPOamLlA5ckhRBttBg1esp",
     "/build/1.a7e6a099.js": "sha384-Hzl+LtW/AmgisLfOcC+iJavxliy1Jo+6ZHQx6tpI+a7rAiHmtpwQXjNJ3S++W8fD",
     "/build/app.d968f7b4.js": "sha384-aBTepzTnPbLJJHay7+GXJjWy44Rr8TP/pDNaHnK+iV8OO9eMPRlWl6Xozx3AoIAD",
-    "/build/app.956651a3.css": "sha384-xl0uSYZbOM6LJel0KzxxR775djP/OfHetuMP3CQ4P2u9nR22DNTzQiZSn/KpBEVq",
+    "/build/app.b82aa2d9.css": "sha384-g1ZExByIuyZaSMNREM2zEeUY8q4/WgPcnP08HQKc+NLfIZfKoxdgFGjENSS+J0po",
     "/build/login.accd2411.js": "sha384-AnahE1JksyOZbxe/Gdg1twmMPucW4F1llK9OftiRo/Ud2L1ShQPtBLuN4MoCLb0f",
-    "/build/2.88407626.js": "sha384-9dl5Ww46LD3oNY6DRlrBC55BAIxek/WM9UtDZkHqYYhEArp2bhE92WX47hO8hKL1",
+    "/build/2.efa1b34f.js": "sha384-9dl5Ww46LD3oNY6DRlrBC55BAIxek/WM9UtDZkHqYYhEArp2bhE92WX47hO8hKL1",
     "/build/admin.fcbdf98b.js": "sha384-WUjuA0eQneXh3lch2au/1PamF7QluJ058id0ulV18pPtYqth8m+Rj7wnnUi7e0Sm",
     "/build/admin.5cc2ebf1.css": "sha384-ilLLAgcQxfeIVl6jV3AsZ2jmrWwgECQptl9HYwqc2NpYuTl6FEW46DBpDk5Q76sp",
     "/build/search.9f97b142.js": "sha384-5s1TWKIOKURbmNDZ7T8WvjCndmbonvVe69HxL2fY+mfXu5bEEN829itXQLf5eiLO"

public/build/app.956651a3.css

@@ -1,10 +1,10 @@
 {
   "build/0.c90fd7d1.js": "/build/0.c90fd7d1.js",
   "build/1.a7e6a099.js": "/build/1.a7e6a099.js",
-  "build/2.88407626.js": "/build/2.88407626.js",
+  "build/2.efa1b34f.js": "/build/2.efa1b34f.js",
   "build/admin.css": "/build/admin.5cc2ebf1.css",
   "build/admin.js": "/build/admin.fcbdf98b.js",
-  "build/app.css": "/build/app.956651a3.css",
+  "build/app.css": "/build/app.b82aa2d9.css",
   "build/app.js": "/build/app.d968f7b4.js",
   "build/login.js": "/build/login.accd2411.js",
   "build/runtime.js": "/build/runtime.1ba6bf05.js",

public/build/entrypoints.json

@@ -36,7 +36,10 @@ class AppExtension extends AbstractExtension
     public function __construct(Markdown $parser, string $locales)
     {
         $this->parser = $parser;
-        $this->localeCodes = explode('|', $locales);
+
+        $localeCodes = explode('|', $locales);
+        sort($localeCodes);
+        $this->localeCodes = $localeCodes;
     }
 
     /**

public/build/manifest.json

@@ -91,7 +91,7 @@
                                     </a>
                                     <ul class="dropdown-menu locales" role="menu" aria-labelledby="locales">
                                         {% for locale in locales() %}
-                                            <li {% if app.request.locale == locale.code %}aria-checked="true" class="active"{% else %}aria-checked="false"{% endif %} role="menuitem"><a href="{{ path(app.request.get('_route', 'blog_index'), app.request.get('_route_params', [])|merge({_locale: locale.code})) }}">{{ locale.name|capitalize }}</a></li>
+                                            <li {% if app.request.locale == locale.code %}aria-checked="true" class="active"{% else %}aria-checked="false"{% endif %} role="menuitem"><a href="{{ path(app.request.get('_route', 'blog_index'), app.request.get('_route_params', [])|merge({_locale: locale.code})) }}">{{ locale.name|capitalize }} <small>{{ locale.code[0:2] }}</small></a></li>
                                         {% endfor %}
                                     </ul>
                                 </li>