[WIP] Adjust styles

This commit is contained in:
Pablo
2019-01-28 10:27:36 +01:00
parent 6e7a074047
commit 2d1da3dd9f
4 changed files with 106 additions and 76 deletions

View File

@@ -52,7 +52,7 @@ class BusHotelCalendar(models.TransientModel):
'real_dates': vals['real_dates'], 'real_dates': vals['real_dates'],
}, },
'tooltip': { 'tooltip': {
'folio_name': vals['folio_id'], 'folio_name': vals['folio_name'],
'name': vals['partner_name'], 'name': vals['partner_name'],
'phone': vals['partner_phone'], 'phone': vals['partner_phone'],
'email': vals['partner_email'], 'email': vals['partner_email'],

View File

@@ -95,7 +95,7 @@ class HotelReservation(models.Model):
'real_dates': [reserv['real_checkin'], reserv['real_checkout']]}) 'real_dates': [reserv['real_checkin'], reserv['real_checkout']]})
json_reservation_tooltips.update({ json_reservation_tooltips.update({
reserv['id']: { reserv['id']: {
'folio_name': reserv['folio_id'], 'folio_name': reserv['folio_name'],
'name': _('Out of service') 'name': _('Out of service')
if reserv['reservation_type'] == 'out' if reserv['reservation_type'] == 'out'
else reserv['partner_name'], else reserv['partner_name'],
@@ -119,8 +119,7 @@ class HotelReservation(models.Model):
'splitted': reserv['splitted'], 'splitted': reserv['splitted'],
'channel_type': reserv['channel_type'], 'channel_type': reserv['channel_type'],
'real_dates': [reserv['real_checkin'], reserv['real_checkout']], 'real_dates': [reserv['real_checkin'], reserv['real_checkout']],
# TODO: Add Board Services and Extra Service as Cradle, Bed, ... 'board_service_name': reserv['board_service_name'] or _('No board services'),
'board_service_name': reserv['board_service_name'],
'services': reserv['services'], 'services': reserv['services'],
} }
}) })
@@ -393,6 +392,7 @@ class HotelReservation(models.Model):
'title': ntitle, 'title': ntitle,
'room_id': self.room_id.id, 'room_id': self.room_id.id,
'reserv_id': self.id, 'reserv_id': self.id,
'folio_name': self.folio_id.name,
'partner_name': (self.closure_reason_id.name or _('Out of service')) 'partner_name': (self.closure_reason_id.name or _('Out of service'))
if self.reservation_type == 'out' else self.partner_id.name, if self.reservation_type == 'out' else self.partner_id.name,
'adults': self.adults, 'adults': self.adults,
@@ -424,7 +424,7 @@ class HotelReservation(models.Model):
or _('No reason given'), or _('No reason given'),
'real_dates': [self.real_checkin, self.real_checkout], 'real_dates': [self.real_checkin, self.real_checkout],
'channel_type': self.channel_type, 'channel_type': self.channel_type,
'board_service_name': self.board_service_room_id.hotel_board_service_id.name, 'board_service_name': self.board_service_room_id.hotel_board_service_id.name or _('No board services'),
'services': [service.product_id.name for service in self.service_ids 'services': [service.product_id.name for service in self.service_ids
if service.product_id.show_in_calendar] or False, if service.product_id.show_in_calendar] or False,
} }

View File

@@ -194,36 +194,41 @@ input#bookings_search {
text-align: left; text-align: left;
} }
/** TOOLTIPS **/ /** POPOVER **/
.popover-content { .popover-content {
font-family: Garuda, sans-serif; font-family: Garuda, sans-serif;
font-size: 12px; font-size: 12px;
padding: 9px; padding: 0px;
} }
.popover h1, .h1, h2, .h2, h3, .h3 { .popover h1, .h1, h2, .h2, h3, .h3 {
margin-top: 2px; margin-top: 2px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.popover { .popover {
max-width: 550px; max-width: 400px;
border-radius: 0px; border-radius: 0px;
padding: 0px;
} }
.popover .container { .popover .container {
max-width: 100%; max-width: 100%;
} }
.popover .container p { .popover .container p {
margin-top: 3px; margin-top: 2px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.popover header { .popover .container p.email {
font-size: 1.3em; word-wrap: break-word;
} }
.popover .fa-border { .popover .container p.board {
padding: .25em; margin-top: 0px;
border: solid 0.1em #777777; }
border-radius: .2em; .popover header {
font-size: 1.2em;
} }
.fa-2_5x {
font-size: 2.5em;
}
.fa-text-inside { .fa-text-inside {
font-family: Garuda, sans-serif; font-family: Garuda, sans-serif;
font-size: 14px; font-size: 14px;
@@ -232,10 +237,29 @@ input#bookings_search {
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
} }
/* custom styles for popover info */
.circle {
width:35px;
height:35px;
border-radius:50px;
line-height:35px;
text-align:center;
color:#fff;
background:#777;
margin-right: .65em;
}
.bg-gray-lighter {
background-color: #ddd;
}
/* Spacing in Bootstrap v4.0 */ /* Spacing in Bootstrap v4.0 */
.mt-3 { .mt-3 {
margin-top: 3px; margin-top: 3px;
} }
.mt-5 {
margin-top: 5px;
}
.mt-10 { .mt-10 {
margin-top: 10px !important; margin-top: 10px !important;
} }
@@ -257,6 +281,10 @@ input#bookings_search {
padding-bottom: 10px; padding-bottom: 10px;
} }
.pr-0 {
padding-right: 0px;
}
/* WARNING: The .row-eq-height class uses CSS3's flexbox layout mode, /* WARNING: The .row-eq-height class uses CSS3's flexbox layout mode,
which is not supported in Internet Explorer 9 and below. */ which is not supported in Internet Explorer 9 and below. */
.row-eq-height { .row-eq-height {

View File

@@ -103,50 +103,30 @@
</div> </div>
</t> </t>
<t t-name="HotelCalendar.TooltipReservation.Footer"> <t t-name="HotelCalendar.TooltipReservation.Customer">
<div class="row row-eq-height mt-10"> <div class="row row-eq-height">
<div class="col-sm-2 btn_popover_open_folio"> <div class="col-sm-6 bg-gray-light">
<i class="fa fa-file-text-o fa-2x fa-pull-left" role="button" <i class="fa fa-user-circle fa-2x fa-pull-left mt-5"/>
title="View Folio Details"> <span class="fa-text-inside"><t t-esc="folio_name"/></span></i> <header><t t-esc="name"/></header>
<p><t t-esc="phone"/></p>
<p class="email"><t t-esc="email"/></p>
</div> </div>
<div class="col-sm-2 btn_popover_open_reservation"> <div class="col-sm-6 bg-gray-lighter">
<span class="fa fa-suitcase fa-2x" role="button" <i class="fa fa-hotel fa-2_5x fa-pull-left mt-5"/>
title="View Reservation Details" /> <header class="mt-5"><t t-esc="room_type_name"/></header>
</div>
<div class="col-sm-2"> <p><t t-esc="board_service_name"/></p>
<span class="fa fa-user-plus fa-2x" role="button"
title="Checkin" /> <span class="circle pull-left"><t t-esc="amount_total" t-widget="monetary"/></span>
</div> <p>Adults: <t t-esc="adults"/></p>
<div class="col-sm-2"> <p class="children">Children: <t t-esc="children"/></p>
<span class="fa fa-envelope fa-2x" role="button"
title="Send Reservation Email" />
</div>
<div class="col-sm-2">
<span class="fa fa-money fa-2x" role="button"
title="Payments" />
</div>
<div class="col-sm-2 btn_popover_close">
<span class="fa fa-window-close fa-2x" role="button"
title="Close" />
</div>
</div>
<div class="row row-eq-height mt-10">
<div class="col-sm-12">
<t t-if="services">
<t t-foreach='services' t-as='ps'>
<i class="fa fa-exclamation-circle"/> <t t-esc='ps'/>
</t>
</t>
<t t-if="splitted">
<p>This reservation is part of splitted reservation. You can check it in the corresponding Folio.</p>
</t>
</div> </div>
</div> </div>
</t> </t>
<t t-name="HotelCalendar.TooltipReservation.Sale"> <t t-name="HotelCalendar.TooltipReservation.Sale">
<div class="row row-eq-height mt-3"> <div class="row row-eq-height mt-3">
<div class="col-sm-3 bg-primary pb-10"> <div class="col-sm-3 bg-gray-light pb-10 pr-0">
<!-- FIXME: HARD CURRENCY --> <!-- FIXME: HARD CURRENCY -->
<p>Folio Pending</p> <p>Folio Pending</p>
<h3><t t-esc="amount_total" t-widget="monetary"/></h3> <h3><t t-esc="amount_total" t-widget="monetary"/></h3>
@@ -169,7 +149,7 @@
<t t-name="HotelCalendar.TooltipReservation.Dates"> <t t-name="HotelCalendar.TooltipReservation.Dates">
<div class="row row-eq-height mt-3"> <div class="row row-eq-height mt-3">
<div class="col-sm-6 bg-gray-light py-5"> <div class="col-sm-6 bg-primary py-5">
<i class="fa fa-sign-in fa-2x fa-pull-left"/> <i class="fa fa-sign-in fa-2x fa-pull-left"/>
<h3><t t-esc="checkin"/></h3> <h3><t t-esc="checkin"/></h3>
<p><t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/></p> <p><t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/></p>
@@ -182,24 +162,46 @@
</div> </div>
</t> </t>
<t t-name="HotelCalendar.TooltipReservation.Footer">
<div class="row row-eq-height mt-10">
<div class="col-sm-4 btn_popover_open_folio">
<i class="fa fa-file-text-o fa-2x fa-pull-left" role="button"
title="View Folio Details"> <span class="fa-text-inside"><t t-esc="folio_name"/></span></i>
</div>
<div class="col-sm-2 btn_popover_open_reservation">
<span class="fa fa-suitcase fa-2x" role="button"
title="View Reservation Details" />
</div>
<div class="col-sm-2">
<span class="fa fa-user-plus fa-2x" role="button"
title="Checkin" />
</div>
<div class="col-sm-2">
<span class="fa fa-envelope fa-2x" role="button"
title="Send Reservation Email" />
</div>
<div class="col-sm-2">
<span class="fa fa-money fa-2x" role="button"
title="Payments" />
</div>
</div>
<div class="row row-eq-height mt-10">
<div class="col-sm-12">
<t t-if="services">
<t t-foreach='services' t-as='ps'>
<i class="fa fa-exclamation-circle"/> <t t-esc='ps'/>
</t>
</t>
<t t-if="splitted">
<p>This reservation is part of splitted reservation. You can check it in the corresponding Folio.</p>
</t>
</div>
</div>
</t>
<t t-name="HotelCalendar.TooltipReservation.normal"> <t t-name="HotelCalendar.TooltipReservation.normal">
<div class="container"> <div class="container">
<div class="row row-eq-height"> <t t-call="HotelCalendar.TooltipReservation.Customer"/>
<div class="col-sm-6 bg-gray-light">
<i class="fa fa-user-circle 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-lighter">
<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_name"/></header>
<p>Board Service: <t t-esc="board_service_name"/></p>
<p>Adults: <t t-esc="adults"/> - Children: <t t-esc="children"/></p>
</div>
</div>
<t t-call="HotelCalendar.TooltipReservation.Sale"/> <t t-call="HotelCalendar.TooltipReservation.Sale"/>
<t t-call="HotelCalendar.TooltipReservation.Dates"/> <t t-call="HotelCalendar.TooltipReservation.Dates"/>
<t t-call="HotelCalendar.TooltipReservation.Footer"/> <t t-call="HotelCalendar.TooltipReservation.Footer"/>
@@ -210,20 +212,20 @@
<div class="container"> <div class="container">
<div class="row row-eq-height"> <div class="row row-eq-height">
<div class="col-sm-6 bg-danger"> <div class="col-sm-6 bg-danger">
<i class="fa fa-black-tie fa-2x fa-pull-left"/> <i class="fa fa-black-tie fa-2x fa-pull-left mt-5"/>
<header><t t-esc="name"/></header> <header><t t-esc="name"/></header>
<p><t t-esc="phone"/></p> <p><t t-esc="phone"/></p>
<p><t t-esc="email"/></p> <p class="email"><t t-esc="email"/></p>
</div> </div>
<div class="col-sm-6 bg-gray-lighter"> <div class="col-sm-6 bg-gray-lighter">
<i class="fa fa-hotel fa-2x fa-pull-left"/> <i class="fa fa-hotel fa-2_5x fa-pull-left mt-5"/>
<header><t t-esc="room_type_name"/></header> <header class="mt-5"><t t-esc="room_type_name"/></header>
<p><t t-esc="board_service_name"/></p>
<p>Board Service: <t t-esc="board_service_name"/></p> <p>Adults: <t t-esc="adults"/></p>
<p>Adults: <t t-esc="adults"/> - Children: <t t-esc="children"/></p> <p class="children">Children: <t t-esc="children"/></p>
</div> </div>
</div> </div>
<t t-call="HotelCalendar.TooltipReservation.Sale"/>
<t t-call="HotelCalendar.TooltipReservation.Dates"/> <t t-call="HotelCalendar.TooltipReservation.Dates"/>
<t t-call="HotelCalendar.TooltipReservation.Footer"/> <t t-call="HotelCalendar.TooltipReservation.Footer"/>
</div> </div>