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
|
* 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 @@
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
%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
|
||||||
|
|
|
@ -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?
|
- if crowd_enabled?
|
||||||
%li.active
|
%li.active
|
||||||
= link_to "Crowd", "#crowd", 'data-toggle' => 'tab'
|
= 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' }
|
%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?
|
||||||
|
|
|
@ -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
|
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
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
%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
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
%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';
|
||||||
(() => {
|
(() => {
|
||||||
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';
|
||||||
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';
|
||||||
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', () => {
|
||||||
|
|
Loading…
Reference in New Issue