calendars: style business hours
This commit is contained in:
Felix Niklas
parent
4550d976aa
commit
d3db084630
3 changed files with 109 additions and 81 deletions
|
|
@ -52,6 +52,7 @@ class Index extends App.ControllerContent
|
||||||
newDialog: =>
|
newDialog: =>
|
||||||
console.log('NEW')
|
console.log('NEW')
|
||||||
@newItemModal = new App.ControllerModal
|
@newItemModal = new App.ControllerModal
|
||||||
|
large: true
|
||||||
head: 'New Calendar'
|
head: 'New Calendar'
|
||||||
content: App.view('calendar/new')()
|
content: App.view('calendar/new')()
|
||||||
button: 'Create'
|
button: 'Create'
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<div class="formGroup-label">
|
<div class="formGroup-label">
|
||||||
<label for="name">Timezone <span>*</span></label>
|
<label for="name">Timezone <span>*</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<div class="controls" style="position: relative">
|
||||||
|
|
||||||
<select class="form-control js-selectTimezone" name="timezone">
|
<select class="form-control js-selectTimezone" name="timezone">
|
||||||
<option value="Africa/Abidjan">Africa/Abidjan (GMT0)</option>
|
<option value="Africa/Abidjan">Africa/Abidjan (GMT0)</option>
|
||||||
|
|
@ -563,98 +563,87 @@
|
||||||
<label for="name">Business Hours <span>*</span></label>
|
<label for="name">Business Hours <span>*</span></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<table class="settings-list">
|
<table class="settings-list settings-list--stretch settings-list--toggleColumn">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="text-align: center">
|
<th style="text-align: center">
|
||||||
<%- @T('Day') %>
|
<label class="day-name"><input class="js-activateColumn" data-target="monday" type="checkbox" checked> Monday</label>
|
||||||
<th style="text-align: center">
|
<th style="text-align: center">
|
||||||
<%- @T('From/Till') %>
|
<label class="day-name"><input class="js-activateColumn" data-target="tuesday" type="checkbox" checked> Tuesday</label>
|
||||||
<th style="text-align: center">
|
<th style="text-align: center">
|
||||||
<%- @T('From/Till') %>
|
<label class="day-name"><input class="js-activateColumn" data-target="wednesday" type="checkbox" checked> Wednesday</label>
|
||||||
|
<th style="text-align: center">
|
||||||
|
<label class="day-name"><input class="js-activateColumn" data-target="thursday" type="checkbox" checked> Thursday</label>
|
||||||
|
<th style="text-align: center">
|
||||||
|
<label class="day-name"><input class="js-activateColumn" data-target="friday" type="checkbox" checked> Friday</label>
|
||||||
|
<th style="text-align: center">
|
||||||
|
<label class="day-name"><input class="js-activateColumn" data-target="saturday" type="checkbox"> Saturday</label>
|
||||||
|
<th style="text-align: center">
|
||||||
|
<label class="day-name"><input class="js-activateColumn" data-target="sunday" type="checkbox"> Sunday</label>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><%- @T('Monday') %></td>
|
<td data-column="monday" class="form-group day-time is-active">
|
||||||
<td>
|
<label for="monday_start_time">from</label>
|
||||||
<input type="text" name="mon_start_time" value="07:00" class="time time--12 js-time">
|
<input type="text" id="monday_start_time" value="07:00" class="form-control form-control--small time js-time">
|
||||||
<input type="text" name="mon_end_time" value="18:00" class="time time--12 js-time">
|
<label for="monday_end_time">till</label>
|
||||||
</td>
|
<input type="text" id="monday_end_time" value="18:00" class="form-control form-control--small time js-time">
|
||||||
<td>
|
|
||||||
<input type="text" name="mon_start_time" value="" class="time time--12 js-time">
|
<td data-column="tuesday" class="form-group day-time is-active">
|
||||||
<input type="text" name="mon_end_time" value="" class="time time--12 js-time">
|
<label for="tuesday_start_time">from</label>
|
||||||
</td>
|
<input type="text" id="tuesday_start_time" value="07:00" class="form-control form-control--small time js-time">
|
||||||
|
<label for="tuesday_end_time">till</label>
|
||||||
|
<input type="text" id="tuesday_end_time" value="18:00" class="form-control form-control--small time js-time">
|
||||||
|
|
||||||
|
<td data-column="wednesday" class="form-group day-time is-active">
|
||||||
|
<label for="wednesday_start_time">from</label>
|
||||||
|
<input type="text" id="wednesday_start_time" value="07:00" class="form-control form-control--small time js-time">
|
||||||
|
<label for="wednesday_end_time">till</label>
|
||||||
|
<input type="text" id="wednesday_end_time" value="18:00" class="form-control form-control--small time js-time">
|
||||||
|
|
||||||
|
<td data-column="thursday" class="form-group day-time is-active">
|
||||||
|
<label for="thursday_start_time">from</label>
|
||||||
|
<input type="text" id="thursday_start_time" value="07:00" class="form-control form-control--small time js-time">
|
||||||
|
<label for="thursday_end_time">till</label>
|
||||||
|
<input type="text" id="thursday_end_time" value="18:00" class="form-control form-control--small time js-time">
|
||||||
|
|
||||||
|
<td data-column="friday" class="form-group day-time is-active">
|
||||||
|
<label for="friday_start_time">from</label>
|
||||||
|
<input type="text" id="friday_start_time" value="07:00" class="form-control form-control--small time js-time">
|
||||||
|
<label for="friday_end_time">till</label>
|
||||||
|
<input type="text" id="friday_end_time" value="13:00" class="form-control form-control--small time js-time">
|
||||||
|
|
||||||
|
<td data-column="saturday" class="form-group day-time">
|
||||||
|
<label for="saturday_start_time">from</label>
|
||||||
|
<input type="text" id="saturday_start_time" value="07:00" class="form-control form-control--small time js-time">
|
||||||
|
<label for="saturday_end_time">till</label>
|
||||||
|
<input type="text" id="saturday_end_time" value="18:00" class="form-control form-control--small time js-time">
|
||||||
|
|
||||||
|
<td data-column="sunday" class="form-group day-time">
|
||||||
|
<label for="sunday_start_time">from</label>
|
||||||
|
<input type="text" id="sunday_start_time" value="07:00" class="form-control form-control--small time js-time">
|
||||||
|
<label for="sunday_end_time">till</label>
|
||||||
|
<input type="text" id="sunday_end_time" value="18:00" class="form-control form-control--small time js-time">
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><%- @T('Tuesday') %></td>
|
<td data-column="monday" class="settings-list-action-cell js-add-time is-active">
|
||||||
<td>
|
<%- @Icon('plus') %>
|
||||||
<input type="text" name="tue_start_time" value="07:00" class="time time--12 js-time">
|
<td data-column="tuesday" class="settings-list-action-cell js-add-time is-active">
|
||||||
<input type="text" name="tue_end_time" value="18:00" class="time time--12 js-time">
|
<%- @Icon('plus') %>
|
||||||
</td>
|
<td data-column="wednesday" class="settings-list-action-cell js-add-time is-active">
|
||||||
<td>
|
<%- @Icon('plus') %>
|
||||||
<input type="text" name="tue_start_time" value="" class="time time--12 js-time">
|
<td data-column="thursday" class="settings-list-action-cell js-add-time is-active">
|
||||||
<input type="text" name="tue_end_time" value="" class="time time--12 js-time">
|
<%- @Icon('plus') %>
|
||||||
</td>
|
<td data-column="friday" class="settings-list-action-cell js-add-time is-active">
|
||||||
</tr>
|
<%- @Icon('plus') %>
|
||||||
<tr>
|
<td data-column="saturday" class="settings-list-action-cell js-add-time">
|
||||||
<td><%- @T('Wednesday') %></td>
|
<%- @Icon('plus') %>
|
||||||
<td>
|
<td data-column="sunday" class="settings-list-action-cell js-add-time">
|
||||||
<input type="text" name="wed_start_time" value="07:00" class="time time--12 js-time">
|
<%- @Icon('plus') %>
|
||||||
<input type="text" name="wed_end_time" value="18:00" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="wed_start_time" value="" class="time time--12 js-time">
|
|
||||||
<input type="text" name="wed_end_time" value="" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><%- @T('Thursday') %></td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="thu_start_time" value="07:00" class="time time--12 js-time">
|
|
||||||
<input type="text" name="thu_end_time" value="18:00" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="thu_start_time" value="" class="time time--12 js-time">
|
|
||||||
<input type="text" name="thu_end_time" value="" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><%- @T('Friday') %></td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="fri_start_time" value="07:00" class="time time--12 js-time">
|
|
||||||
<input type="text" name="fri_end_time" value="18:00" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="fri_start_time" value="" class="time time--12 js-time">
|
|
||||||
<input type="text" name="fri_end_time" value="" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><%- @T('Saturday') %></td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="sat_start_time" value="" class="time time--12 js-time">
|
|
||||||
<input type="text" name="sat_end_time" value="" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="sat_start_time" value="" class="time time--12 js-time">
|
|
||||||
<input type="text" name="sat_end_time" value="" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><%- @T('Sunday') %></td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="sun_start_time" value="" class="time time--12 js-time">
|
|
||||||
<input type="text" name="sun_end_time" value="" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="sun_start_time" value="" class="time time--12 js-time">
|
|
||||||
<input type="text" name="sun_end_time" value="" class="time time--12 js-time">
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1054,6 +1054,10 @@ input.time {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
line-height: 42px;
|
line-height: 42px;
|
||||||
|
|
||||||
|
&.form-control--small {
|
||||||
|
line-height: 31px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input.time.time--12 {
|
input.time.time--12 {
|
||||||
|
|
@ -5776,13 +5780,28 @@ output {
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group.day-time {
|
.form-group.day-time {
|
||||||
padding: 5px;
|
padding-bottom: 4px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-list {
|
.settings-list {
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
color: hsl(60,1%,34%);
|
color: hsl(60,1%,34%);
|
||||||
background: white;
|
background: white;
|
||||||
|
table-layout: auto;
|
||||||
|
|
||||||
|
&.settings-list--stretch {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-bottom: 34px;
|
margin-bottom: 34px;
|
||||||
|
|
@ -5802,7 +5821,7 @@ output {
|
||||||
|
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
padding: 10px;
|
padding: 5px;
|
||||||
border: 1px solid hsl(198,18%,86%);
|
border: 1px solid hsl(198,18%,86%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -5810,6 +5829,8 @@ output {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-bottom: 8px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
background: hsl(197,20%,93%);
|
background: hsl(197,20%,93%);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
@ -5856,6 +5877,23 @@ output {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.settings-list-action-cell {
|
||||||
|
@extend .u-clickable;
|
||||||
|
text-align: center;
|
||||||
|
background: hsl(197,22%,96%);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.icon {
|
||||||
|
fill: hsl(60,1%,34%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
fill: hsl(198,19%,72%);
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.select-boxes {
|
.select-boxes {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue