Style language select on login page (bug: 1465107)

behatnotneeded: styling only

Change-Id: I257f53cc85e8f8cc025c1d1a7ea783a8605d4bc2

htdocs/lib/web.php

@@ -4319,23 +4319,31 @@ function language_select_form() {
         require_once('pieforms/pieform.php');
         $languageform = pieform(array(
             'name'                => 'languageselect',
-            'renderer'            => 'oneline',
-            'class'               => 'with-label-widthauto',
+            'renderer'            => 'div',
+            'class'               => 'form-inline with-label-widthauto',
             'validate'            => false,
             'presubmitcallback'   => '',
             'elements'            => array(
-                'lang' => array(
-                    'type' => 'select',
-                    'title' => get_string('language') . ':',
-                    'options' => $languages,
-                    'defaultvalue' => $SESSION->get('lang') ? $SESSION->get('lang') : 'default',
-                ),
-                'changelang' => array(
-                    'type' => 'submit',
-                    'class' => 'btn-default',
-                    'value' => get_string('change'),
+                'inputgroup' => array(
+                    'type' => 'fieldset',
+                    'class' => 'input-group',
+                    'elements' => array(
+                        'lang' => array(
+                            'type' => 'select',
+                            'title' => get_string('language') . ':',
+                            'hiddenlabel' => true,
+                            'options' => $languages,
+                            'defaultvalue' => $SESSION->get('lang') ? $SESSION->get('lang') : 'default',
+                        ),
+                        'changelang' => array(
+                            'type' => 'button',
+                            'usebuttontag' => true,
+                            'class' => 'btn-default input-group-btn',
+                            'value' => get_string('change'),
+                        )
+                    )
                 )
-            )
+            ),
         ));
     }
     return $languageform;

htdocs/theme/default/sass/layout/nav/_top-nav.scss

@@ -13,6 +13,16 @@
         font-size: 14px;
     }
 
+    .loggedout & {
+        @media (max-width: $screen-xs-min) {
+            float: right;
+        }
+    }
+
+    .language-form form {
+        padding-top: 5;
+    }
+
     > li {
         > a {
             padding: 10px;

htdocs/theme/ocean/sass/layout/_header.scss

@@ -20,9 +20,12 @@
 
     + .container {
         // if container is directly after header, then it will need a margin
-        margin-top: 50px;
-        @media (max-width: $screen-sm-min) {
+        margin-top: 70px;
+        @media (min-width: $screen-xs-min) {
             margin-top: 0;
         }
+        @media (min-width: $screen-sm-min) {
+             margin-top: 50px;
+        }
     }
 }

htdocs/theme/primaryschool/sass/layout/nav/_top-nav.scss

@@ -20,6 +20,16 @@
         padding-right:0;
     }
 
+    .loggedout & {
+        @media (max-width: $screen-xs-min) {
+            float: right;
+        }
+    }
+
+    .language-form form {
+        padding-top: 5;
+    }
+
     >li {
         display: inline-block;
         float: left;

htdocs/theme/raw/sass/layout/_header.scss

@@ -29,5 +29,8 @@
     + .container {
         // if container is directly after header, then it will need a margin
         margin-top: 50px;
+        @media (min-width: $screen-xs-min) and (max-width: $screen-md-min){
+            margin-top: 20px;
+        }
     }
 }

htdocs/theme/raw/sass/layout/nav/_top-nav.scss

@@ -8,6 +8,26 @@
     border-radius: 0 0 3px 3px;
     padding: 0 10px;
 
+    .loggedout & {
+        background-color: transparent;
+        @media (max-width: $screen-xs-min) {
+            padding-left: 0;
+            float: none;
+            right: auto;
+        }
+    }
+
+    .language-form form {
+        padding-top: 70px;
+        @media (min-width: $screen-xs-min) {
+            margin-top: 5px;
+            padding-top: 0;
+        }
+        @media (min-width: $screen-sm-min) {
+            margin-top: 0;
+        }
+    }
+
     @media (min-width: $screen-sm-min) {
         position: relative;
         margin-top: 7px;

htdocs/theme/raw/templates/header/topright.tpl

@@ -36,7 +36,7 @@
         {/if}
     {/strip}
     {if !$nosearch && !$LOGGEDIN && $languageform}
-        <li id="language">
+        <li id="language" class="language-form">
             {$languageform|safe}
         </li>
     {/if}