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

style calendar list

Browse source
This commit is contained in:
Felix Niklas 2015-09-17 14:19:30 +02:00
parent f08e6341c6
commit fbcbfd4a55
2 changed files with 74 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
app/assets/javascripts/app/views/calendar/index.jst.eco
View file

@ -19,42 +19,47 @@
<div class="action" data-id="<%- calendar.id %>">
<div class="action-flow">
<div class="action-block">
<h3><span title="Last iCal Feed sync at: <%= calendar.last_sync %>: <%= calendar.last_log %>"><%- @Icon('status', 'ok inline') %></span> <%= calendar.name %></h3>
<%- @T('Timezone') %>: <%= calendar.timezone %>
<h2><span title="Last iCal Feed sync at: <%= calendar.last_sync %>: <%= calendar.last_log %>"><%- @Icon('status', 'ok inline') %></span> <%= calendar.name %></h2>
</div>
<div class="action-block">
<%- @T('Business Hours') %>:<br>
<table class="table table-fluid">
<tr>
<td><%- @T('Monday') %></td><td><% if _.isEmpty(calendar.business_hours['mon']): %>-<% else: %><% for from, till of calendar.business_hours['mon']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Tuesday') %></td><td><% if _.isEmpty(calendar.business_hours['tue']): %>-<% else: %><% for from, till of calendar.business_hours['tue']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Wednesday') %></td><td><% if _.isEmpty(calendar.business_hours['wed']): %>-<% else: %><% for from, till of calendar.business_hours['wed']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Thursday') %></td><td><% if _.isEmpty(calendar.business_hours['thu']): %>-<% else: %><% for from, till of calendar.business_hours['thu']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Friday') %></td><td><% if _.isEmpty(calendar.business_hours['fri']): %>-<% else: %><% for from, till of calendar.business_hours['fri']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Saturday') %></td><td><% if _.isEmpty(calendar.business_hours['sat']): %>-<% else: %><% for from, till of calendar.business_hours['sat']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Sunday') %></td><td><% if _.isEmpty(calendar.business_hours['sun']): %>-<% else: %><% for from, till of calendar.business_hours['sun']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
</table>
</div>
<div class="action-block">
<%- @T('Public Holidays') %>:
<table class="table table-fluid">
<% for holiday, meta of calendar.public_holidays_preview: %>
<tr <% if !meta.active: %>class="is-inactive"<% end %>><td><%- @Tdate(holiday) %></td><td><%= meta.summary %></td></tr>
<% end %>
</table>
<div class="action-separator"></div>
<div class="action-flow">
<div class="action-row">
<div class="label"><%- @T('Timezone') %></div> <%= calendar.timezone %>
</div>
<div class="action-block">
<div class="label"><%- @T('Business Hours') %></div>
<table class="table table-fluid">
<tr>
<td><%- @T('Monday') %></td><td><% if _.isEmpty(calendar.business_hours['mon']): %>-<% else: %><% for from, till of calendar.business_hours['mon']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Tuesday') %></td><td><% if _.isEmpty(calendar.business_hours['tue']): %>-<% else: %><% for from, till of calendar.business_hours['tue']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Wednesday') %></td><td><% if _.isEmpty(calendar.business_hours['wed']): %>-<% else: %><% for from, till of calendar.business_hours['wed']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Thursday') %></td><td><% if _.isEmpty(calendar.business_hours['thu']): %>-<% else: %><% for from, till of calendar.business_hours['thu']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Friday') %></td><td><% if _.isEmpty(calendar.business_hours['fri']): %>-<% else: %><% for from, till of calendar.business_hours['fri']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Saturday') %></td><td><% if _.isEmpty(calendar.business_hours['sat']): %>-<% else: %><% for from, till of calendar.business_hours['sat']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
<tr>
<td><%- @T('Sunday') %></td><td><% if _.isEmpty(calendar.business_hours['sun']): %>-<% else: %><% for from, till of calendar.business_hours['sun']: %><%= from %>-<%= till %> </td><td><% end %><% end %></td>
</tr>
</table>
</div>
<div class="action-block">
<div class="label"><%- @T('Public Holidays') %></div>
<table class="table table-fluid">
<% for holiday, meta of calendar.public_holidays_preview: %>
<tr <% if !meta.active: %>class="is-inactive"<% end %>><td><%- @Tdate(holiday) %></td><td><%= meta.summary %></td></tr>
<% end %>
</table>
</div>
</div>
</div>
<div class="action-controls">

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

@ -581,14 +581,14 @@ table {
.table > tbody > tr > td {
padding: 9px;
border: none;
box-shadow: 0 1px rgba(0,0,0,.02);
box-shadow: 0 1px rgba(0,0,0,.03);
}
.table-hover > tbody > tr:hover > td {
background: white;
box-shadow:
0 1px rgba(0,0,0,.02),
0 -1px rgba(0,0,0,.02);
0 1px rgba(0,0,0,.03),
0 -1px rgba(0,0,0,.03);
}
.table-hover > tbody > tr:hover > th {
@ -1861,7 +1861,8 @@ ol.tabs li {
fill: $ok-color;
&.inline {
margin: 2px 2px 0 0;
margin-top: -3px;
vertical-align: middle;
}
&.ok {
@ -6099,11 +6100,38 @@ output {
.action-flow {
display: flex;
flex-wrap: wrap;
}
.action-separator {
width: 1px;
background: hsl(0,0%,97%);
margin: 0 10px;
}
.table {
margin-left: -9px;
margin-right: -9px;
}
.action-block,
.action-controls {
.action-controls,
.action-row {
padding: 10px;
h2:first-child,
h3:first-child {
margin-top: 0;
}
h2:only-child,
h3:only-child {
margin-bottom: 0;
}
}
.action-row {
flex-basis: 100%;
}
h3 {
@ -6124,6 +6152,7 @@ output {
.action-controls {
display: flex;
margin-left: auto;
align-self: flex-end;
.btn {
align-self: center;