From 21e6c7acf20b4b287da185cf4f7c90148741aa0c Mon Sep 17 00:00:00 2001 From: Takuya Noguchi Date: Mon, 8 Jan 2018 00:09:42 +0900 Subject: [PATCH] Refactor CSS to eliminate vertical misalignment of login nav --- .../sessions/new/signin_tabs_memoizer.js | 2 +- app/assets/stylesheets/pages/login.scss | 20 ++----------------- app/views/devise/shared/_tab_single.html.haml | 2 +- app/views/devise/shared/_tabs_ldap.html.haml | 2 +- .../devise/shared/_tabs_normal.html.haml | 2 +- .../41748-vertical-misalignment-login-box.yml | 5 +++++ spec/features/users/login_spec.rb | 2 +- .../fixtures/linked_tabs.html.haml | 2 +- .../fixtures/signin_tabs.html.haml | 8 ++++---- spec/javascripts/signin_tabs_memoizer_spec.js | 8 ++++---- 10 files changed, 21 insertions(+), 32 deletions(-) create mode 100644 changelogs/unreleased/41748-vertical-misalignment-login-box.yml diff --git a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js index 08f0afdcce3..d321892d2d2 100644 --- a/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js +++ b/app/assets/javascripts/pages/sessions/new/signin_tabs_memoizer.js @@ -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(); diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index b2250a1ce2f..97303d02666 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -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; } } } diff --git a/app/views/devise/shared/_tab_single.html.haml b/app/views/devise/shared/_tab_single.html.haml index f943d25e41a..7bd414d64c3 100644 --- a/app/views/devise/shared/_tab_single.html.haml +++ b/app/views/devise/shared/_tab_single.html.haml @@ -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 diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml index 270191f9452..f50e0724e09 100644 --- a/app/views/devise/shared/_tabs_ldap.html.haml +++ b/app/views/devise/shared/_tabs_ldap.html.haml @@ -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' diff --git a/app/views/devise/shared/_tabs_normal.html.haml b/app/views/devise/shared/_tabs_normal.html.haml index 1ba6d390875..fa3c3df7f60 100644 --- a/app/views/devise/shared/_tabs_normal.html.haml +++ b/app/views/devise/shared/_tabs_normal.html.haml @@ -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? diff --git a/changelogs/unreleased/41748-vertical-misalignment-login-box.yml b/changelogs/unreleased/41748-vertical-misalignment-login-box.yml new file mode 100644 index 00000000000..77a97400323 --- /dev/null +++ b/changelogs/unreleased/41748-vertical-misalignment-login-box.yml @@ -0,0 +1,5 @@ +--- +title: Refactor CSS to eliminate vertical misalignment of login nav +merge_request: 16275 +author: Takuya Noguchi +type: fixed diff --git a/spec/features/users/login_spec.rb b/spec/features/users/login_spec.rb index bc75dc5d19b..9e10bfb2adc 100644 --- a/spec/features/users/login_spec.rb +++ b/spec/features/users/login_spec.rb @@ -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 diff --git a/spec/javascripts/fixtures/linked_tabs.html.haml b/spec/javascripts/fixtures/linked_tabs.html.haml index 93c0cf97ff0..c38fe8b1f25 100644 --- a/spec/javascripts/fixtures/linked_tabs.html.haml +++ b/spec/javascripts/fixtures/linked_tabs.html.haml @@ -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 diff --git a/spec/javascripts/fixtures/signin_tabs.html.haml b/spec/javascripts/fixtures/signin_tabs.html.haml index 12b8d423cbe..2e00fe7865e 100644 --- a/spec/javascripts/fixtures/signin_tabs.html.haml +++ b/spec/javascripts/fixtures/signin_tabs.html.haml @@ -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 diff --git a/spec/javascripts/signin_tabs_memoizer_spec.js b/spec/javascripts/signin_tabs_memoizer_spec.js index b1b03ef1e09..423432c9e5d 100644 --- a/spec/javascripts/signin_tabs_memoizer_spec.js +++ b/spec/javascripts/signin_tabs_memoizer_spec.js @@ -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', () => { -- GitLab