Mobile/Filter Overflow UX Improvements (#503)

* Initial Implementation

Still needs clear all functionality, various styles and spacing, and overall cleanup

* Second pass

Most of the styling issues are still present, but collapsing/expanding logic should be complete

* Third pass

* Refactors, comments, cleans up filters code

* Flatpickr color+placement changes

* Last(?) pass on UI

* Actually fixes sticky dates without breaking navigation

* Changelog

* Puts this back where it goes

* Updates based on @ukutaht's comments

- Removes Screenclass hook in favor of simple viewport size storage
- Uses class-based component
- Removes recheck variable in favor of tri-state wrapped
- General formatting & code cleanup

CHANGELOG.md

@@ -37,6 +37,7 @@ All notable changes to this project will be documented in this file.
 - Fix overly-sticky from and to in query parameters plausible/analytics#495
 - Adds support for single-day date selection plausible/analytics#495
 - Goal conversion rate in realtime view is now accurate plausible/analytics#500
+- Various UI/UX issues plausible/analytics#503
 
 ### Security
 - Do not run the plausible Docker container as root plausible/analytics#362

assets/css/app.css

@@ -5,7 +5,7 @@
 @import "modal.css";
 @import "loader.css";
 @import "tooltip.css";
-@import "flatpickr.dark.css";
+@import "flatpickr.css";
 
 .button {
   @apply bg-indigo-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;

assets/css/flatpickr.dark.css → assets/css/flatpickr.css

@@ -1,3 +1,17 @@
+.flatpickr-calendar:before,.flatpickr-calendar:after {
+  right: 22px !important;
+}
+
+.flatpickr-wrapper {
+  right: 35% !important;
+}
+
+@media (max-width: 768px) {
+  .flatpickr-wrapper {
+    right: 50% !important;
+  }
+}
+
 /* Because Flatpickr offers zero support for dynamic theming on its own (outside of third-party plugins) */
 .dark .flatpickr-calendar {
   background-color: #1f2937;
@@ -23,6 +37,18 @@
   color: #f3f4f6;
 }
 
+.dark .numInput[disabled] {
+  color: #9ca3af !important;
+}
+
+.dark .flatpickr-current-month .numInputWrapper span.arrowUp::after {
+  border-bottom-color: #f3f4f6 !important;
+}
+
+.dark .flatpickr-current-month .numInputWrapper span.arrowDown::after {
+  border-top-color: #f3f4f6 !important;
+}
+
 .dark .flatpickr-day.prevMonthDay {
   color: #94a3af;
 }

assets/js/dashboard/datepicker.js

@@ -105,7 +105,7 @@ class DatePicker extends React.Component {
 
   renderArrow(period, prevDate, nextDate) {
     return (
-      <div className="flex rounded shadow bg-white dark:bg-gray-800 mr-4 cursor-pointer">
+      <div className="flex rounded shadow bg-white dark:bg-gray-800 mr-2 cursor-pointer">
         <QueryLink to={{date: prevDate}} query={this.props.query} className="flex items-center px-2 border-r border-gray-300 dark:border-gray-500 dark:text-gray-100">
           <svg className="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
         </QueryLink>
@@ -138,7 +138,7 @@ class DatePicker extends React.Component {
 
   renderDropDown() {
     return (
-      <div className="relative" style={{height: '35.5px', width: '190px'}}  ref={node => this.dropDownNode = node}>
+      <div className="relative" style={{height: '35.5px', width: '170px'}}  ref={node => this.dropDownNode = node}>
         <div onClick={this.open.bind(this)} className="flex items-center justify-between rounded bg-white dark:bg-gray-800 shadow px-4 pr-3 py-2 leading-tight cursor-pointer text-sm font-medium text-gray-800 dark:text-gray-200 h-full">
           <span className="mr-2">{this.timeFrameText()}</span>
           <svg className="text-pink-500 h-4 w-4" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -180,7 +180,7 @@ class DatePicker extends React.Component {
     if (opts.date) { opts.date = formatISO(opts.date) }
 
     return (
-      <QueryLink to={{period, ...opts}} onClick={this.close.bind(this)} query={this.props.query} className={boldClass + ' block px-4 py-2 text-sm leading-tight hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100'}>
+      <QueryLink to={{from: false, to: false, date: false, period, ...opts}} onClick={this.close.bind(this)} query={this.props.query} className={boldClass + ' block px-4 py-2 md:text-sm leading-tight hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100'}>
         {text}
       </QueryLink>
     )
@@ -189,7 +189,7 @@ class DatePicker extends React.Component {
   renderDropDownContent() {
     if (this.state.mode === 'menu') {
       return (
-        <div className="absolute mt-2 rounded shadow-md z-10" style={{width: '235px', right: '-14px'}}>
+        <div className="absolute mt-2 rounded shadow-md z-10" style={{width: '235px', right: '-5px'}}>
           <div className="rounded bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 font-medium text-gray-800 dark:text-gray-200">
             <div className="py-1">
               { this.renderLink('day', 'Today') }
@@ -212,15 +212,15 @@ class DatePicker extends React.Component {
             </div>
             <div className="border-t border-gray-200 dark:border-gray-500"></div>
             <div className="py-1">
-              <span onClick={e => this.setState({mode: 'calendar'}, this.openCalendar.bind(this))} className="block px-4 py-2 text-sm leading-tight hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 cursor-pointer">Custom range</span>
+              <span onClick={e => this.setState({mode: 'calendar'}, this.openCalendar.bind(this))} className="block px-4 py-2 md:text-sm leading-tight hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 cursor-pointer">Custom range</span>
             </div>
           </div>
         </div>
       )
     } else if (this.state.mode === 'calendar') {
       const insertionDate = new Date(this.props.site.insertedAt);
       const dayBeforeCreation = insertionDate - 86400000;
-      return <Flatpickr options={{mode: 'range', maxDate: 'today', minDate: dayBeforeCreation, showMonths: 1, static: true, animate: false}} ref={calendar => this.calendar = calendar} className="invisible" onChange={this.setCustomDate.bind(this)} />
+      return <Flatpickr options={{mode: 'range', maxDate: 'today', minDate: dayBeforeCreation, showMonths: 1, static: true, animate: true}} ref={calendar => this.calendar = calendar} className="invisible" onChange={this.setCustomDate.bind(this)} />
     }
   }
 
@@ -260,7 +260,7 @@ class DatePicker extends React.Component {
 
   render() {
     return (
-      <div className="flex justify-between sm:justify-between">
+      <div className="flex justify-end ml-auto pl-2">
         { this.renderArrows() }
         { this.renderDropDown() }
       </div>