enlarge sidebar header actions click area
This commit is contained in:
parent
7cde9d54ef
commit
1b7d17b897
3 changed files with 25 additions and 19 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue