ifl/iflrandevu
1
1
Fork 0
forked from mirrors/easyappointments
Code Issues 6 Pull requests Releases 3 Activity

Style the flatpickr in the booking page

Browse source
This commit is contained in:
Alex Tselegidis 2023-02-07 08:24:46 +01:00
parent 85e0567b13
commit 77256e502a
6 changed files with 63 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
application/views/components/company_color_style.php
View file

@ -166,5 +166,18 @@
.backend-page .filter-records .results .entry.selected {
border-right-color: <?= $company_color ?> !important;
}
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar span.flatpickr-weekday {
background: <?= $company_color ?> !important;
}
.flatpickr-day.endRange, .flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.endRange:focus, .flatpickr-day.endRange:hover, .flatpickr-day.selected, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.startRange:focus, .flatpickr-day.startRange:hover {
background: <?= $company_color ?> !important;
border-color: <?= $company_color ?> !important;
}
</style>
<?php endif ?>

1
application/views/layouts/backend_layout.php
View file

@ -16,6 +16,7 @@
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/trumbowyg/trumbowyg.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/select2/select2.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/material_green.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . setting('theme', 'default') . '.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/backend_layout.css') ?>">

1
application/views/layouts/booking_layout.php
View file

@ -15,6 +15,7 @@
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/material_green.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . vars('theme') . '.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/booking_layout.css') ?>">

38
assets/css/general.scss
View file

@ -438,3 +438,41 @@ body .clearfix {
.flatpickr-wrapper {
width: 100%;
}
.flatpickr-calendar {
box-shadow: none;
.flatpickr-months {
padding: 10px 0;
background: #449a82;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.flatpickr-current-month {
padding: 3px;
}
.flatpickr-innerContainer {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.dayContainer {
padding: 10px 0;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
background: #429a82;
color: white;
}
.flatpickr-day.endRange, .flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.endRange:focus, .flatpickr-day.endRange:hover, .flatpickr-day.selected, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.startRange:focus, .flatpickr-day.startRange:hover {
background: #429a82;
border-color: #429a82;
color: white;
}
}

10
assets/css/layouts/booking_layout.scss
View file

@ -123,14 +123,8 @@ body {
margin-right: 0;
}
#book-appointment-wizard .wizard-frame #select-date {
max-width: 288px;
margin: auto;
padding: 15px 0;
}
#book-appointment-wizard .wizard-frame #select-date > .ui-datepicker {
margin: auto;
#book-appointment-wizard .wizard-frame .flatpickr-calendar {
margin: 25px auto;
}
#book-appointment-wizard .wizard-frame #select-time {

6
gulpfile.js
View file

@ -21,6 +21,7 @@ const plumber = require('gulp-plumber');
const rename = require('gulp-rename');
const sass = require('gulp-sass')(require('sass'));
const zip = require('zip-dir');
// const debug = require('gulp-debug');
function archive(done) {
@ -181,6 +182,11 @@ function vendor(done) {
gulp.dest('assets/vendor/flatpickr')
);
gulp.src(['node_modules/flatpickr/dist/themes/material_green.css'])
.pipe(css())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('assets/vendor/flatpickr'));
done();
}