mirrors/easyappointments
1
0
Fork 1
mirror of https://github.com/alextselegidis/easyappointments.git synced 2024-11-22 16:02:54 +03:00
Code Issues Projects Releases 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> </script>
<div id="calendar-page"> <div id="calendar-page" class="container-fluid">
<div id="calendar-toolbar"> <div id="calendar-toolbar">
<div id="calendar-filter" class="form-group form-inline"> <div id="calendar-filter" class="form-inline col-xs-12 col-md-5">
<label for="select-filter-item"> <div class="form-group">
<?php echo $this->lang->line('display_calendar'); ?> <label for="select-filter-item">
</label> <?php echo $this->lang->line('display_calendar'); ?>
<select id="select-filter-item" class="form-control"> </label>
title="<?php echo $this->lang->line('select_filter_item_hint'); ?>"> <select id="select-filter-item" class="form-control">
</select> title="<?php echo $this->lang->line('select_filter_item_hint'); ?>">
</select>
</div>
</div> </div>
<div id="calendar-actions"> <div id="calendar-actions" class="col-xs-12 col-md-7">
<div class="btn-group"> <div class="btn-group">
<?php if (($role_slug == DB_SLUG_ADMIN || $role_slug == DB_SLUG_PROVIDER) <?php if (($role_slug == DB_SLUG_ADMIN || $role_slug == DB_SLUG_PROVIDER)
&& Config::GOOGLE_SYNC_FEATURE == TRUE) { ?> && Config::GOOGLE_SYNC_FEATURE == TRUE) { ?>
@ -69,7 +71,7 @@
</button> </button>
</div> </div>
<?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE) { ?> <?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE): ?>
<div class="btn-group"> <div class="btn-group">
<button id="insert-appointment" class="btn btn-primary" <button id="insert-appointment" class="btn btn-primary"
title="<?php echo $this->lang->line('new_appointment_hint'); ?>"> title="<?php echo $this->lang->line('new_appointment_hint'); ?>">
@ -83,7 +85,7 @@
<?php echo $this->lang->line('unavailable'); ?> <?php echo $this->lang->line('unavailable'); ?>
</button> </button>
</div> </div>
<?php } ?> <?php endif ?>
</div> </div>
</div> </div>

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

@ -3,6 +3,7 @@
<head> <head>
<title><?php echo $company_name; ?> | Easy!Appointments</title> <title><?php echo $company_name; ?> | Easy!Appointments</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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" <link rel="icon" type="image/x-icon"
href="<?php echo $base_url; ?>/assets/img/favicon.ico"> 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; border-bottom: 4px solid #c0f1d6;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
margin-bottom: 15px;
} }
#header #header-logo { #header #header-logo {
@ -135,13 +136,13 @@ body .modal .modal-title {
body .modal-header { body .modal-header {
padding: 12px 15px; padding: 12px 15px;
background: #35B66F; background: #35B66F;
border-bottom: 4px solid #2B995D; border-bottom: 4px solid #c0f1d6;
} }
body .modal-header h3 { body .modal-header h3 {
color: #FFF; color: #FFF;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: lighter;
} }
body .modal-header .close { body .modal-header .close {
@ -246,24 +247,26 @@ body .jspTrack {
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
#calendar-page #calendar-toolbar { #calendar-page #calendar-toolbar {
border-bottom: 1px solid #D6D6D6; border-bottom: 1px solid #D6D6D6;
border-radius: 3px;
background: #3A3A3A; background: #3A3A3A;
padding: 10px; padding: 10px;
margin-bottom: 15px;
overflow: auto; overflow: auto;
color: white; color: white;
} }
#calendar-page #calendar-filter { #calendar-page #calendar-filter > div {
float: left; margin: 5px 0;
margin-bottom: 0;
} }
#calendar-page #calendar-filter label { #calendar-page #calendar-filter label {
float: left; float: left;
display: inline-block; display: inline-block;
margin: 2px 10px 0 0; margin: 0 10px 0 0;
margin-right: 7px; margin-right: 7px;
margin-bottom: 0; margin-bottom: 0;
font-size: 18px; font-size: 18px;
font-weight: lighter;
} }
#calendar-page #calendar-filter select { #calendar-page #calendar-filter select {
@ -271,7 +274,6 @@ body .jspTrack {
padding: 0 10px; padding: 0 10px;
background-position-x: 95%; background-position-x: 95%;
height: 36px; height: 36px;
min-width: 270px;
} }
#calendar-page #calendar-filter select:disabled { #calendar-page #calendar-filter select:disabled {
@ -279,12 +281,12 @@ body .jspTrack {
cursor: auto; cursor: auto;
} }
#calendar-page #calendar-actions { #calendar-page #calendar-actions > div {
float: right; margin: 5px 0;
} }
#calendar-page #calendar { #calendar-page #calendar {
margin: 6px 12px; margin-bottom: 15px;
} }
#calendar-page #calendar .fc-unavailable { #calendar-page #calendar .fc-unavailable {
@ -311,9 +313,9 @@ body .jspTrack {
} }
#calendar .fc-header-title h2 { #calendar .fc-header-title h2 {
font-size: 18px; font-size: 16px;
margin: 0px; margin: 0px;
line-height: 32px; line-height: 26px;
} }
#calendar .fc-header .fc-button { #calendar .fc-header .fc-button {
@ -764,3 +766,7 @@ body .form-horizontal .controls {
margin-left: 12px; 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 // Initialize page calendar
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
defaultView: 'agendaWeek', defaultView: defaultView,
height: _getCalendarHeight(), height: _getCalendarHeight(),
editable: true, editable: true,
firstDay: 1, // Monday firstDay: 1, // Monday