enlarge sidebar header actions click area

This commit is contained in:
Felix Niklas 2015-05-27 10:21:13 +02:00
parent 7cde9d54ef
commit 1b7d17b897
3 changed files with 25 additions and 19 deletions

View file

@ -488,7 +488,7 @@ class App.Sidebar extends App.Controller
events: events:
'click .tabsSidebar-tab': 'toggleTab' 'click .tabsSidebar-tab': 'toggleTab'
'click .tabsSidebar-close': 'toggleSidebar' 'click .tabsSidebar-close': 'toggleSidebar'
'click .sidebar-header h2': 'toggleDropdown' 'click .sidebar-header .js-headline': 'toggleDropdown'
constructor: -> constructor: ->
super super

View file

@ -1,8 +1,8 @@
<% for item in @items: %> <% for item in @items: %>
<div class="sidebar bottom-form-shadow flex hide" data-tab="<%= item.name %>"> <div class="sidebar bottom-form-shadow flex hide" data-tab="<%= item.name %>">
<div class="sidebar-header"> <div class="sidebar-header">
<h2 class="u-textTruncate"><%- @T( item.head ) %></h2> <h2 class="sidebar-header-headline js-headline"><%- @T( item.head ) %></h2>
<div class="js-actions flex"></div> <div class="sidebar-header-actions js-actions"></div>
<div class="tabsSidebar-close"> <div class="tabsSidebar-close">
<svg class="icon icon-long-arrow-right"><use xlink:href="#icon-long-arrow-right" /></svg> <svg class="icon icon-long-arrow-right"><use xlink:href="#icon-long-arrow-right" /></svg>
</div> </div>

View file

@ -2046,10 +2046,6 @@ footer {
overflow: auto; overflow: auto;
} }
.sidebar h2 {
margin-top: 5px;
}
.sidebar h3 { .sidebar h3 {
margin: 0; margin: 0;
color: rgba(0,8,14,.73); color: rgba(0,8,14,.73);
@ -3421,19 +3417,11 @@ footer {
.tabsSidebar .sidebar-header { .tabsSidebar .sidebar-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 20px 20px 0;
padding: 0 0 5px;
position: relative; position: relative;
margin: 0 20px;
h2 {
margin: 0 0 -1px;
line-height: 1;
padding-right: 8px;
@extend .u-clickable;
}
+ hr { + hr {
margin-top: 15px; margin-top: 0;
} }
.dropdown { .dropdown {
@ -3441,9 +3429,27 @@ footer {
} }
} }
.sidebar-header-headline {
padding: 25px 0 15px 25px;
margin: 0 0 0 -20px;
line-height: 1;
padding-right: 8px;
@extend .u-clickable, .u-textTruncate;
}
.sidebar-header-actions {
flex: 1;
margin-top: 10px;
margin-right: 20px;
.dropdown-toggle {
height: 30px;
}
}
.tabsSidebar-close { .tabsSidebar-close {
padding: 20px; padding: 28px 35px 20px 0;
margin: -15px; margin: 0 -20px 0 0;
@extend .u-clickable; @extend .u-clickable;
display: flex; display: flex;
align-items: center; align-items: center;