Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

make sidebar header clickarea even bigger

Browse source
This commit is contained in:
Felix Niklas 2015-05-27 10:49:45 +02:00
parent 1b7d17b897
commit 0b29920a0c
6 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/generic/actions.jst.eco
View file

@ -1,5 +1,5 @@
<div class="dropdown dropdown--actions"> <div class="dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="userAction" data-toggle="dropdown"> <div class="dropdown-toggle" id="userAction" data-toggle="dropdown">
<% if @type isnt 'small': %> <% if @type isnt 'small': %>
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg> <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label><%- @T('Action') %></label> <label><%- @T('Action') %></label>

4
app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
View file

@ -1,4 +1,4 @@
<div class="flex profile"> <div class="profile">
<div class="modal modal--local"> <div class="modal modal--local">
<div class="modal-backdrop"></div> <div class="modal-backdrop"></div>
<div class="modal-dialog"> <div class="modal-dialog">
@ -301,7 +301,7 @@
<div class="profile-window"> <div class="profile-window">
<div class="profile-section vertical centered"> <div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions"> <div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown"> <div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg> <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label>Aktion</label> <label>Aktion</label>
<span class="select-arrow icon"></span> <span class="select-arrow icon"></span>

2
app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
View file

@ -3,7 +3,7 @@
<div class="profile-window"> <div class="profile-window">
<div class="profile-section vertical centered"> <div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions"> <div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="organizationProfile" data-toggle="dropdown"> <div class="dropdown-toggle" id="organizationProfile" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg> <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label>Aktion</label> <label>Aktion</label>
<span class="select-arrow icon"></span> <span class="select-arrow icon"></span>

2
app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco
View file

@ -3,7 +3,7 @@
<div class="profile-window"> <div class="profile-window">
<div class="profile-section vertical centered"> <div class="profile-section vertical centered">
<div class="align-right profile-action dropdown dropdown--actions"> <div class="align-right profile-action dropdown dropdown--actions">
<div class="dropdown-toggle horizontal center" id="profileAction" data-toggle="dropdown"> <div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
<svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg> <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
<label>Aktion</label> <label>Aktion</label>
<span class="select-arrow icon"></span> <span class="select-arrow icon"></span>

2
app/assets/javascripts/app/views/navigation/menu.jst.eco
View file

@ -1,7 +1,7 @@
<% for item in @items: %> <% for item in @items: %>
<% if item.child: %> <% if item.child: %>
<li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>"> <li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
<a href="<%= item.target %>" class="dropdown-toggle horizontal center" data-toggle="dropdown"> <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown">
<svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg> <svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
<span class="nav-item-name flex"> <span class="nav-item-name flex">
<%- @T( item.name ) %> <%- @T( item.name ) %>

51
app/assets/stylesheets/zammad.css.scss
View file

@ -3416,21 +3416,17 @@ footer {
.tabsSidebar .sidebar-header { .tabsSidebar .sidebar-header {
display: flex; display: flex;
align-items: center; align-content: stretch;
position: relative; position: relative;
margin: 0 20px; margin: 0 20px;
+ hr { + hr {
margin-top: 0; margin-top: 0;
} }
.dropdown {
position: static;
}
} }
.sidebar-header-headline { .sidebar-header-headline {
padding: 25px 0 15px 25px; padding: 33px 0 17px 25px;
margin: 0 0 0 -20px; margin: 0 0 0 -20px;
line-height: 1; line-height: 1;
padding-right: 8px; padding-right: 8px;
@ -3439,16 +3435,23 @@ footer {
.sidebar-header-actions { .sidebar-header-actions {
flex: 1; flex: 1;
margin-top: 10px; margin-right: 5px;
margin-right: 20px; display: flex;
align-items: center;
.dropdown {
flex: 1;
position: static;
}
.dropdown-toggle { .dropdown-toggle {
height: 30px; padding-top: 38px;
padding-bottom: 24px;
} }
} }
.tabsSidebar-close { .tabsSidebar-close {
padding: 28px 35px 20px 0; padding: 27px 35px 12px 0;
margin: 0 -20px 0 0; margin: 0 -20px 0 0;
@extend .u-clickable; @extend .u-clickable;
display: flex; display: flex;
@ -3513,20 +3516,18 @@ footer {
justify-content: center; justify-content: center;
} }
.tabs .tabsSidebar-tab.is-changed:before {
position: absolute;
.tabsSidebar-tab.is-changed:before { content: '';
position: absolute; left: -3px;
content: ''; width: 6px;
left: -3px; height: 6px;
width: 6px; top: 50%;
height: 6px; margin-top: -3px;
top: 50%; border-radius: 100%;
margin-top: -3px; background: hsl(198,19%,72%);
border-radius: 100%; box-shadow: 0 0 0 2px hsl(210,17%,98%);
background: hsl(198,19%,72%); }
box-shadow: 0 0 0 2px hsl(210,17%,98%);
}
.tabsSidebar-tab:first-child { .tabsSidebar-tab:first-child {
border-top-left-radius: 8px; border-top-left-radius: 8px;
@ -3939,6 +3940,8 @@ footer {
} }
.dropdown-toggle { .dropdown-toggle {
display: flex;
align-items: center;
@extend .u-clickable; @extend .u-clickable;
} }