Skip to content

Commit

Permalink
(MySearch) Review followup; Fix bug in external login button styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrvisser
mrvisser committed Aug 14, 2015
1 parent bee64a3 commit 3930bd1
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 84 deletions.
24 changes: 8 additions & 16 deletions shared/oae/css/oae.base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -136,41 +138,31 @@ 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;
position: relative;
}

/* 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;
}
}
Expand Down
56 changes: 56 additions & 0 deletions shared/oae/css/oae.components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
*
* ```
* <ul class="oae-switchtab nav nav-pills" role="tablist">
* <li role="presentation">
* <a href="/search/all" aria-controls="all" role="tab" data-toggle="tab">
* <i class="fa fa-globe"></i>
* <span class="oae-switchtab-switch-label">__MSG__EVERYWHERE__</span>
* </a>
* </li>
* <li role="presentation">
* <a href="/search/my" aria-controls="my" role="tab" data-toggle="tab">
* <i class="fa fa-home"></i>
* <span class="oae-switchtab-switch-label">__MSG__MY_STUFF_ONLY__</span>
* </a>
* </li>
* </ul>
* ```
*
* 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;
}
56 changes: 27 additions & 29 deletions shared/oae/css/oae.skin.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
34 changes: 1 addition & 33 deletions shared/oae/js/jquery-plugins/jquery.switchtab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
*
* ```
* <ul class="oae-switchtab nav nav-pills" role="tablist">
* <li role="presentation">
* <a href="/search/all" aria-controls="all" role="tab" data-toggle="tab">
* <i class="oae-switchtab-switch-icon fa fa-globe"></i>
* <span class="oae-switchtab-switch-label">__MSG__EVERYWHERE__</span>
* </a>
* </li>
* <li role="presentation">
* <a href="/search/my" aria-controls="my" role="tab" data-toggle="tab">
* <i class="oae-switchtab-switch-icon fa fa-home"></i>
* <span class="oae-switchtab-switch-label">__MSG__MY_STUFF_ONLY__</span>
* </a>
* </li>
* </ul>
* ```
*
* 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);
Expand Down
4 changes: 0 additions & 4 deletions ui/css/oae.search.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@
padding: 0 15px;
}

.anon #search-form {
margin-bottom: 15px;
}

#search-form #search-search-icon {
margin-left: -30px;
margin-top: 5px;
Expand Down
4 changes: 2 additions & 2 deletions ui/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@
<ul class="oae-switchtab nav nav-pills" role="tablist">
<li role="presentation">
<a href="/search/all" aria-controls="all" role="tab" data-toggle="tab">
<i class="oae-switchtab-switch-icon fa fa-globe"></i>
<i class="fa fa-globe"></i>
<span class="oae-switchtab-switch-label">__MSG__EVERYWHERE__</span>
</a>
</li>
<li role="presentation">
<a href="/search/my" aria-controls="my" role="tab" data-toggle="tab">
<i class="oae-switchtab-switch-icon fa fa-home"></i>
<i class="fa fa-home"></i>
<span class="oae-switchtab-switch-label">__MSG__MY_STUFF_ONLY__</span>
</a>
</li>
Expand Down

0 comments on commit 3930bd1

Please sign in to comment.