Skip to content

Commit

Permalink
Fix styles in login / user-links area of header
Browse files Browse the repository at this point in the history
Resolves #406
  • Loading branch information
hackartisan committed Jul 27, 2018
1 parent 2f55518 commit ce5510d
Show file tree
Hide file tree
Showing 6 changed files with 266 additions and 40 deletions.
3 changes: 3 additions & 0 deletions app/assets/stylesheets/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,16 @@
@import 'mixins';
@import 'header';
@import 'footer';
@import 'overrides/dropdowns';

body {
background-color: $masthead-bg;
}

.masthead {
margin-bottom: 0px;
/* override from upstream; this was prevening user dropdown from showing up */
z-index: 0;
}

#main-content {
Expand Down
14 changes: 13 additions & 1 deletion app/assets/stylesheets/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,19 @@
float: right;
}

/* insert some button styles so it actually looks like btn-account */
>li>a {
border-radius: 4px;
cursor: pointer;
display: inline-block;
outline: 0;
overflow: visible;
margin: 0;
text-decoration: none;
vertical-align: top;
font: bold 12px/1.3 "DejaVu", "Arial Unicode MS", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

>li>a,
.btn-account {
color: $gray;
Expand Down Expand Up @@ -305,4 +318,3 @@
}
}
}

214 changes: 214 additions & 0 deletions app/assets/stylesheets/overrides/dropdowns.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
@import "variables/colors";
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

// The dropdown wrapper (div)
.dropup,
.dropdown {
position: relative;
}

// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}

// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
// top: 100%;
// left: 0;
z-index: 1000;
display: none; // none by default, but block on "open" of the menu
float: left;
// min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
font-size: 14px;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: $white;
// border: 1px solid $light-gray; // IE8 fallback
border: 1px solid $gray-lightest;
border-radius: 4px;
background-clip: padding-box;

// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
// line-height: $line-height-base;
// color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}

// Hover/Focus state
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: $white;
background-color: $blue-dark;
}
}

// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
// color: $dropdown-link-active-color;
text-decoration: none;
outline: 0;
// background-color: $dropdown-link-active-bg;
}
}

// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray

.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
// color: $dropdown-link-disabled-color;
}

// Nuke hover/focus effects
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
// @include reset-filter;
// cursor: $cursor-disabled;
}
}

// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}

// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}






.navbar-form,
.navbar-right {
display: inline-block;
}

.navbar-right {
float: right;
margin-right: 1em;
}

#sidebar,
#content {
position: relative;
padding: 0 1em;
}

.facets-toggle {
display: none;
}

.facets-heading {
margin: 1em 0 1em;
font-size: 1.2em;
}

.panel-default {
margin-bottom: 0.5em;
.panel-heading,
.panel-body {
border: 1px solid $gray-light;
padding: 0.7em 1em;
}

.panel-heading {
cursor: pointer;
background: $gray-lightest;
}

.panel-title {
font-size: 1em;
margin: 0;
a {
text-decoration: none;
color: $black;
}
}

.panel-body {
border-top: 0;
}

.collapse {
display: none;

&.in { display: block; }
// [converter] extracted tr&.in to tr.collapse.in
// [converter] extracted tbody&.in to tbody.collapse.in
}

tr.collapse.in { display: table-row; }

tbody.collapse.in { display: table-row-group; }

.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition-property: height, visibility;
transition-duration: .35s;
transition-timing-function: ease;
}

.more_facets_link {
margin-top: 1em;
}
}

.search-widgets {
.btn-group {
float: left;
font-weight: normal;
}
.btn-group ~ .btn-group {
margin-left: 6px;
}
}

.twitter-typeahead input {
padding: 5px 10px;
height: 40px;
}

.search-btn,
.search_field {
height: 40px;
}
2 changes: 2 additions & 0 deletions app/assets/stylesheets/variables/colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,5 @@ $orange: #e87511;
$blue: #3072AB;
$brand-danger: #a94442;
$yellow-light: #fee7ba;
$gray-lightest: #f5f4f1;
$blue-dark: #2762ae;
69 changes: 31 additions & 38 deletions app/views/_user_util_links.html.erb
Original file line number Diff line number Diff line change
@@ -1,41 +1,34 @@
<% if current_user %>
<li class="dropdown dropdown-account">
<button type="button" class="dropdown-toggle btn-account" data-toggle="dropdown">
<%= current_user.to_s %> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<% if current_exhibit and can? :curate, current_exhibit %>
<li>
<%= link_to t('spotlight.dashboards.show.header'), spotlight.exhibit_dashboard_path(current_exhibit) %>
</li>
<li class="divider"></li>
<% end %>
<% if can? :create, Spotlight::Exhibit %>
<li>
<%= link_to t(:'helpers.action.spotlight/exhibit.create'), spotlight.new_exhibit_path %>
</li>
<li class="divider"></li>
<% end %>

<ul class="nav navbar-nav">
<%= render_nav_actions do |config, action|%>
<li><%= action %></li>
<% end %>
</ul>

<ul class="nav navbar-nav">
<% if current_user %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><%=current_user%> <b class="caret"></b></a>
<ul class="dropdown-menu">
<% if current_exhibit and can? :curate, current_exhibit %>
<li>
<%= link_to t('spotlight.dashboards.show.header'), spotlight.exhibit_dashboard_path(current_exhibit) %>
</li>
<li class="divider"></li>
<% end %>
<% if can? :create, Spotlight::Exhibit %>
<li>
<%= link_to t(:'helpers.action.spotlight/exhibit.create'), spotlight.new_exhibit_path %>
</li>
<li class="divider"></li>
<% end %>

<li>
<%= link_to t('spotlight.header_links.logout'), main_app.destroy_user_session_path %>
</li>
</ul>
</li>
<% else %>
<li>
<%= link_to t('spotlight.header_links.login'), main_app.new_user_session_path %>
</li>
<% end %>
<% if current_exhibit and show_contact_form? %>
<li>
<%= link_to t('spotlight.header_links.contact'), spotlight.new_exhibit_contact_form_path(current_exhibit), data: {behavior: 'contact-link', target: 'report-problem-form' } %>
<%= link_to t('spotlight.header_links.logout'), main_app.destroy_user_session_path %>
</li>
<% end %>
</ul>
</ul>
</li>
<% else %>
<li>
<%= link_to t('spotlight.header_links.login'), main_app.new_user_session_path %>
</li>
<% end %>
<% if current_exhibit and show_contact_form? %>
<li>
<%= link_to t('spotlight.header_links.contact'), spotlight.new_exhibit_contact_form_path(current_exhibit), data: {behavior: 'contact-link', target: 'report-problem-form' } %>
</li>
<% end %>
4 changes: 3 additions & 1 deletion app/views/shared/_header_navbar.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
<% end %>
</div>
<div class="pull-right menu--level-1 col-xs-12 col-sm-6">
<%= render partial: '/user_util_links' %>
<ul>
<%= render partial: '/user_util_links' %>
</ul>
</div>
</div>
</div>
Expand Down

0 comments on commit ce5510d

Please sign in to comment.