[IMP] web: mobile calendar today button alignment

Improve the User Interface of the Calendar mobile view.

- The "today" button should be aligned (both size and position) with the
view switcher icon.
- Extract mobile calendar styling into dedicated SCSS file.

Task ID: 1891955

closes odoo/odoo#30592

3 files changed, 28 insertions, 26 deletions

diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index ae22efb2675..540b8710df3 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -197,25 +197,3 @@
         display: none;
     }
 }
-
-// Mobile rules
-@include media-breakpoint-down(sm) {
-    .o_calendar_container {
-        padding: 0;
-    }
-}
-@include media-breakpoint-down(sm) {
-    .o_control_panel {
-        .o_calendar_button_today {
-            float: right;
-            > .o_calendar_text {
-                margin-top: 3px;
-            }
-        }
-    }
-    .o_calendar_view {
-        .fc-day-header {
-            word-spacing: 1000px; // force line break in week mode
-        }
-    }
-}
diff --git a/addons/web/static/src/scss/web_calendar_mobile.scss b/addons/web/static/src/scss/web_calendar_mobile.scss
new file mode 100644
index 00000000000..af1aa3d7145
--- /dev/null
+++ b/addons/web/static/src/scss/web_calendar_mobile.scss
@@ -0,0 +1,22 @@
+@include media-breakpoint-down(sm) {
+    .o_calendar_container {
+        padding: 0;
+    }
+
+    .o_control_panel {
+        .o_calendar_button_today {
+            font-size: 0.7em;
+            line-height: 1.9em;
+            > .o_calendar_text {
+                margin-top: 3px;
+            }
+        }
+    }
+
+    .o_calendar_view {
+        .fc-day-header {
+            word-spacing: 1000px; // force line break in week mode
+        }
+    }
+
+}
diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index dad48fd15ff..e0cb81c6e9b 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -85,10 +85,12 @@
     </t>
 
     <t t-name="CalendarView.TodayButtonMobile">
-        <span class="fa-stack o_calendar_button_today">
-            <i class="fa fa-calendar-o fa-stack-2x" role="img" aria-label="Today" title="Today"></i>
-            <strong class="o_calendar_text fa-stack-1x"><t t-esc="moment().date()"/></strong>
-        </span>
+        <button class="btn btn-sm btn-link">
+            <span class="fa-stack o_calendar_button_today">
+                <i class="fa fa-calendar-o fa-stack-2x" role="img" aria-label="Today" title="Today"/>
+                <strong class="o_calendar_text fa-stack-1x"><t t-esc="moment().date()"/></strong>
+            </span>
+        </button>
     </t>
 
     <main t-name="CalendarView.quick_create" class="o_calendar_quick_create">