From 3930bd1f893c89a0e697ffc8f62ce9c3f5c625fe Mon Sep 17 00:00:00 2001 From: Branden Visser Date: Fri, 14 Aug 2015 08:53:33 -0400 Subject: [PATCH] (MySearch) Review followup; Fix bug in external login button styles --- shared/oae/css/oae.base.css | 24 +++----- shared/oae/css/oae.components.css | 56 +++++++++++++++++++ shared/oae/css/oae.skin.less | 56 +++++++++---------- .../oae/js/jquery-plugins/jquery.switchtab.js | 34 +---------- ui/css/oae.search.css | 4 -- ui/search.html | 4 +- 6 files changed, 94 insertions(+), 84 deletions(-) diff --git a/shared/oae/css/oae.base.css b/shared/oae/css/oae.base.css index 9e69a91d4ca..a0a79cfde85 100644 --- a/shared/oae/css/oae.base.css +++ b/shared/oae/css/oae.base.css @@ -127,6 +127,8 @@ a:hover, .btn-link:hover, a:focus, .btn-link:focus { } .nav.nav-pills > li > a { + border-style: solid; + border-width: 3px; font-size: 16px; min-width: 170px; } @@ -136,7 +138,8 @@ a:hover, .btn-link:hover, a:focus, .btn-link:focus { border-radius: 3px; } -.nav.nav-pills > li > a > * { +.nav.nav-pills > li > a > i, +.nav.nav-pills > li > a > span, { color: inherit; display: inline; margin-left: 5px; @@ -144,33 +147,22 @@ a:hover, .btn-link:hover, a:focus, .btn-link:focus { } /* Give the first (left-most) element space on the left side to make the button bigger */ -.nav.nav-pills > li > a > *:first-child { +.nav.nav-pills > li > a > i:first-child { margin-left: 35px; } /* Give the last (right-most) element space on the right side to make the button bigger */ -.nav.nav-pills > li > a > *:last-child { +.nav.nav-pills > li > a > span:last-child { margin-right: 35px; } -/* Icon generally takes up the most vertical baseline space, so shift it down to help align it with - the label content */ -.nav.nav-pills .oae-switchtab-switch-icon { - top: 1px; -} - -/* Shift the text up one pixel to help align it to larger button */ -.nav.nav-pills .oae-switchtab-switch-label { - bottom: 1px; -} - /* Free up some horizontal button spacing to try and fit as much text as possible */ @media (max-width: 768px) { - .nav.nav-pills > li > a > *:first-child { + .nav.nav-pills > li > a > i:first-child { margin-left: 5px; } - .nav.nav-pills > li > a > *:last-child { + .nav.nav-pills > li > a > span:last-child { margin-right: 5px; } } diff --git a/shared/oae/css/oae.components.css b/shared/oae/css/oae.components.css index 265efdc67cc..5792ad42370 100644 --- a/shared/oae/css/oae.components.css +++ b/shared/oae/css/oae.components.css @@ -1686,3 +1686,59 @@ ul.oae-list:not(.oae-list-grid) .oae-list-actions ul > li { display: none; } } + +/*************** + ** SWITCHTAB ** + ***************/ + +/** + * The switchtab component is a template combined with the custom `$.switchtab` plugin that + * implements the interaction of the "Switch Tab" component. A Switch Tab is essentially a set of + * tabs that look like a left-to-right switch. There can only be one selected at one time. Back + * functionality is also provided. + * + * Usage: + * + * You should create a template that is based on the bootstrap pill component, with the one + * exception that the root element has the `oae-switchtab` class: + * + * ``` + * + * ``` + * + * The following attributes are noteworthy: + * + * * aria-controls (required): Indicates the id of the tab. It is used both internally to + * indentify the element and it is useful for the $.switchtabId() method in order to determine + * which tab is currently selected + * * href (required): Indicates not only at what path prefix activates the tab, but also what + * path to push into the History module when the tab is clicked. Note that when navigating to a + * tab, the query string is retained + * + * To perform an action when the tab is changed, you should listen to `$(window).on('statechange')` + * and use `$mySwitchTab.switchtabId()` to get the tab id of the currently active tab. + */ + +/* Icon generally takes up the most vertical baseline space, so shift it down to help align it with + the label content */ +.nav.nav-pills > li > a > i { + top: 1px; +} + +/* Shift the text up one pixel to help align it to the larger button */ +.nav.nav-pills .oae-switchtab-switch-label { + bottom: 1px; +} diff --git a/shared/oae/css/oae.skin.less b/shared/oae/css/oae.skin.less index 362303e35dc..c0fdf8711d0 100644 --- a/shared/oae/css/oae.skin.less +++ b/shared/oae/css/oae.skin.less @@ -523,47 +523,47 @@ ul.as-selections.as-selections-focus { /* Left hand navigation actions border color */ @lhnav-item-border-color: #EEE; -.nav:not(.nav-pills) > li > a, -.nav:not(.nav-pills) > li > button, -.nav:not(.nav-pills) > li i, -.nav:not(.nav-pills) > li.nav-header { +.oae-lhnavigation .nav > li > a, +.oae-lhnavigation .nav > li > button, +.oae-lhnavigation .nav > li i, +.oae-lhnavigation .nav > li.nav-header { color: @lhnav-item-text-color; background-color: @lhnav-item-background-color; } -.nav:not(.nav-pills) > li:not(.nav-header):hover, -.nav:not(.nav-pills) > li:not(.nav-header) > a:hover, -.nav:not(.nav-pills) > li:not(.nav-header) > a:focus, -.nav:not(.nav-pills) > li:not(.nav-header) > a:hover i, -.nav:not(.nav-pills) > li:not(.nav-header) > a:focus i, -.nav:not(.nav-pills) > li:not(.nav-header) > button:hover, -.nav:not(.nav-pills) > li:not(.nav-header) > button:focus, -.nav:not(.nav-pills) > li:not(.nav-header) > button:hover i, -.nav:not(.nav-pills) > li:not(.nav-header) > button:focus i { +.oae-lhnavigation .nav > li:not(.nav-header):hover, +.oae-lhnavigation .nav > li:not(.nav-header) > a:hover, +.oae-lhnavigation .nav > li:not(.nav-header) > a:focus, +.oae-lhnavigation .nav > li:not(.nav-header) > a:hover i, +.oae-lhnavigation .nav > li:not(.nav-header) > a:focus i, +.oae-lhnavigation .nav > li:not(.nav-header) > button:hover, +.oae-lhnavigation .nav > li:not(.nav-header) > button:focus, +.oae-lhnavigation .nav > li:not(.nav-header) > button:hover i, +.oae-lhnavigation .nav > li:not(.nav-header) > button:focus i { color: @lhnav-item-text-hover-color; background-color: @lhnav-item-background-hover-color; } -.nav:not(.nav-pills) > li.active > a, -.nav:not(.nav-pills) > li.active > a:hover, -.nav:not(.nav-pills) > li.active > a:focus, -.nav:not(.nav-pills) > li.active > button, -.nav:not(.nav-pills) > li.active > button:hover, -.nav:not(.nav-pills) > li.active > button:focus, -.nav:not(.nav-pills) > li.active > a i, -.nav:not(.nav-pills) > li.active > a:hover i, -.nav:not(.nav-pills) > li.active > a:focus i { +.oae-lhnavigation .nav > li.active > a, +.oae-lhnavigation .nav > li.active > a:hover, +.oae-lhnavigation .nav > li.active > a:focus, +.oae-lhnavigation .nav > li.active > button, +.oae-lhnavigation .nav > li.active > button:hover, +.oae-lhnavigation .nav > li.active > button:focus, +.oae-lhnavigation .nav > li.active > a i, +.oae-lhnavigation .nav > li.active > a:hover i, +.oae-lhnavigation .nav > li.active > a:focus i { color: @lhnav-item-text-selected-color; background-color: @lhnav-item-background-selected-color; } -.nav:not(.nav-pills) > li.oae-lhnavigation-border { +.oae-lhnavigation .nav > li.oae-lhnavigation-border { border-bottom: @lhnav-item-border-color; } -/********************************* +/******************** ** @section Tabs ** - *********************************/ + ********************/ /* Tab text color */ @tabbed-nav-text-color: #999; @@ -602,18 +602,16 @@ ul.as-selections.as-selections-focus { .nav.nav-pills > li > a { background-color: @tile-background-color; - border-style: solid; - border-width: 3px; border-color: @tile-background-color; color: @tile-description-color; } .nav.nav-pills > li.active > a { - background-color: @tile-description-color; + .background-gradient-two(@thumbnail-gradient1-color, @thumbnail-gradient2-color, 20%, 80%); color: @tile-background-color; } -.nav.nav-pills > li.active .oae-switchtab-switch-icon { +.nav.nav-pills > li.active > a > i { color: @link-color; } diff --git a/shared/oae/js/jquery-plugins/jquery.switchtab.js b/shared/oae/js/jquery-plugins/jquery.switchtab.js index 9e2ffc49012..c3f57322c06 100644 --- a/shared/oae/js/jquery-plugins/jquery.switchtab.js +++ b/shared/oae/js/jquery-plugins/jquery.switchtab.js @@ -25,39 +25,7 @@ define(['jquery', 'jquery.history'], function (jQuery, oaeUtil) { * is essentially a set of tabs that look like a left-to-right switch. There can only be * one selected at one time. Back functionality is also provided. * - * Usage: - * - * You should create a template that is based on the bootstrap pill component, with the - * one exception that the root element has the `oae-switchtab` class: - * - * ``` - * - * ``` - * - * The following attributes are noteworth: - * - * * aria-controls (required): Indicates that id of the tab. It is used both - * internally to indentify the element and it is useful for the $.switchtabId() method - * in order to determine which tab is currently selected - * * href (required): Indicates not only at what path prefix the tab - * should be active, but also what path to push into the History module when the tab - * is clicked. Note that when navigating to a tab, the query string is retained - * - * To perform an action when the tab is changed, you should listen to `$(window).on('statechange')` - * and use `$mySwitchTab.switchtabId()` to get the tab id of the currently active tab. + * For usage, refer to switchtab style documentation in `oae.components.css` */ $.fn.switchtab = function() { var $switchtab = $(this); diff --git a/ui/css/oae.search.css b/ui/css/oae.search.css index 95edcbe6e1b..bd95f3ed4ac 100644 --- a/ui/css/oae.search.css +++ b/ui/css/oae.search.css @@ -22,10 +22,6 @@ padding: 0 15px; } -.anon #search-form { - margin-bottom: 15px; -} - #search-form #search-search-icon { margin-left: -30px; margin-top: 5px; diff --git a/ui/search.html b/ui/search.html index afbce3cf7c2..feb941c9959 100644 --- a/ui/search.html +++ b/ui/search.html @@ -43,13 +43,13 @@