[WIP] Add modular templating

This commit is contained in:
Pablo
2018-12-21 14:13:45 +01:00
parent da974af02b
commit f92d793ead
2 changed files with 82 additions and 77 deletions

View File

@@ -160,6 +160,10 @@ input#bookings_search {
}
/** TOOLTIPS **/
.tooltip {
opacity: unset !important;
}
.tooltip .tooltip-inner {
font-family: Garuda, sans-serif;
border: 1px solid #5C5C5C;
@@ -169,7 +173,6 @@ input#bookings_search {
.tooltip .container {
max-width: 500px;
}
.tooltip .list-group {
margin-bottom: 0px;
}
@@ -180,30 +183,38 @@ input#bookings_search {
background-color: unset;
word-break: break-word;
}
header {
font-size: 1.2em;
}
.tooltip .container h3 {
margin-top: 0px;
.tooltip h1, .h1, h2, .h2, h3, .h3 {
margin-top: 2px;
margin-bottom: 0px;
}
.tooltip .container p {
margin-top: 2px;
margin-bottom: 2px;
}
.tooltip header {
font-size: 1.3em;
}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
padding-top: 3px;
padding-bottom: 3px;
}
.tt-margin {
/* Spacing in Bootstrap v4.0 */
.mt-3 {
margin-top: 3px;
}
.mr-5 {
margin-right: 5px;
}
.mx-25 {
margin-left: 25px;
margin-right: 25px;
}
.py-5 {
padding-top: 5px;
padding-bottom: 5px;
}
/* WARNING: The .row-eq-height class uses CSS3's flexbox layout mode,
which is not supported in Internet Explorer 9 and below. */

View File

@@ -68,88 +68,68 @@
</div>
</t>
<t t-name="HotelCalendar.TooltipReservation">
<t t-name="HotelCalendar.TooltipReservation.Channel.ota">
<p>WuBook: 1544109684</p>
<p>Booking: 4253096846</p>
</t>
<t t-name="HotelCalendar.TooltipReservation.Channel.direct">
<h3><small class="text-white">Sales Channel</small> Direct</h3>
</t>
<t t-name="HotelCalendar.TooltipReservation.normal">
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-6 bg-gray-dark">
<div class="row">
<div class="col-sm-2">
<span class="fa fa fa-user-circle-o fa-2x"/>
</div>
<div class="col-sm-10">
<header><t t-esc="name"/></header>
</div>
<div class="col-sm-12">
<p><t t-esc="phone"/></p>
<p><t t-esc="email"/></p>
</div>
</div>
<i class="fa fa-user-circle-o fa-2x fa-pull-left"/>
<header><t t-esc="name"/></header>
<p><t t-esc="phone"/></p>
<p><t t-esc="email"/></p>
</div>
<div class="col-sm-6 bg-gray-light">
<div class="row">
<div class="col-sm-2">
<span class="fa fa-hotel fa-2x"/>
</div>
<div class="col-sm-10">
<header><t t-esc="room_type"/></header>
Board Service Undefined
</div>
<div class="col-sm-2">
<h3><t t-esc="amount_total" t-widget="monetary"/></h3>
</div>
<div class="col-sm-10">
<p>Adults: <t t-esc="adults"/></p>
<p>Children: <t t-esc="children"/></p>
</div>
</div>
<i class="fa fa-hotel fa-2x fa-pull-left"/>
<h3 class="pull-right mt-3"><t t-esc="amount_total" t-widget="monetary"/></h3>
<header><t t-esc="room_type"/></header>
<p>Board Service Undefined</p>
<p>Adults: <t t-esc="adults"/> - Children: <t t-esc="children"/></p>
</div>
</div>
<div class="row row-eq-height tt-margin">
<div class="col-sm-6 bg-gray-light">
<div class="row row-eq-height mt-3">
<div class="col-sm-3 bg-warning">
<!-- FIXME: HARD CURRENCY -->
<div class="row">
<div class="col-sm-6">
<p>Pending</p>
<h3><t t-esc="amount_total" t-widget="monetary"/></h3>
</div>
<div class="col-sm-6">
<h3><t t-esc="amount_paid" t-widget="monetary"/></h3>
<p>Paid</p>
</div>
</div>
<p>Folio Pending</p>
<h3><t t-esc="amount_total" t-widget="monetary"/></h3>
</div>
<div class="col-sm-3 bg-info">
<!-- FIXME: HARD CURRENCY -->
<h3><t t-esc="amount_paid" t-widget="monetary"/></h3>
<p>Total Paid</p>
</div>
<div class="col-sm-6 bg-gray-dark">
<p>WuBook: 1544109684</p>
<p>Booking: 4253096846</p>
<t t-if="channel_type == 'web' or channel_type=='call'">
<t t-call="HotelCalendar.TooltipReservation.Channel.ota"/>
</t>
<t t-else="reservation_type == 'out'">
<t t-call="HotelCalendar.TooltipReservation.Channel.direct"/>
</t>
</div>
</div>
<div class="row row-eq-height tt-margin">
<div class="col-sm-6 bg-gray-dark">
<div class="row">
<div class="col-sm-2">
<i class="fa fa-arrow-circle-o-right fa-2x"/>
</div>
<div class="col-sm-7">
<h3><t t-esc="checkin"/></h3>
<p><t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/></p>
</div>
</div>
<div class="row row-eq-height mt-3">
<div class="col-sm-6 bg-gray-dark py-5">
<i class="fa fa-arrow-circle-o-right fa-2x fa-pull-left"/>
<h3><t t-esc="checkin"/></h3>
<p><t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/></p>
</div>
<div class="col-sm-6 bg-gray-light">
<div class="row">
<div class="col-sm-7">
<h3><t t-esc="checkout"/></h3>
<p><t t-esc="checkout_day_of_week"/> <t t-esc="departure_hour"/></p>
</div>
<div class="col-sm-2">
<i class="fa fa-arrow-circle-o-right fa-2x"/>
</div>
</div>
<div class="col-sm-6 bg-gray-light d-sm-2 py-5">
<i class="fa fa-arrow-circle-o-right fa-2x fa-pull-right"/>
<h3><t t-esc="checkout"/></h3>
<p><t t-esc="checkout_day_of_week"/> <t t-esc="departure_hour"/></p>
</div>
</div>
<div class="row row-eq-height tt-margin">
<div class="row row-eq-height mt-3">
<div class="col-sm-2">
<span class="fa fa-file-text-o fa-2x" role="button"/><t t-esc="folio_name"/>
<i class="fa fa-file-text-o fa-2x fa-pull-left" role="button"/>
<p><t t-esc="folio_name"/></p>
</div>
<div class="col-sm-2">
<span class="fa fa-external-link fa-2x" role="button"/>
@@ -169,6 +149,20 @@
</div>
</div>
</t>
<t t-name="HotelCalendar.TooltipReservation.out">
<div class="container">
<div class="row">
<div class="col-sm-12 bg-gray-dark py-5">
<i class="fa fa-ban fa-2x fa-pull-left"/>
<h2><t t-esc="name"/> <small class="text-white"><t t-esc="out_service_description"/></small> </h2>
</div>
</div>
</div>
</t>
<t t-name="HotelCalendar.TooltipReservation">
<t t-call="HotelCalendar.TooltipReservation.#{ reservation_type }"/>
</t>
<t t-name="HotelCalendar.TooltipRoom">
<div class="oe_tooltip_string"><t t-esc="name"/></div>