Commit d95f9eda authored by droces's avatar droces

Changes to layout and style of Book page form and calendar

parent f62386e4
......@@ -57,7 +57,17 @@ label.form-required {
margin: 0 0.3em;
color: #c00;
}*/
.field--type-datetime {
clear: both;
}
/* Book page */
[id="calendar"] {
margin-top: 2em;
}
[id="booking_info"] table {
width: 100%;
}
[id="booking_info"] .value {
float: right;
}
......@@ -116,6 +126,7 @@ label.form-required {
/* Calendar */
.fc table {
margin: 0;
}
......@@ -128,16 +139,24 @@ label.form-required {
.fc td,
.fc th {
/*border-width: 0;*/
border-color: rgba(0, 0, 0, 0.2);
border-color: #d4d4d4; /* rgba(0, 0, 0, 0.2); */
}
.fc td {
text-align: center;
}
.fc .fc-widget-header th {
font-size: 0.9em;
font-weight: bold;
padding: 0.4em 0;
}
.fc-month-view {
background-color: white;
}
.fc .fc-row {
margin-right: 0 !important;
}
.fc-row .fc-content-skeleton {
z-index: -10; /* So that is shows below the .fc-bg table cells */
/*z-index: -10;*/ /* So that is shows below the .fc-bg table cells */
}
.fc .fc-scroller {
height: auto !important;
......@@ -145,25 +164,40 @@ label.form-required {
}
.fc table .fc-day-top {
/* background: RGBA(0, 0, 0, 0.1); */
position: relative;
z-index: 5;
}
.fc .fc-time {
display: none;
}
.fc .fc-bg .fc-day.fc-past {
background-color: rgba(0, 0, 0, 0.05);
}
.fc .fc-bg .fc-day p {
margin: 24px 0 0 0;
font-size: 0.9em;
}
.fc .fc-day-grid-event {
font-weight: bold;
color: rgba(255, 255, 255, 0.8);
color: inherit; /* rgba(255, 255, 255, 0.8); */
padding: 0.2em 0.5em;
margin-left: 1px;
height: 60px;
padding-top: 24px;
margin-right: 3px;
}
.fc .fc-day-number {
float: left !important;
font-weight: bold !important;
margin-left: 0.2em;
}
.fc .fc-bg .fc-day:hover,
.fc .fc-bg .fc-day:focus {
background-color: rgba(30, 149, 188, 0.3); /* blue */
}
.fc-unthemed td.fc-today {
background: rgba(255, 212, 0, 0.14); /* yellow */
/*background: rgba(255, 212, 0, 0.14); */ /* yellow */
background: rgba(105, 197, 255, 0.16);
}
.fc .fc-view-container {
height: auto !important;
......
......@@ -12,6 +12,36 @@
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function ($, Drupal, window, document, undefined) {
/**
CONTENTS
add_field_listeners()
add_booking_data_fetched_listener()
set_up_calendar()
refresh_main_info()
save_booking()
get_addons_sum()
get_addons_total()
Drupal.abookings
.get_bookable_nid()
.get_bookable_data()
.set_booking_form()
.set_page_elements()
.dayRender()
.dayHover()
.get_seasonal_price()
.fetch_bookable_data()
.validate_promo()
.add_booking()
.date_unix_to_iso()
.create_booking()
.calculate_base_cost()
.check_event_overlap()
.invoke_callbacks()
.validate_booking_form()
*/
var calendar,
booking_form,
events = {},
......@@ -88,11 +118,11 @@ Drupal.behaviors.abookings = {
// console.log('calendar_days: ', calendar_days);
calendar_days.on('mouseenter', function() {
calendar_days.removeClass('active');
$(this).addClass('active');
// calendar_days.removeClass('active');
// $(this).addClass('active');
});
calendar_days.on('mouseleave', function() {
$(this).removeClass('active');
// $(this).removeClass('active');
});
// Define listeners
......@@ -278,8 +308,7 @@ function set_up_calendar() {
},
dayClick: function(date_arrive, jsEvent, view, resourceObj) {
// console.log('date_arrive: ', date_arrive);
// update_calendar_booking(date_arrive);
refresh_main_info(date_arrive);
// refresh_main_info(date_arrive);
}
});
};
......@@ -855,13 +884,13 @@ Drupal.abookings = {
}
// events[nid].end.subtract(1, 'days');
if (nid === 'current') {
events[nid].title = 'Provisional';
events[nid].color = '#1f96bd'; // light blue
events[nid].title = 'Booking';
events[nid].color = '#69C0FF'; // light blue
events[nid].field_booking_status = 'provisional';
}
else {
events[nid].title = 'Booked';
events[nid].color = '#444';
events[nid].title = 'Unavailable';
events[nid].color = '#A8A8A8';
}
// console.log('events[nid]: ', events[nid]);
}
......
......@@ -295,6 +295,19 @@ function fe_booking_form_alter(&$form, FormStateInterface $form_state, $form_id)
$form['field_base_cost']['#attributes']['class'][] = 'hidden';
$form['field_num_nights']['#attributes']['class'][] = 'hidden';
$form['field_checkin_date']['#weight'] = -10;
$form['field_checkout_date']['#weight'] = -9;
$form['calendar'] = [
'#prefix' => '<div class="">',
'#suffix' => '</div>',
'#type' => 'markup',
'calendar' => [
'#markup' => '<div id="calendar"></div>',
],
'#weight' => 1,
];
$form_items_to_deaccess = [
'title',
'field_booking_status',
......
......@@ -63,7 +63,7 @@ content:
type: number
region: content
field_bookable_unit:
weight: 1
weight: -10
settings: { }
third_party_settings: { }
type: options_select
......@@ -75,13 +75,13 @@ content:
type: options_select
region: content
field_checkin_date:
weight: 4
weight: -9
settings: { }
third_party_settings: { }
type: datetime_default
region: content
field_checkout_date:
weight: 5
weight: -8
settings: { }
third_party_settings: { }
type: datetime_default
......@@ -133,14 +133,14 @@ content:
type: string_textarea
region: content
field_num_guests:
weight: 2
weight: 4
settings:
placeholder: ''
third_party_settings: { }
type: number
region: content
field_num_nights:
weight: 3
weight: 5
settings:
placeholder: ''
third_party_settings: { }
......
......@@ -16,7 +16,7 @@ field_name: field_checkin_date
entity_type: node
bundle: booking
label: 'Check-in date'
description: 'The year, month, and day that the guests should arrive.'
description: '' # 'The year, month, and day that the guests should arrive.'
required: true
translatable: false
default_value: { }
......
......@@ -16,7 +16,7 @@ field_name: field_checkout_date
entity_type: node
bundle: booking
label: 'Check-out date'
description: 'The year, month, and day that the guests should leave.'
description: '' # 'The year, month, and day that the guests should leave.'
required: true
translatable: false
default_value: { }
......
......@@ -26,28 +26,24 @@ class BookPageController extends ControllerBase {
$content = array();
$content['calendar'] = [
'#prefix' => '<div class="half-left">',
'#suffix' => '</div>',
'#type' => 'markup',
'calendar' => [
'#markup' => '<div id="calendar"></div>',
],
'#attached' => array(
'library' => array(
'abookings/abookings',
'abookings/fullCalendar',
),
),
];
// $content['calendar'] = [
// '#prefix' => '<div class="half-left">',
// '#suffix' => '</div>',
// '#type' => 'markup',
// 'calendar' => [
// '#markup' => '<div id="calendar"></div>',
// ],
// ];
$content['#attached']['library'][] = 'abookings/abookings';
$content['#attached']['library'][] = 'abookings/fullCalendar';
$content['booking_info_container'] = [
'#prefix' => '<div id="booking_info">',
'#prefix' => '<div id="booking_info" class="half-right">',
'#suffix' => '</div>',
];
$content['booking_info_container']['booking_details'] = [
'#prefix' => '<table class="half-right">',
'#prefix' => '<table>',
'#suffix' => '</table>',
'booking_cost' => [
'#markup' => '<tr><td class="field_base_cost">'
......@@ -76,7 +72,7 @@ class BookPageController extends ControllerBase {
];
$content['booking_info_container']['booking_info'] = [
'#prefix' => '<div class="half-right">',
'#prefix' => '<div>',
'#suffix' => '</div>',
'checkin_date' => [
'#markup' => '<p class="field_checkin_date">'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment