[FIX] website_event, *: review some design

* base

With #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, ...).

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">
-                <i t-if="not options.get('no_marker')" class='fa fa-map-marker fa-fw text-primary' role="img" aria-label="Address" title="Address"/>
+            <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" 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">
-                <i t-if="not options.get('no_marker')" class='fa fa-map-marker fa-fw text-primary' role="img" aria-label="Address" title="Address"/>
-                <span itemprop="addressLocality" t-esc="city"/>,
-                <span itemprop="addressCountry" t-esc="country_id"/>
+            <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" role="img" aria-label="Address" title="Address"/>
+                <div>
+                    <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>