maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Responsive design refactoring for the backend/calendar page.

Browse source
This commit is contained in:
Alex Tselegidis 2016-07-12 22:02:59 +02:00
parent 38e2955273
commit b8b1d546fd
4 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/application/views/backend/calendar.php
View file

@ -34,18 +34,20 @@
});
</script>
<div id="calendar-page">
<div id="calendar-page" class="container-fluid">
<div id="calendar-toolbar">
<div id="calendar-filter" class="form-group form-inline">
<label for="select-filter-item">
<?php echo $this->lang->line('display_calendar'); ?>
</label>
<select id="select-filter-item" class="form-control">
title="<?php echo $this->lang->line('select_filter_item_hint'); ?>">
</select>
<div id="calendar-filter" class="form-inline col-xs-12 col-md-5">
<div class="form-group">
<label for="select-filter-item">
<?php echo $this->lang->line('display_calendar'); ?>
</label>
<select id="select-filter-item" class="form-control">
title="<?php echo $this->lang->line('select_filter_item_hint'); ?>">
</select>
</div>
</div>
<div id="calendar-actions">
<div id="calendar-actions" class="col-xs-12 col-md-7">
<div class="btn-group">
<?php if (($role_slug == DB_SLUG_ADMIN || $role_slug == DB_SLUG_PROVIDER)
&& Config::GOOGLE_SYNC_FEATURE == TRUE) { ?>
@ -69,7 +71,7 @@
</button>
</div>
<?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE) { ?>
<?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE): ?>
<div class="btn-group">
<button id="insert-appointment" class="btn btn-primary"
title="<?php echo $this->lang->line('new_appointment_hint'); ?>">
@ -83,7 +85,7 @@
<?php echo $this->lang->line('unavailable'); ?>
</button>
</div>
<?php } ?>
<?php endif ?>
</div>
</div>

1
src/application/views/backend/header.php
View file

@ -3,6 +3,7 @@
<head>
<title><?php echo $company_name; ?> | Easy!Appointments</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/x-icon"
href="<?php echo $base_url; ?>/assets/img/favicon.ico">

30
src/assets/css/backend.css
View file

@ -24,6 +24,7 @@ root {
border-bottom: 4px solid #c0f1d6;
box-shadow: none;
border-radius: 0;
margin-bottom: 15px;
}
#header #header-logo {
@ -135,13 +136,13 @@ body .modal .modal-title {
body .modal-header {
padding: 12px 15px;
background: #35B66F;
border-bottom: 4px solid #2B995D;
border-bottom: 4px solid #c0f1d6;
}
body .modal-header h3 {
color: #FFF;
font-size: 20px;
font-weight: bold;
font-weight: lighter;
}
body .modal-header .close {
@ -246,24 +247,26 @@ body .jspTrack {
-------------------------------------------------------------------- */
#calendar-page #calendar-toolbar {
border-bottom: 1px solid #D6D6D6;
border-radius: 3px;
background: #3A3A3A;
padding: 10px;
margin-bottom: 15px;
overflow: auto;
color: white;
}
#calendar-page #calendar-filter {
float: left;
margin-bottom: 0;
#calendar-page #calendar-filter > div {
margin: 5px 0;
}
#calendar-page #calendar-filter label {
float: left;
display: inline-block;
margin: 2px 10px 0 0;
margin: 0 10px 0 0;
margin-right: 7px;
margin-bottom: 0;
font-size: 18px;
font-weight: lighter;
}
#calendar-page #calendar-filter select {
@ -271,7 +274,6 @@ body .jspTrack {
padding: 0 10px;
background-position-x: 95%;
height: 36px;
min-width: 270px;
}
#calendar-page #calendar-filter select:disabled {
@ -279,12 +281,12 @@ body .jspTrack {
cursor: auto;
}
#calendar-page #calendar-actions {
float: right;
#calendar-page #calendar-actions > div {
margin: 5px 0;
}
#calendar-page #calendar {
margin: 6px 12px;
margin-bottom: 15px;
}
#calendar-page #calendar .fc-unavailable {
@ -311,9 +313,9 @@ body .jspTrack {
}
#calendar .fc-header-title h2 {
font-size: 18px;
font-size: 16px;
margin: 0px;
line-height: 32px;
line-height: 26px;
}
#calendar .fc-header .fc-button {
@ -764,3 +766,7 @@ body .form-horizontal .controls {
margin-left: 12px;
}
@media(max-width: 468px) {
#calendar .fc-header-title
}

5
src/assets/js/backend_calendar.js
View file

@ -1927,9 +1927,12 @@ window.BackendCalendar = window.BackendCalendar || {};
}
var defaultView = window.innerWidth < 468 ? 'agendaDay' : 'agendaWeek';
// Initialize page calendar
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
defaultView: defaultView,
height: _getCalendarHeight(),
editable: true,
firstDay: 1, // Monday