[FIX] web: fix time range menu button style in mobile mode

The search view in mobile mode has been redesigned and looks a bit different
from the search view in desktop mode. This commit adapts the time range menu
appearance in mobile mode.

addons/web/static/src/js/views/search/time_range_menu.js

@@ -1,6 +1,7 @@
 odoo.define('web.TimeRangeMenu', function (require) {
 "use strict";
 
+var config = require('web.config');
 var core = require('web.core');
 var Domain = require('web.Domain');
 var TimeRangeMenuOptions = require('web.TimeRangeMenuOptions');
@@ -26,6 +27,8 @@ var TimeRangeMenu = Widget.extend({
      */
     init: function(parent, fields, configuration) {
         var self = this;
+        this.isMobile = config.device.isMobile;
+        this.symbol = this.isMobile ? 'fa fa-chevron-right float-right mt4' : 'caret';
         this._super(parent);
         this.dateFields = [];
         _.each(fields, function (field, name) {

addons/web/static/src/xml/base.xml

@@ -1130,9 +1130,9 @@
 </t>
 
 <div t-name="web.TimeRangeMenu" class="btn-group o_dropdown">
-    <button class="o_dropdown_toggler_btn btn btn-secondary dropdown-toggle o_time_range_menu_button" data-toggle="dropdown"
+    <button t-att-class="'o_dropdown_toggler_btn btn btn-secondary dropdown-toggle o_time_range_menu_button' + (widget.isMobile ? ' o-no-caret' : '')" data-toggle="dropdown"
         aria-expanded="false" tabindex="-1">
-        <span class="fa fa-calendar"/> Time Ranges <span class="caret"/>
+        <span class="fa fa-calendar"/> Time Ranges <span t-att-class="widget.symbol"/>
     </button>
     <div class="dropdown-menu o_dropdown_menu o_time_range_menu" role="menu">
         <div class="dropdown-item-text">