From 6e997e7e5d35647a750ed27290edd4dd800d6255 Mon Sep 17 00:00:00 2001
From: Ru Singh <hello@rusingh.com>
Date: Mon, 23 Aug 2021 15:09:43 +0530
Subject: [PATCH] Condense and show all site nav/options on mobile (#1256)

* chore(docker): improve repeat contributions workflow

* This change adds two new commands to gracefully stop and remove the Postgres and Clickhouse docker containers. To do so, it also gives them a recognizable name.

* Additionally, the Postgres container is updated to use a named volume for its data. This lower friction for repeat contributions where one would otherwise sign up and activate their accounts again and again each time.

* Format countries modal

* Remove unused imports
* Run ESLint and make related fixes

* ESlint formatting for entry pages modal

* WIP: proof of concept for scrollable modals on mobile

* Revert "Merge branch 'feature/details-modal-mobile' of github.com:hirusi/analytics"

This reverts commit 87e9fb92d079944a2439daae09518c7de847ba1e, reversing
changes made to beea6a07c7473322931ebc8d7289a9edef34a783.

* Condense and show all site nav/options on mobile
---
 assets/js/dashboard/datepicker.js    | 10 +++++-----
 assets/js/dashboard/filters.js       |  3 ++-
 assets/js/dashboard/site-switcher.js |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js
index 51042f2945f2..490000d6a301 100644
--- a/assets/js/dashboard/datepicker.js
+++ b/assets/js/dashboard/datepicker.js
@@ -34,15 +34,15 @@ function renderArrow(query, site, period, prevDate, nextDate) {
     period
   );
 
-  const leftClasses = `flex items-center px-2 border-r border-gray-300 rounded-l
+  const leftClasses = `flex items-center px-1 sm:px-2 border-r border-gray-300 rounded-l
       dark:border-gray-500 dark:text-gray-100 ${
       disabledLeft ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-100 dark:hover:bg-gray-900"
     }`;
-  const rightClasses = `flex items-center px-2 rounded-r dark:text-gray-100 ${
+  const rightClasses = `flex items-center px-1 sm:px-2 rounded-r dark:text-gray-100 ${
       disabledRight ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-100 dark:hover:bg-gray-900"
     }`;
   return (
-    <div className="hidden md:flex rounded shadow bg-white mr-4 cursor-pointer dark:bg-gray-800">
+    <div className="flex rounded shadow bg-white mr-2 sm:mr-4 cursor-pointer dark:bg-gray-800">
       <QueryButton
         to={{ date: prevDate }}
         query={query}
@@ -387,7 +387,7 @@ class DatePicker extends React.Component {
   renderPicker() {
     return (
       <div
-        className="w-28 sm:w-36 md:w-44 md:relative"
+        className="w-20 sm:w-36 md:w-44 md:relative"
         ref={(node) => (this.dropDownNode = node)}
       >
         <div
@@ -402,7 +402,7 @@ class DatePicker extends React.Component {
           aria-expanded="false"
           aria-controls="datemenu"
         >
-          <span className="mr-1 md:mr-2">
+          <span className="truncate mr-1 md:mr-2">
             {this.props.leadingText}
             <span className="font-medium">{this.timeFrameText()}</span>
           </span>
diff --git a/assets/js/dashboard/filters.js b/assets/js/dashboard/filters.js
index 02242e3ce0f1..64c13da29d7e 100644
--- a/assets/js/dashboard/filters.js
+++ b/assets/js/dashboard/filters.js
@@ -267,7 +267,8 @@ class Filters extends React.Component {
     return (
       <>
         <PlusIcon className="-ml-1 mr-1 h-4 w-4 md:h-5 md:w-5" aria-hidden="true" />
-        Add filter
+        {/* This would have been a good use-case for JSX! But in the interest of keeping the breakpoint width logic with TailwindCSS, this is a better long-term way to deal with it. */}
+        <span className="sm:hidden">Filter</span><span className="hidden sm:inline-block">Add filter</span>
       </>
     )
   }
diff --git a/assets/js/dashboard/site-switcher.js b/assets/js/dashboard/site-switcher.js
index 130d8da5b2a9..1f1cb5501a4e 100644
--- a/assets/js/dashboard/site-switcher.js
+++ b/assets/js/dashboard/site-switcher.js
@@ -141,7 +141,7 @@ export default class SiteSwitcher extends React.Component {
         <button onClick={this.toggle.bind(this)} className={`inline-flex items-center md:text-lg w-full rounded-md py-2 leading-5 font-bold text-gray-700 dark:text-gray-300 focus:outline-none transition ease-in-out duration-150 ${hoverClass}`}>
 
           <img src={`https://icons.duckduckgo.com/ip3/${this.props.site.domain}.ico`} onError={(e)=>{e.target.onerror = null; e.target.src="https://icons.duckduckgo.com/ip3/placeholder.ico"}} referrerPolicy="no-referrer" className="inline w-4 mr-1 md:mr-2 align-middle" />
-          {this.props.site.domain}
+          <span className="hidden sm:inline-block">{this.props.site.domain}</span>
           {this.renderArrow()}
         </button>