[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
This commit is contained in:
Robot Odoo
2019-02-11 08:35:21 +01:00
committed by GitHub
4 changed files with 29 additions and 26 deletions
@@ -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
}
}
}
@@ -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
}
}
}
+6 -4
View File
@@ -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">
+1
View File
@@ -174,6 +174,7 @@
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/kanban_view.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/kanban_view_mobile.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/web_calendar.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/web_calendar_mobile.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/search_view.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/search_view_mobile.scss"/>
<link rel="stylesheet" type="text/scss" href="/web/static/src/scss/dropdown_menu.scss"/>