[FIX] web: adapt layout for appointment button

In order to move the "Share availabilities" button between the header
and the sidebar toggler on desktop - but also keeping the button on the
bottom of the screen on mobile - we've adapted the grid and extended its
use to mobile views.

By using the grid layout we have more control over scrolling issues and
different elements appearing or disappearing in each variant of the
calendar view without breaking the layout.

task-3617561
part of task-3575827

closes #144169

Related: odoo/enterprise#51755
Signed-off-by: Jérémy Hennecart (jeh) <jeh@odoo.com>

addons/web/static/src/views/calendar/calendar_controller.scss

@@ -13,27 +13,26 @@ $o-cw-filter-avatar-size: 20px;
 }
 
 .o_calendar_container {
-    grid-template-columns: auto minmax(auto, 210px);
+    grid-template-rows: auto auto 1fr auto;
+    grid-template-columns: 1fr auto auto;
 
-    @include media-breakpoint-up(md){
-        grid-template: auto 1fr / 1fr auto;
-        grid-template-areas:
-            "head head"
-            "cal side";
+    .o_calendar_header {
+        grid-area: 1 / 1 / 2 / 3;
     }
 
-    .o_calendar_header {
-        grid-area: head;
+    .o_sidebar_toggler {
+        grid-area: 1 / 3;
+    }
+
+    .o_calendar_wrapper {
+        grid-area: 3 / 1 / 3 / 4;
     }
 }
 
 .o_calendar_sidebar_container {
     --Avatar-size: #{$o-cw-filter-avatar-size};
 
     flex: 0 0 auto;
-    position: relative;
-    grid-area: side;
-    background-color: $o-view-background-color;
 
     .o_calendar_sidebar {
         @include o-webclient-padding($top: $o-horizontal-padding/2);

addons/web/static/src/views/calendar/calendar_controller.xml

@@ -16,8 +16,8 @@
                 <t t-set-slot="control-panel-navigation-additional">
                     <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                 </t>
-                <div class="o_calendar_container d-flex d-md-grid flex-column h-100 bg-view">
-                    <div class="o_calendar_header d-flex align-items-center gap-1 px-3 py-2 border-bottom">
+                <div class="o_calendar_container d-grid h-100 bg-view">
+                    <div class="o_calendar_header d-flex align-items-center gap-1 px-3 pe-md-1 py-2 border-bottom">
                         <div t-if="!env.isSmall" class="o_calendar_navigation_buttons btn-group">
                             <button
                                 class="o_calendar_button_prev btn btn-secondary d-none d-md-block"
@@ -54,14 +54,18 @@
                                 <t t-esc="dayHeader" />
                             </t>
                         </h5>
-                        <button class="btn btn-light d-none d-md-block order-4 oi oi-panel-right ms-lg-auto collapsed lh-base" t-on-click="toggleSideBar"/>
+                    </div>
+                    <div class="o_sidebar_toggler d-none d-md-flex align-items-center border-bottom pe-3">
+                        <button class="btn btn-light oi oi-panel-right collapsed ms-2 lh-base" t-on-click="toggleSideBar"/>
                     </div>
                     <MobileFilterPanel t-if="env.isSmall" t-props="mobileFilterPanelProps" />
-                    <t t-if="showCalendar" t-component="props.Renderer" t-props="rendererProps" />
-                    <div t-if="showSideBar" class="o_calendar_sidebar_container col-auto overflow-x-hidden overflow-y-auto">
-                        <div class="o_calendar_sidebar">
-                            <DatePicker t-if="!env.isSmall" t-props="datePickerProps" />
-                            <FilterPanel t-props="filterPanelProps" />
+                    <div class="o_calendar_wrapper d-flex overflow-hidden">
+                        <t t-if="showCalendar" t-component="props.Renderer" t-props="rendererProps"/>
+                        <div t-if="showSideBar" class="o_calendar_sidebar_container position-relative w-100 w-md-auto bg-view overflow-x-hidden overflow-y-auto">
+                            <div class="o_calendar_sidebar">
+                                <DatePicker t-if="!env.isSmall" t-props="datePickerProps" />
+                                <FilterPanel t-props="filterPanelProps" />
+                            </div>
                         </div>
                     </div>
                 </div>

addons/web/static/src/views/calendar/calendar_controller_mobile.scss

@@ -10,6 +10,7 @@
 
     .o_calendar_container {
         .o_other_calendar_panel {
+            grid-area: 2 / 1 / 2 / 4;
             padding: 0 map-get($spacers, 2);
             .fa-filter {
                 min-height: 1.59rem;

addons/web/static/src/views/calendar/calendar_renderer.scss

@@ -3,7 +3,6 @@
     --o-cw-border-color: #{$border-color};
 
     background-color: $o-view-background-color;
-    grid-area: cal;
 
     @include media-breakpoint-down(lg) {
         border-top: 1px solid var(--o-cw-border-color);

addons/web/static/src/views/calendar/calendar_renderer.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.CalendarRenderer">
-        <div class="o_calendar_renderer h-100">
+        <div class="o_calendar_renderer h-100 flex-grow-1">
             <ActionSwiper t-props="actionSwiperProps">
                 <t
                     t-component="calendarComponent"

addons/web/static/tests/legacy/views/calendar/calendar_view_tests.js

@@ -5115,7 +5115,7 @@ QUnit.module("Views", ({ beforeEach }) => {
             `,
         });
         assert.containsNone(target, ".o_calendar_sidebar");
-        await click(target, ".o_calendar_header .oi-panel-right");
+        await click(target, ".o_sidebar_toggler .oi-panel-right");
         assert.containsOnce(target, ".o_calendar_sidebar");
         assert.verifySteps(["calendar.showSideBar-read", "calendar.showSideBar-true"]);
     });