[FIX] website_event, *: review some design

* base

With https://github.com/odoo/odoo/pull/30559, the event pages were
a bit redesigned (even though the original goal of the task was to
focus on the mobile registration). This commit reviews part of the
redesign (titles too big, misalignment, ...).

closes odoo/odoo#31914

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website_event/views/event_templates.xml

@@ -321,7 +321,7 @@
 
 <template id="event_description_full">
     <t t-call="website_event.event_details">
-        <div class="col-lg-9">
+        <div class="col">
             <div t-if="event.state == 'done' or not registrable" class="alert alert-info" role="status">Registration for this event is now closed</div>
             <t t-if="event.state != 'done' and registrable" t-call="website_event.registration_template"/>
             <div class="clearfix"/>
@@ -344,7 +344,7 @@
                 </li>
             </ul>
         </div>
-        <div class="col-lg-3 css_noprint">
+        <div class="col-lg-4 css_noprint">
             <div class="clearfix"/>
             <t t-if="not event.is_online">
                 <div class="card bg-secondary" t-if="event.address_id">
@@ -355,7 +355,7 @@
                                <img t-att-src="event.google_map_img()" width="100%%" alt="Google Maps"/>
                             </a>
                         </t>
-                        <h4 t-field="event.address_id" class="text-secondary font-weight-bold" t-options='{
+                        <div t-field="event.address_id" class="text-secondary font-weight-bold" t-options='{
                             "widget": "contact",
                             "fields": ["name"]
                         }'/>
@@ -373,17 +373,19 @@
             <div class="card bg-secondary my-3">
                 <h4 class="card-header">When</h4>
                 <div class="card-body">
-                    <span class="font-weight-bold small">From</span>
+                    <i class="fa fa-clock-o"/>
+                    <span>From</span>
                     <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options='{"hide_seconds":"True"}'/>
                     <hr/>
-                    <span class="font-weight-bold small">To</span>
+                    <i class="fa fa-clock-o"/>
+                    <span>To</span>
                     <span t-field="event.with_context(tz=event.date_tz).date_end" t-options='{"hide_seconds":"True"}'/>
                 </div>
             </div>
             <div class="card bg-secondary my-3" t-if="event.organizer_id">
                 <h4 class="card-header">Organizer</h4>
                 <div class="card-body">
-                    <h4 t-field="event.organizer_id" class="text-secondary font-weight-bold"/>
+                    <div t-field="event.organizer_id" class="text-secondary font-weight-bold"/>
                     <div itemprop="location" t-field="event.organizer_id" t-options='{
                         "widget": "contact",
                         "fields": ["phone", "mobile", "email"]

odoo/addons/base/views/ir_qweb_widget_templates.xml

@@ -21,14 +21,16 @@
             <t t-call="base.contact_name"/>
         </t>
         <div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
-            <div t-if="address and 'address' in fields">
+            <div t-if="address and 'address' in fields" class="d-flex align-items-baseline">
-                <i t-if="not options.get('no_marker')" class='fa fa-map-marker fa-fw text-primary' role="img" aria-label="Address" title="Address"/>
+                <i t-if="not options.get('no_marker')" class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
                 <span itemprop="streetAddress" t-raw="address.replace('\n', options.get('no_tag_br') and ', ' or ('&lt;br/&gt;%s' % ('' if options.get('no_marker') else '')))"/>
             </div>
-            <div t-if="city and 'city' in fields">
+            <div t-if="city and 'city' in fields" class="d-flex align-items-baseline">
-                <i t-if="not options.get('no_marker')" class='fa fa-map-marker fa-fw text-primary' role="img" aria-label="Address" title="Address"/>
+                <i t-if="not options.get('no_marker')" class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
-                <span itemprop="addressLocality" t-esc="city"/>,
+                <div>
-                <span itemprop="addressCountry" t-esc="country_id"/>
+                    <span itemprop="addressLocality" t-esc="city"/>,
+                    <span itemprop="addressCountry" t-esc="country_id"/>
+                </div>
             </div>
             <div t-if="phone and 'phone' in fields"><i t-if="not options.get('no_marker') or options.get('phone_icons')" class='fa fa-phone fa-fw' role="img" aria-label="Phone" title="Phone"/> <span itemprop="telephone" t-esc="phone"/></div>
             <div t-if="mobile and 'mobile' in fields"><i t-if="not options.get('no_marker') or options.get('phone_icons')" class='fa fa-mobile fa-fw' role="img" aria-label="Mobile" title="Mobile"/> <span itemprop="telephone" t-esc="mobile"/></div>