Merge branch 'ldap-login-styles' into 'master'

Support LDAP login tabs wrapping to second line (and a few other login fixes)

Fixes some regressions introduced for customers with multiple servers configured for login and/or long label names.

Also, improves styling for the login page on small screens.

See the bad behavior here: https://gitlab.com/gitlab-org/gitlab-ce/issues/23435#note_17117893

https://gitlab.com/gitlab-org/gitlab-ce/issues/23435#note_17117677

See merge request !6993
Signed-off-by: Rémy Coutable <remy@rymai.me>

CHANGELOG.md

@@ -2,8 +2,9 @@ Please view this file on the master branch, on stable branches it's out of date.
 
 ## 8.13.1 (unreleased)
 
-  - Fixed hidden pipeline graph on commit and MR page. !6895
+  - Fix hidden pipeline graph on commit and MR page. !6895
   - Fix Cycle analytics not showing correct data when filtering by date. !6906
+  - Ensure custom provider tab labels don't break layout. !6993
 
 ## 8.13.0 (2016-10-22)
 

app/assets/stylesheets/pages/login.scss

@@ -143,6 +143,7 @@
 
       &:not(.active) {
         background-color: $gray-light;
+        border-left: 1px solid $border-color;
       }
 
       a {
@@ -170,6 +171,31 @@
     }
   }
 
+  // Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long).
+  // These styles prevent this from breaking the layout, and only applied when providers are configured.
+
+  .new-session-tabs.custom-provider-tabs {
+    flex-wrap: wrap;
+
+    li {
+      min-width: 85px;
+      flex-basis: auto;
+
+      // This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen.
+      // We are making somewhat of an assumption about the configuration here: that users do not have more than
+      // 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any
+      // of them. If either condition is false, this will work as expected. If both are true, there may be a missing border
+      // above one of the bottom row elements. If you know a better way, please implement it!
+      &:nth-child(n+5) {
+        border-top: 1px solid $border-color;
+      }
+    }
+
+    a {
+      font-size: 16px;
+    }
+  }
+
 
   .form-control {
     &:active, &:focus {
@@ -203,6 +229,7 @@
   .login-page {
     .col-sm-5.pull-right {
       float: none !important;
+      margin-bottom: 45px;
     }
   }
 }
@@ -244,7 +271,11 @@
   }
 
   .navless-container {
-    padding: 65px; // height of footer + bottom padding of email confirmation link
+    padding: 65px 15px; // height of footer + bottom padding of email confirmation link
+
+    @media (max-width: $screen-xs-max) {
+      padding: 0 15px 65px;
+    }
   }
 }
 
@@ -263,3 +294,4 @@
     bottom: 0;
   }
 }
+

app/views/devise/sessions/two_factor.html.haml

@@ -10,7 +10,7 @@
         = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: 'edit_user show-gl-field-errors' }) do |f|
           - resource_params = params[resource_name].presence || params
           = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
-          .form-group
+          %div
             = f.label 'Two-Factor Authentication code', name:  :otp_attempt
             = f.text_field :otp_attempt, class: 'form-control', required: true, autofocus: true, autocomplete: 'off', title: 'This field is required.'
             %p.help-block.hint Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.

app/views/devise/shared/_tabs_ldap.html.haml

-%ul.new-session-tabs.nav-links.nav-tabs
+%ul.new-session-tabs.nav-links.nav-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) }
   - if crowd_enabled?
     %li.active
       = link_to "Crowd", "#crowd", 'data-toggle' => 'tab'