From 171bba517d2847a4ac18dde2699bb04a5a848bf7 Mon Sep 17 00:00:00 2001
From: Peter Cai <peter@typeblog.net>
Date: Wed, 19 Feb 2020 15:37:45 +0800
Subject: [PATCH] styles: add mobile support

---
 src/web/styles/buttons.scss |  3 +++
 src/web/styles/dialog.scss  | 12 ++++++++++++
 src/web/styles/home.scss    | 23 ++++++++++++++++++++++-
 src/web/styles/vars.scss    |  1 +
 webpack.config.web.js       |  5 ++++-
 5 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/web/styles/buttons.scss b/src/web/styles/buttons.scss
index 1afac50..0dc56f1 100644
--- a/src/web/styles/buttons.scss
+++ b/src/web/styles/buttons.scss
@@ -5,6 +5,9 @@
     padding: 10px 24px;
     margin-left: $button-margin-left;
     margin-right: $button-margin-right;
+    // Needed because on mobile buttons can get vertical
+    margin-top: $button-margin-vertical;
+    margin-bottom: $button-margin-vertical;
     text-align: center;
     text-decoration: none;
     display: inline-block;
diff --git a/src/web/styles/dialog.scss b/src/web/styles/dialog.scss
index d7c1b45..d17cf47 100644
--- a/src/web/styles/dialog.scss
+++ b/src/web/styles/dialog.scss
@@ -12,6 +12,7 @@
     border-radius: $dialog-radius;
     box-shadow: $shadow-large;
     padding: $dialog-inset;
+    box-sizing: border-box;
 
     p {
         display: inline-block;
@@ -51,4 +52,15 @@
     .ReactModal__Content_My {
         transform: translateY(-#{$dialog-height});
     }
+}
+
+/*
+ * When the screen cannot accomodate the full dialog (e.g. mobile)
+ */
+@media screen and ( max-width: $dialog-width ) {
+    .ReactModal__Content_My {
+        width: 100vw;
+        left: 0;
+        top: $dialog-margin / 2;
+    }
 }
\ No newline at end of file
diff --git a/src/web/styles/home.scss b/src/web/styles/home.scss
index 208d8b0..5406463 100644
--- a/src/web/styles/home.scss
+++ b/src/web/styles/home.scss
@@ -15,6 +15,7 @@
     box-shadow: $shadow-medium;
     border-radius: $content-radius;
     padding: $content-inset;
+    box-sizing: border-box;
 
     .switch-wrapper, .switch-wrapper > div {
         width: 100%;
@@ -31,7 +32,10 @@
 }
 
 .content-buttons {
-    margin-top: $content-inset;
+    // Cancel the vertical margin of the first and last button row
+    // (but not all the other rows, when they are arranged in multiple rows)
+    margin-top: $content-inset - $button-margin-vertical;
+    margin-bottom: -$button-margin-vertical;
     text-align: right;
 }
 
@@ -44,4 +48,21 @@
         padding-top: calc((100vh - #{$content-height}) / 2);
         padding-bottom: calc((100vh - #{$content-height}) / 2);
     }
+}
+
+/*
+ * when screen is smaller than the normal content area, e,g, mobile
+ */
+@media screen and ( max-width: $content-width ) {
+    .content {
+        width: 100vw;
+        max-width: 100%;
+    }
+
+    @media screen and ( max-height: $content-height + $content-padding ) {
+        .content-wrapper {
+            padding-top: $content-padding / 2;
+            padding-bottom: $content-padding / 2;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/web/styles/vars.scss b/src/web/styles/vars.scss
index a6a77e2..0071d9d 100644
--- a/src/web/styles/vars.scss
+++ b/src/web/styles/vars.scss
@@ -12,6 +12,7 @@ $editable-radius: 2px;
 $button-radius: 3px;
 $button-margin-right: 0px;
 $button-margin-left: 5px;
+$button-margin-vertical: 5px;
 // Dialogs
 $dialog-width: 500px;
 $dialog-height: 200px;
diff --git a/webpack.config.web.js b/webpack.config.web.js
index 950c01a..336711b 100644
--- a/webpack.config.web.js
+++ b/webpack.config.web.js
@@ -21,7 +21,10 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       inlineSource: '.(js|css)$', // embed all javascript and css inline
-      title: 'Angry.Im Pastebin'
+      title: 'Angry.Im Pastebin',
+      meta: {
+        viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
+      }
     }),
     new HtmlWebpackInlineSourcePlugin()
   ],