From bba75fd67f9ed8a06448f0e4092149f0329741fa Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sat, 3 Oct 2020 10:53:06 -0700
Subject: [PATCH] CSS fixes for mobile.

---
 components/common/Loading.module.css          |  2 ++
 components/common/Menu.module.css             |  2 +-
 components/common/MenuButton.js               |  2 +-
 components/common/MenuButton.module.css       |  4 ----
 components/layout/Footer.js                   |  9 +++++----
 components/layout/Footer.module.css           | 11 +++++++++++
 components/metrics/MetricsBar.module.css      |  1 +
 components/settings/LanguageButton.module.css | 15 ++++++++++++++-
 8 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/components/common/Loading.module.css b/components/common/Loading.module.css
index 2a210078..4e56dd8e 100644
--- a/components/common/Loading.module.css
+++ b/components/common/Loading.module.css
@@ -12,6 +12,8 @@
 
 .loading {
   display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
   top: 50%;
   left: 50%;
diff --git a/components/common/Menu.module.css b/components/common/Menu.module.css
index 7ebf8e9d..d2ad2cc4 100644
--- a/components/common/Menu.module.css
+++ b/components/common/Menu.module.css
@@ -3,7 +3,7 @@
   border: 1px solid var(--gray500);
   border-radius: 4px;
   overflow: hidden;
-  z-index: 2;
+  z-index: 100;
 }
 
 .option {
diff --git a/components/common/MenuButton.js b/components/common/MenuButton.js
index 7035b1ef..4f3f2584 100644
--- a/components/common/MenuButton.js
+++ b/components/common/MenuButton.js
@@ -46,7 +46,7 @@ export default function MenuButton({
       </Button>
       {showMenu && (
         <Menu
-          className={classNames(styles.menu, menuClassname)}
+          className={menuClassname}
           options={options}
           selectedOption={selectedOption}
           onSelect={handleSelect}
diff --git a/components/common/MenuButton.module.css b/components/common/MenuButton.module.css
index edf8dfc9..7e9dd7e1 100644
--- a/components/common/MenuButton.module.css
+++ b/components/common/MenuButton.module.css
@@ -9,10 +9,6 @@
   border-radius: 4px;
 }
 
-.menu {
-  z-index: 100;
-}
-
 .text {
   font-size: var(--font-size-small);
 }
diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index 30782de0..6fd0a46c 100644
--- a/components/layout/Footer.js
+++ b/components/layout/Footer.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
@@ -8,9 +9,9 @@ export default function Footer() {
   const { current } = useVersion();
   return (
     <footer className="container">
-      <div className={styles.footer}>
-        <div />
-        <div>
+      <div className={classNames(styles.footer, 'row')}>
+        <div className="col-12 col-md-4" />
+        <div className="col-12 col-md-4">
           <FormattedMessage
             id="message.powered-by"
             defaultMessage="Powered by {name}"
@@ -23,7 +24,7 @@ export default function Footer() {
             }}
           />
         </div>
-        <div>{`v${current}`}</div>
+        <div className={classNames(styles.version, 'col-12 col-md-4')}>{`v${current}`}</div>
       </div>
     </footer>
   );
diff --git a/components/layout/Footer.module.css b/components/layout/Footer.module.css
index 7c671d7e..a83c8c3c 100644
--- a/components/layout/Footer.module.css
+++ b/components/layout/Footer.module.css
@@ -4,4 +4,15 @@
   align-items: center;
   font-size: var(--font-size-small);
   min-height: 100px;
+  text-align: center;
+}
+
+.version {
+  text-align: right;
+}
+
+@media only screen and (max-width: 768px) {
+  .version {
+    text-align: center;
+  }
 }
diff --git a/components/metrics/MetricsBar.module.css b/components/metrics/MetricsBar.module.css
index 4546f893..b13e974f 100644
--- a/components/metrics/MetricsBar.module.css
+++ b/components/metrics/MetricsBar.module.css
@@ -1,6 +1,7 @@
 .bar {
   display: flex;
   cursor: pointer;
+  min-height: 80px;
 }
 
 .bar > div + div {
diff --git a/components/settings/LanguageButton.module.css b/components/settings/LanguageButton.module.css
index da909df5..e1f840d5 100644
--- a/components/settings/LanguageButton.module.css
+++ b/components/settings/LanguageButton.module.css
@@ -8,5 +8,18 @@
 
 .menu div {
   border-radius: 5px;
-  min-width: 33%;
+  min-width: calc(100% / 3);
+}
+
+@media only screen and (max-width: 992px) {
+  .menu {
+    min-width: 90vw;
+    transform: translateX(calc(40vw));
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .menu div {
+    min-width: 50%;
+  }
 }