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

rework nav-tab design

Browse source
This commit is contained in:
Felix Niklas 2015-11-17 17:01:52 +01:00
parent a1f3f08ff0
commit c294fba2e3
5 changed files with 205 additions and 282 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/app/controllers/_application_controller_generic.coffee
View file

@ -363,6 +363,7 @@ class App.ControllerTabs extends App.Controller
super
render: ->
@el.addClass 'main--tabs'
@html App.view('generic/tabs')(
header: @header

38
app/assets/javascripts/app/views/channel/chat.jst.eco
View file

@ -1,15 +1,9 @@
<div class="page-header">
<div class="page-header-title">
<h1><%- @T('Chat Widget') %></h1>
</div>
</div>
<div class="page-content">
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
<% if _.isEmpty(@chats): %>
<p><%- @T('You have no configured chat\'s right now.') %></p>
<% if _.isEmpty(@chats): %>
<p><%- @T('You have no configured chat\'s right now.') %></p>
<% else: %>
<table class="settings-list">
<table class="settings-list">
<thead>
<tr>
<th style="white-space: nowrap;"><%- @T('Name') %></th>
@ -50,12 +44,12 @@
</div>
</tbody>
</table>
</table>
<% end %>
<h2><%- @T('Designer') %></h2>
<h2><%- @T('Designer') %></h2>
<div class="form-group">
<div class="form-group">
<label class="formGroup-label"><%- @T('Preview Width') %></label>
<div class="control">
<div class="select-tabs js-selectBrowserWidth">
@ -64,9 +58,9 @@
<div class="tab" data-value="1280">MacBook</div>
</div>
</div>
</div>
</div>
<div class="browser chat-demo js-browser">
<div class="browser chat-demo js-browser">
<div class="browser-head">
<form class="browser-input js-testurl" novalidate>
<input type="url" class="js-testurl-input" placeholder="zammad.org">
@ -112,9 +106,9 @@
</div>
</div>
</div>
</div>
</div>
<form class="js-params">
<form class="js-params">
<fieldset>
<div class="input form-group formGroup--halfSize">
<div class="formGroup-label">
@ -184,13 +178,11 @@
&lt;script&gt;
$(function() {
new ZammadChat({
new ZammadChat({
<span class="js-modal-params"></span>
});
});
});
&lt;/script&gt;</pre>
</form>
</form>
<div class="js-settings"></div>
</div>
<div class="js-settings"></div>

12
app/assets/javascripts/app/views/generic/tabs.jst.eco
View file

@ -2,6 +2,13 @@
<div class="page-header-title">
<h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
</div>
<% if @addTab: %>
<div class="page-header-meta">
<div class="btn btn--success btn--quad">
<%- @Icon('plus') %>
</div>
</div>
<% end %>
</div>
<div class="page-content">
<div class="page-tabs">
@ -10,11 +17,6 @@
<li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
<% end %>
</ul>
<% if @addTab: %>
<div class="btn btn--success btn--quad">
<%- @Icon('plus') %>
</div>
<% end %>
</div>
<div class="tab-content"></div>
</div>

71
app/assets/stylesheets/bootstrap.css vendored
View file

@ -2491,7 +2491,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
.nav > li.disabled > a {
color: #777;
@ -2518,75 +2517,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav > li > a > img {
max-width: none;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eee #eee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
float: none;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border: 1px solid #ddd;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li > a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border-bottom-color: #fff;
}
}
.nav-pills > li {
float: left;
}

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

@ -1831,9 +1831,30 @@ kbd {
color: initial;
}
.main--tabs .page-header {
background: hsl(200,12%,90%);
padding: 20px;
overflow: hidden;
margin: 0;
}
.main--tabs .page-content {
padding: 20px;
}
.page-tabs {
display: flex;
margin: 28px 0 50px;
margin: -20px -20px 50px;
padding: 0 20px;
background: hsl(200,12%,90%);
border-bottom: 1px solid hsl(200,12%,87%);
.nav-tabs li.active {
background: hsl(210,17%,98%);
border-bottom-color: hsl(210,17%,98%);
margin-bottom: -1px;
padding-bottom: 1px;
}
.btn {
margin-left: auto;
@ -3351,9 +3372,10 @@ footer {
position: relative;
}
.main.no-padding {
.main--tabs,
.main.no-padding {
padding: 0;
}
}
.tooltip {
font-family: inherit;
@ -5629,46 +5651,21 @@ footer {
}
.nav-tabs {
border-bottom: none;
display: flex;
margin-left: 1px;
}
.nav-tabs li {
margin: 0;
border-radius: 3px 3px 0 0;
border: 1px solid hsl(200,12%,87%);
border-bottom-color: transparent;
background: hsl(197,14%,93%);
margin-left: -1px;
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
background: white;
border-radius: 0;
border: 1px solid hsl(0,0%,90%);
color: hsl(0,0%,70%);
height: 40px;
margin: 0;
}
.nav-tabs > li:not(:last-child):not(:only-child) > a {
border-right: none;
}
.nav-tabs > li:first-child > a {
border-radius: 5px 0 0 5px;
}
.nav-tabs > li:last-child > a {
border-radius: 0 5px 5px 0;
}
.nav-tabs > li:only-child > a {
border-radius: 5px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background: hsl(206,7%,28%);
color: white;
border-color: hsl(0,0%,90%);
.nav-tabs li.active {
position: relative;
}
.tab-content {