Make the app stretch less on mobile screens

tdemin · Oct 12, 2019 · 10ae389 · 10ae389
1 parent 18705ee
commit 10ae389
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 22 deletions.
diff --git a/src/views/editorView.tsx b/src/views/editorView.tsx
@@ -140,7 +140,7 @@ class EditorView extends React.Component<Props, State> {
     render = () => {
         const { task, title } = this.state;
         return (
-            <div className="root container">
+            <div className="container editor_view">
                 <div className="navbar level is-mobile">
                     <div className="headerLeft level-left level-item">
                         <input

diff --git a/src/views/loginForm.tsx b/src/views/loginForm.tsx
@@ -44,7 +44,7 @@ class LoginForm extends React.PureComponent<Props, State> {
         if (event.key === "Enter") this.login();
     };
     render = () => (
-        <div className="root container">
+        <div className="container login_view">
             <form className="loginForm" onKeyPress={this.onKeyPress}>
                 <div className="field">
                     <label className="label">{strings.login_userNameTp}</label>

diff --git a/src/views/mainView.tsx b/src/views/mainView.tsx
@@ -89,7 +89,7 @@ class MainView extends React.Component<Props, State> {
         const { username } = this.props;
         const { tasks, search } = this.state;
         return (
-            <div className="root container">
+            <div className="container list_view">
                 <div className="navbar level">
                     <div className="headerText level-left level-item">
                         {`${strings.main_loggedInMsg} ${username}`}

diff --git a/src/views/styles/common.scss b/src/views/styles/common.scss
@@ -2,10 +2,18 @@
 
 @import "bulma/bulma.sass";
 
-div.root {
+div#root {
     max-width: 720px;
-    margin-top: $spacing * 4;
-    margin-bottom: $spacing * 4;
+    margin: $spacing * 2 $spacing;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12pt;
 }
+
+@media (max-width: 600px) {
+    div.container {
+        margin: 0 $spacing;
+    }
+    div.navbar {
+        margin-bottom: $spacing * 2 !important;
+    }
+}
diff --git a/src/views/styles/const.scss b/src/views/styles/const.scss
@@ -1,3 +1,2 @@
-$spacing: 8px;
-$elementWidth: 120px;
+$spacing: 2px;
 $borderColor: #959595;
diff --git a/src/views/styles/editorView.scss b/src/views/styles/editorView.scss
@@ -1,18 +1,22 @@
 @import "./common.scss";
 
-.navbar {
-    .headerRight {
-        max-width: $spacing * 12;
-    }
+.navbar .headerRight {
+    // setting max-width here prevents the right side of the navbar
+    // from being stretched
+    max-width: $spacing * 12;
 }
 
 @media (max-width: 600px) {
-    .container {
-        margin: 0 $spacing;
+    .editor_view {
+        margin: 0 $spacing * 2 !important;
+    }
+    .navbar {
+        margin-top: $spacing * 8;
     }
 }
 
 div.main {
+    margin: $spacing;
     .subtitle {
         font-weight: bolder;
     }
@@ -21,7 +25,7 @@ div.main {
         margin-top: $spacing;
     }
     .editor {
-        margin-top: $spacing;
+        margin-top: $spacing * 2;
         max-width: 320px;
     }
 }
diff --git a/src/views/styles/mainView.scss b/src/views/styles/mainView.scss
@@ -1,18 +1,18 @@
 @import "./common.scss";
 
 div.searchBox {
-    margin: $spacing * 2;
+    margin: $spacing;
 }
 
 div.app_footer {
-    margin-top: $spacing * 2;
+    margin-top: $spacing * 4;
 }
 
 @media (max-width: 600px) {
     div.headerText {
         display: none;
     }
     div.headerButtons {
-        margin: 0 $spacing * 4;
+        margin: 0 $spacing;
     }
 }
diff --git a/src/views/styles/tasks.scss b/src/views/styles/tasks.scss
@@ -3,12 +3,12 @@
 div.taskList {
     margin: 0 $spacing;
     div.taskSubtree {
-        margin-left: $spacing * 4;
+        margin-left: $spacing * 8;
         div.taskLine {
             border: 1px solid $borderColor;
             border-radius: 3px;
-            margin: $spacing;
-            padding: $spacing;
+            margin: $spacing * 3 0;
+            padding: $spacing * 3;
             &.taskCompleted {
                 .taskText {
                     text-decoration: line-through;
@@ -40,7 +40,7 @@ div.taskList {
 @media (max-width: 600px) {
     div.taskList {
         div.taskSubtree {
-            margin-left: $spacing * 1.5 !important;
+            margin-left: $spacing * 8 !important;
         }
         /* do not indent top-level tasks */
         & > div.taskSubtree {