Improve layout of language selector on frontent to make it look better on small screens

app/ch/insign/cms/views/main.scala.html

@@ -55,13 +55,6 @@
                             </a>
                         </li>
                     }
-                    @CMS.getConfig.frontendLanguages.map { lang =>
-                        <li class="nav-item @if(Template.getLanguage.equals(lang)){active}">
-                            <a href="@page.alternateLanguageUrl(lang)" class="nav-link">
-                            @lang.toUpperCase
-                            </a>
-                        </li>
-                    }
                     @hasPermission(ApplicationPermission.DEBUG) {
                         @if(Template.isDebugMode()) {
                             <li class="nav-item">
@@ -84,6 +77,21 @@
                             </a>
                         </li>
                     }
+
+                    @Some(CMS.getConfig.frontendLanguages).filter(_.size > 1).map { langs =>
+                        <li class="nav-item">
+                            <span class="d-inline-block d-lg-none navbar-text">
+                                @Messages("language.label")
+                            </span>
+                            <div class="btn-group float-right" role="group">
+                                @langs.map { lang =>
+                                    <a href="@page.alternateLanguageUrl(lang)" class="btn btn-outline-secondary @if(Template.getLanguage.equals(lang)) {active}">
+                                        @lang.toUpperCase
+                                    </a>
+                                }
+                            </div>
+                        </li>
+                    }
                 </ul>
             </div>
         </nav>

conf/messages

@@ -12,6 +12,7 @@ modal.btn.delete=Delete
 layout.title=Administration
 layout.user.title=User
 search.no.result=no results
+language.label=Language
 language.label.de=German
 language.label.fr=French
 language.label.en=English

conf/messages.de

@@ -10,6 +10,7 @@ modal.btn.delete=Löschen
 layout.title=Administration
 layout.user.title=Benutzer
 search.no.result=Keine Daten gefunden
+language.label=Sprache
 language.label.de=Deutsch
 language.label.fr=Französisch
 language.label.en=Englisch

conf/messages.fr

@@ -10,6 +10,7 @@ modal.btn.delete=effacer
 layout.title=Administration
 layout.user.title=Utilisateur
 search.no.result=Aucun résultat
+language.label=Langue
 language.label.de=Allemand
 language.label.fr=Français
 language.label.en=Français