Refactor CSS to eliminate vertical misalignment of login nav
This commit is contained in:
parent
9fc2493bd7
commit
21e6c7acf2
|
@ -5,7 +5,7 @@ import AccessorUtilities from '~/lib/utils/accessor';
|
|||
* Does that setting the current selected tab in the localStorage
|
||||
*/
|
||||
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.tabSelector = tabSelector;
|
||||
this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
|
||||
|
|
|
@ -154,26 +154,10 @@
|
|||
a {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
margin-right: 0;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
a {
|
||||
border: 0;
|
||||
border-bottom: 2px solid $link-underline-blue;
|
||||
margin-right: 0;
|
||||
color: $black;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid $link-underline-blue;
|
||||
}
|
||||
}
|
||||
&.active > a {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
%ul.nav-links.nav-tabs.new-session-tabs.single-tab
|
||||
%ul.nav-links.new-session-tabs.single-tab
|
||||
%li.active
|
||||
%a= tab_title
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
%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?
|
||||
%li.active
|
||||
= link_to "Crowd", "#crowd", 'data-toggle' => 'tab'
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
%ul.nav-links.new-session-tabs.nav-tabs{ role: 'tablist' }
|
||||
%ul.nav-links.new-session-tabs{ role: 'tablist' }
|
||||
%li.active{ role: 'presentation' }
|
||||
%a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in
|
||||
- if allow_signup?
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
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
|
|||
end
|
||||
|
||||
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
|
||||
|
||||
def ensure_one_active_pane
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
%ul.nav.nav-tabs.linked-tabs
|
||||
%ul.nav-links.new-session-tabs.linked-tabs
|
||||
%li
|
||||
%a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
|
||||
Tab 1
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
%ul.nav-tabs
|
||||
%ul.nav-links.new-session-tabs
|
||||
%li.active
|
||||
%a{ href: '#ldap' } LDAP
|
||||
%li
|
||||
%a.active{ id: 'standard', href: '#standard'} Standard
|
||||
%li
|
||||
%a{ id: 'ldap', href: '#ldap'} Ldap
|
||||
%a{ href: '#login-pane'} Standard
|
||||
|
|
|
@ -4,7 +4,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
|
|||
(() => {
|
||||
describe('SigninTabsMemoizer', () => {
|
||||
const fixtureTemplate = 'static/signin_tabs.html.raw';
|
||||
const tabSelector = 'ul.nav-tabs';
|
||||
const tabSelector = 'ul.new-session-tabs';
|
||||
const currentTabKey = 'current_signin_tab';
|
||||
let memo;
|
||||
|
||||
|
@ -27,7 +27,7 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
|
|||
it('does nothing if no tab was previously selected', () => {
|
||||
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', () => {
|
||||
|
@ -48,9 +48,9 @@ import SigninTabsMemoizer from '~/pages/sessions/new/signin_tabs_memoizer';
|
|||
it('saves last selected tab on change', () => {
|
||||
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', () => {
|
||||
|
|
Loading…
Reference in New Issue