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

refactor wide-tabs

Browse source
This commit is contained in:
Felix Niklas 2015-11-04 16:39:03 +01:00
parent 4e39e22512
commit cf00f552c4
7 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/dashboard.jst.eco
View file

@ -1,5 +1,5 @@
<div class="dashboard main flex center"> <div class="dashboard main flex center">
<div class="tabs wide-tabs"> <div class="tabs tabs--big">
<div class="tab active" data-area="stat-widgets"><%- @T('My Stats') %></div> <div class="tab active" data-area="stat-widgets"><%- @T('My Stats') %></div>
<div class="tab" data-area="first-steps-widgets"><%- @T('First Steps') %></div> <div class="tab" data-area="first-steps-widgets"><%- @T('First Steps') %></div>
</div> </div>

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

@ -1,4 +1,4 @@
<table class="table table-hover<%- @class if @class %>"> <table class="table table-hover<%- " #{@class}" if @class %>">
<thead> <thead>
<tr> <tr>
<% if @checkbox: %> <% if @checkbox: %>

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

@ -6,7 +6,7 @@
<h2>Tabs</h2> <h2>Tabs</h2>
<div class="tabs wide-tabs"> <div class="tabs tabs--big">
<div class="tab my-stats active">My Stats</div> <div class="tab my-stats active">My Stats</div>
<div class="tab my-groups">My Group</div> <div class="tab my-groups">My Group</div>
<div class="tab all-stats">All</div> <div class="tab all-stats">All</div>

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

@ -355,7 +355,7 @@
</div> </div>
<div class="profile-section"> <div class="profile-section">
<!-- if user has organization --> <!-- if user has organization -->
<div class="tabs wide-tabs"> <div class="tabs tabs--big">
<div class="tab js-userTickets active">Tickets von Doreen Kubiak</div> <div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
<div class="tab js-organizationTickets">Tickets von Steuerbüro C. Kaik</div> <div class="tab js-organizationTickets">Tickets von Steuerbüro C. Kaik</div>
</div> </div>

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

@ -57,7 +57,7 @@
</div> </div>
<div class="profile-section"> <div class="profile-section">
<!-- if user has organization --> <!-- if user has organization -->
<div class="tabs wide-tabs"> <div class="tabs tabs--big">
<div class="tab js-userTickets active">Tickets von Doreen Kubiak</div> <div class="tab js-userTickets active">Tickets von Doreen Kubiak</div>
<div class="tab js-organizationTickets">Tickets von Steuerbüro C. Kaik</div> <div class="tab js-organizationTickets">Tickets von Steuerbüro C. Kaik</div>
</div> </div>

2
app/assets/javascripts/app/views/widget/ticket_stats.jst.eco
View file

@ -1,5 +1,5 @@
<% if @user && @user.organization: %> <% if @user && @user.organization: %>
<div class="tabs wide-tabs horizontal"> <div class="tabs tabs--big">
<div class="tab js-userTab active"><%- @T('Tickets of User') %> <%- "(" + @user_total + ")" %></div> <div class="tab js-userTab active"><%- @T('Tickets of User') %> <%- "(" + @user_total + ")" %></div>
<div class="tab js-orgTab"><%- @T('Tickets of Organization') %> <%- "(" + @org_total + ")" %></div> <div class="tab js-orgTab"><%- @T('Tickets of Organization') %> <%- "(" + @org_total + ")" %></div>
</div> </div>

36
app/assets/stylesheets/zammad.scss
View file

@ -2064,16 +2064,24 @@ ol.tabs li {
font-size: 0.95em; font-size: 0.95em;
} }
.wide-tabs { .tabs.tabs--inline {
margin: 25px 0 20px; display: inline-flex;
margin-left: 0;
margin-right: 0;
.tab {
flex: none;
}
}
.tabs--big {
margin: 25px auto 20px;
font-size: 14px; font-size: 14px;
border-radius: 8px; border-radius: 8px;
display: inline-flex;
.tab { .tab {
height: auto; height: auto;
padding: 10px 24px; padding: 10px 24px;
flex-grow: 0;
} }
.tab-dropdown { .tab-dropdown {
@ -2082,25 +2090,18 @@ ol.tabs li {
} }
} }
.dashboard .wide-tabs { .tabs--big .tab:first-child {
width: 50%;
margin-left: auto;
margin-right: auto;
display: flex;
.tab {
flex: 1;
}
}
.wide-tabs .tab:first-child {
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
} }
.wide-tabs .tab:last-child { .tabs--big .tab:last-child {
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
} }
.dashboard .tabs--big {
width: 50%;
}
.separator { .separator {
margin: 20px 0; margin: 20px 0;
position: relative; position: relative;
@ -4934,6 +4935,7 @@ footer {
} }
.type-tabs .tab { .type-tabs .tab {
height: 40px;
line-height: 42px; line-height: 42px;
padding: 0 12px 0 12px; padding: 0 12px 0 12px;
list-style: none; list-style: none;