Commit e77ecf62 authored by Clement Ho's avatar Clement Ho

Merge branch '41748-vertical-misalignment-login-box' into 'master'

Vertical misalignment of login box header

Closes #41748

See merge request gitlab-org/gitlab-ce!16275
parents 54691d3d 21e6c7ac
...@@ -5,7 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor'; ...@@ -5,7 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor';
* Does that setting the current selected tab in the localStorage * Does that setting the current selected tab in the localStorage
*/ */
export default class SigninTabsMemoizer { export default class SigninTabsMemoizer {
constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) { constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.new-session-tabs' } = {}) {
this.currentTabKey = currentTabKey; this.currentTabKey = currentTabKey;
this.tabSelector = tabSelector; this.tabSelector = tabSelector;
this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe(); this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
......
...@@ -154,26 +154,10 @@ ...@@ -154,26 +154,10 @@
a { a {
width: 100%; width: 100%;
font-size: 18px; font-size: 18px;
margin-right: 0;
&:hover {
border: 1px solid transparent;
}
} }
&.active { &.active > a {
border-bottom: 1px solid $border-color; cursor: default;
a {
border: 0;
border-bottom: 2px solid $link-underline-blue;
margin-right: 0;
color: $black;
&:hover {
border-bottom: 2px solid $link-underline-blue;
}
}
} }
} }
} }
......
%ul.nav-links.nav-tabs.new-session-tabs.single-tab %ul.nav-links.new-session-tabs.single-tab
%li.active %li.active
%a= tab_title %a= tab_title
%ul.new-session-tabs.nav-links.nav-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) } %ul.nav-links.new-session-tabs{ class: ('custom-provider-tabs' if form_based_providers.any?) }
- if crowd_enabled? - if crowd_enabled?
%li.active %li.active
= link_to "Crowd", "#crowd", 'data-toggle' => 'tab' = link_to "Crowd", "#crowd", 'data-toggle' => 'tab'
......
%ul.nav-links.new-session-tabs.nav-tabs{ role: 'tablist' } %ul.nav-links.new-session-tabs{ role: 'tablist' }
%li.active{ role: 'presentation' } %li.active{ role: 'presentation' }
%a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in %a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in
- if allow_signup? - if allow_signup?
......
---
title: Refactor CSS to eliminate vertical misalignment of login nav
merge_request: 16275
author: Takuya Noguchi
type: fixed
...@@ -392,7 +392,7 @@ feature 'Login' do ...@@ -392,7 +392,7 @@ feature 'Login' do
end end
def ensure_one_active_tab def ensure_one_active_tab
expect(page).to have_selector('.nav-tabs > li.active', count: 1) expect(page).to have_selector('ul.new-session-tabs > li.active', count: 1)
end end
def ensure_one_active_pane def ensure_one_active_pane
......
%ul.nav.nav-tabs.linked-tabs %ul.nav-links.new-session-tabs.linked-tabs
%li %li
%a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } } %a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
Tab 1 Tab 1
......
%ul.nav-tabs %ul.nav-links.new-session-tabs
%li.active
%a{ href: '#ldap' } LDAP
%li %li
%a.active{ id: 'standard', href: '#standard'} Standard %a{ href: '#login-pane'} Standard
%li
%a{ id: 'ldap', href: '#ldap'} Ldap
...@@ -4,7 +4,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer'; ...@@ -4,7 +4,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
(() => { (() => {
describe('SigninTabsMemoizer', () => { describe('SigninTabsMemoizer', () => {
const fixtureTemplate = 'static/signin_tabs.html.raw'; const fixtureTemplate = 'static/signin_tabs.html.raw';
const tabSelector = 'ul.nav-tabs'; const tabSelector = 'ul.new-session-tabs';
const currentTabKey = 'current_signin_tab'; const currentTabKey = 'current_signin_tab';
let memo; let memo;
...@@ -27,7 +27,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer'; ...@@ -27,7 +27,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
it('does nothing if no tab was previously selected', () => { it('does nothing if no tab was previously selected', () => {
createMemoizer(); createMemoizer();
expect(document.querySelector('li a.active').getAttribute('id')).toEqual('standard'); expect(document.querySelector(`${tabSelector} > li.active a`).getAttribute('href')).toEqual('#ldap');
}); });
it('shows last selected tab on boot', () => { it('shows last selected tab on boot', () => {
...@@ -48,9 +48,9 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer'; ...@@ -48,9 +48,9 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
it('saves last selected tab on change', () => { it('saves last selected tab on change', () => {
createMemoizer(); createMemoizer();
document.getElementById('standard').click(); document.querySelector('a[href="#login-pane"]').click();
expect(memo.readData()).toEqual('#standard'); expect(memo.readData()).toEqual('#login-pane');
}); });
it('overrides last selected tab with hash tag when given', () => { it('overrides last selected tab with hash tag when given', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment