[UPD] CSS tricks for visual adjustment

This commit is contained in:
Pablo
2019-01-28 17:13:25 +01:00
parent e044a91989
commit 2b8fbfd456
2 changed files with 41 additions and 11 deletions

View File

@@ -269,14 +269,15 @@ input#bookings_search {
}
/* custom styles for popover info */
.circle {
width:35px;
height:35px;
border-radius:50px;
min-width:35px;
line-height:35px;
border-radius:50px;
text-align:center;
color:#fff;
background:#777;
margin-right: .65em;
padding: 0 5px;
}
.bg-gray-lighter {
@@ -299,6 +300,10 @@ input#bookings_search {
.mr-5 {
margin-right: 5px;
}
.mx-15 {
margin-left: 15px;
margin-right: 15px;
}
.mx-25 {
margin-left: 25px;
margin-right: 25px;
@@ -324,3 +329,25 @@ input#bookings_search {
}
/* TODO: Use Odoo Colours based on http://www.odoo.com/openerp_website/static/src/less/variables.less */
div.diagonal {
overflow: hidden;
background-color: #777;
}
.diagonal:before {
content: "";
border-top: 700px solid #777;
border-right: 500px solid #ddd;
position: absolute;
left: 40%;
bottom: 0;
}
div.on-top {
position: inherit;
}
div.pull-right-custom {
float: right !important;
margin-right: 15px;
color: #777;
text-align: right;
}

View File

@@ -132,16 +132,19 @@
<t t-name="HotelCalendar.TooltipReservation.Sale">
<div class="row row-eq-height mt-3">
<div class="col-sm-3 bg-gray-light pb-10 pr-0">
<!-- FIXME: HARD CURRENCY -->
<p>Folio Pending</p>
<h3><t t-esc="pending_amount" t-widget="monetary"/></h3>
</div>
<div class="col-sm-3 bg-gray-lighter pb-10">
<!-- FIXME: HARD CURRENCY -->
<h3><t t-esc="invoices_paid" t-widget="monetary"/> </h3>
<p>Total Paid</p>
<div class="col-sm-6 bg-gray-light pb-10 pr-0 diagonal">
<div class="on-top">
<div class="pull-left">
<p>Folio Pending</p>
<h3><t t-esc="pending_amount" t-widget="monetary"/></h3> <!-- FIXME: HARD CURRENCY -->
</div>
<div class="pull-right-custom">
<h3><t t-esc="invoices_paid" t-widget="monetary"/></h3> <!-- FIXME: HARD CURRENCY -->
<p>Total Paid</p>
</div>
</div>
</div>
<div class="col-sm-6 bg-gray-light">
<t t-if="channel_type == 'web'">
<t t-call="HotelCalendar.TooltipReservation.Channel.ota"/>