Skip to content

C
coopwire-hypothesis
Commit 8175c629 authored by Robert Knight's avatar Robert Knight Committed by Nick Stenning
Browse files
Options

Correct spacing between sort dropdown radio and labels 

Remove the padding from the links in the dropdown menus
and apply it to the row itself instead.

This makes it easier to keep consistent spacing with
different menu item contents in the dropdowns.
parent ecb59b2d
Show whitespace changes
Inline Side-by-side
Showing with 41 additions and 19 deletions
h/static/styles/common.scss
View file @ 8175c629
...@@ -203,7 +203,6 @@ html { ...@@ -203,7 +203,6 @@ html {
display: block; display: block;
line-height: 1; line-height: 1;
padding: 1em;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
...@@ -328,12 +327,18 @@ html { ...@@ -328,12 +327,18 @@ html {
visibility: visible; visibility: visible;
} }
// Row in a dropdown menu
.dropdown-menu__row { .dropdown-menu__row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 40px;
padding-left: 8px;
padding-right: 16px;
min-width: 120px;
} }
// Radio button in a dropdown menu
.dropdown-menu-radio { .dropdown-menu-radio {
display: inline-block; display: inline-block;
width: 12px; width: 12px;
......
h/templates/client/top_bar.html
View file @ 8175c629
...@@ -30,12 +30,22 @@ ...@@ -30,12 +30,22 @@
{{account.username}}<span class="provider" ng-show="authUser">/{{account.provider}}</span><i class="h-icon-arrow-drop-down"></i> {{account.username}}<span class="provider" ng-show="authUser">/{{account.provider}}</span><i class="h-icon-arrow-drop-down"></i>
</span> </span>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li ng-show="authUser"><a class="dropdown-menu__link" href="/profile" target="_blank">Account</a></li> <li class="dropdown-menu__row" ng-show="authUser">
<li><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li> <a class="dropdown-menu__link" href="/profile" target="_blank">Account</a>
<li><a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a></li> </li>
<li ng-show="authUser"><a class="dropdown-menu__link" href="/stream?q=user:{{account.username}}" <li class="dropdown-menu__row" >
target="_blank">My Annotations</a></li> <a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a>
<li ng-show="authUser"><a class="dropdown-menu__link" href="" ng-click="onLogout()">Sign out</a></li> </li>
<li class="dropdown-menu__row" >
<a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a>
</li>
<li class="dropdown-menu__row" ng-show="authUser">
<a class="dropdown-menu__link" href="/stream?q=user:{{account.username}}"
target="_blank">My Annotations</a>
</li>
<li class="dropdown-menu__row" ng-show="authUser">
<a class="dropdown-menu__link" href="" ng-click="onLogout()">Sign out</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -79,18 +89,25 @@ ...@@ -79,18 +89,25 @@
!--><i class="h-icon-arrow-drop-down top-bar__dropdown-arrow"></i> !--><i class="h-icon-arrow-drop-down top-bar__dropdown-arrow"></i>
</a> </a>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li ng-show="authUser"><a href="/stream?q=user:{{account.username}}" <li class="dropdown-menu__row" ng-show="authUser">
<a href="/stream?q=user:{{account.username}}"
class="dropdown-menu__link" class="dropdown-menu__link"
title="View all your annotations" title="View all your annotations"
target="_blank">{{account.username}}</a></li> target="_blank">{{account.username}}</a>
<li ng-show="authUser"><a href="/profile" </li>
target="_blank" <li class="dropdown-menu__row" ng-show="authUser">
class="dropdown-menu__link"><!-- nospace <a class="dropdown-menu__link" href="/profile" target="_blank">Account settings</a>
!-->Account settings</a></li> </li>
<li><a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a></li> <li class="dropdown-menu__row">
<li><a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a></li> <a class="dropdown-menu__link" href="/docs/help" target="_blank">Help</a>
<li ng-show="authUser"><a class="dropdown-menu__link dropdown-menu__link--subtle" </li>
href="" ng-click="onLogout()">Sign out</a></li> <li class="dropdown-menu__row">
<a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a>
</li>
<li class="dropdown-menu__row" ng-show="authUser">
<a class="dropdown-menu__link dropdown-menu__link--subtle"
href="" ng-click="onLogout()">Sign out</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment