From da974af02b21c63a9568693bc354339036339c03 Mon Sep 17 00:00:00 2001
From: Pablo <pabloqb@gmail.com>
Date: Fri, 21 Dec 2018 10:16:45 +0100
Subject: [PATCH] [WIP] Adjust styles for Tooltip

---
 hotel_calendar/static/src/css/view.css        |  49 ++++++-
 .../src/xml/hotel_calendar_templates.xml      | 128 ++++++++++--------
 2 files changed, 118 insertions(+), 59 deletions(-)

diff --git a/hotel_calendar/static/src/css/view.css b/hotel_calendar/static/src/css/view.css
index 5b2e026c7..00b3dfdbc 100644
--- a/hotel_calendar/static/src/css/view.css
+++ b/hotel_calendar/static/src/css/view.css
@@ -160,19 +160,58 @@ input#bookings_search {
 }
 
 /** TOOLTIPS **/
-.tooltip {
-
-}
 .tooltip .tooltip-inner {
+    font-family: Garuda, sans-serif;
     border: 1px solid #5C5C5C;
 	background-color: white;
 	color: #5C5C5C;
 }
-
 .tooltip .container {
 	max-width: 500px;
 }
 
+.tooltip .list-group {
+    margin-bottom: 0px;
+}
 .tooltip .list-group-item {
     border: none;
-}
\ No newline at end of file
+    padding: 2px 5px;
+    margin-bottom: 0px;
+    background-color: unset;
+    word-break: break-word;
+}
+
+header {
+    font-size: 1.2em;
+}
+
+.tooltip .container h3 {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.tooltip .container p {
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+.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 {
+    margin-top: 3px;
+}
+
+
+/* WARNING: The .row-eq-height class uses CSS3's flexbox layout mode,
+            which is not supported in Internet Explorer 9 and below. */
+.row-eq-height {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+/* TODO: Use Odoo Colours based on http://www.odoo.com/openerp_website/static/src/less/variables.less */
\ No newline at end of file
diff --git a/hotel_calendar/static/src/xml/hotel_calendar_templates.xml b/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
index 8f103cce4..50895a396 100644
--- a/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
+++ b/hotel_calendar/static/src/xml/hotel_calendar_templates.xml
@@ -70,81 +70,101 @@
 
 <t t-name="HotelCalendar.TooltipReservation">
 	<div class="container">
-		<div class="row">
-			<div class="col-sm-6">
-				<ul class="list-group">
-				<li class="list-group-item fa fa-user-circle-o fa-2x">
-					<t t-esc="name"/>
-				</li>
-				<li class="list-group-item"><t t-esc="phone"/></li>
-				<li class="list-group-item"><t t-esc="email"/></li>
-				</ul>
+		<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>
 			</div>
-			<div class="col-sm-6">
-				<ul class="list-group">
-				<li class="list-group-item fa fa-hotel fa-2x">
-					<t t-esc="room_type"/>
-				</li>
-				<span class="fa fa-1x">Board Service Undefined</span>
-					<span>Adults: <t t-esc="adults"/></span>
-					<span>Children: <t t-esc="children"/></span>
-				<li class="list-group-item fa-stack fa-2x">
-					<span class="fa fa-circle fa-stack-2x"></span>
-					<span class="fa fa-stack-1x fa-inverse">
-						<t t-esc="amount_total" t-widget="monetary"/>€
-					</span>
-				</li>
-				</ul>
+			<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>
 			</div>
 		</div>
-		<div class="row">
-			<div class="col-sm-6">
+		<div class="row row-eq-height tt-margin">
+			<div class="col-sm-6 bg-gray-light">
 				<!-- FIXME: HARD CURRENCY -->
-				Por Pagar <t t-esc="amount_total" t-widget="monetary"/>€ <br/>
-				Pagado <t t-esc="amount_paid" t-widget="monetary"/>€
+				<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>
 			</div>
-			<div class="col-sm-6">
-				WuBook: 1544109684
-				Booking: 4253096846
+			<div class="col-sm-6 bg-gray-dark">
+				<p>WuBook: 1544109684</p>
+				<p>Booking: 4253096846</p>
 			</div>
 		</div>
-		<div class="row">
-			<div class="col-sm-6">
-				<ul class="list-group">
-				<li class="list-group-item fa fa-arrow-circle-o-right fa-2x"><t t-esc="checkin"/></li>
-				<li class="list-group-item">
-					<t t-esc="checkin_day_of_week"/> <t t-esc="arrival_hour"/>
-				</li>
-				</ul>
+		<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>
-			<div class="col-sm-6">
-				<ul class="list-group">
-				<li class="list-group-item fa-2x"><t t-esc="checkout"/><span class="fa fa-arrow-circle-o-right"/></li>
-				<li class="list-group-item">
-					<t t-esc="checkout_day_of_week"/> <t t-esc="departure_hour"/></li>
-				</ul>
+			<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>
 		</div>
-	</div>
-	<div class="container">
-		<div class="row">
+		<div class="row row-eq-height tt-margin">
 			<div class="col-sm-2">
-				<span class="fa fa-file-text-o fa-2x"><t t-esc="folio_name"/></span>
+				<span class="fa fa-file-text-o fa-2x" role="button"/><t t-esc="folio_name"/>
 			</div>
 			<div class="col-sm-2">
-				<span class="fa fa-external-link fa-2x"/>
+				<span class="fa fa-external-link fa-2x" role="button"/>
 			</div>
 			<div class="col-sm-2">
-				<span class="fa fa-user-plus fa-2x"/>
+				<span class="fa fa-user-plus fa-2x" role="button"/>
 			</div>
 			<div class="col-sm-2">
-				<span class="fa fa-envelope fa-2x"/>
+				<span class="fa fa-envelope fa-2x" role="button"/>
 			</div>
 			<div class="col-sm-2">
-				<span class="fa fa-money fa-2x"/>
+				<span class="fa fa-money fa-2x" role="button"/>
 			</div>
 			<div class="col-sm-2">
-				<span class="fa fa-window-close fa-2x"/>
+				<span class="fa fa-window-close fa-2x" role="button"/>
 			</div>
 		</div>
 	</div>