Improve styles

tdemin · Sep 9, 2019 · 8ead15a · 8ead15a
1 parent a9e5501
commit 8ead15a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 10 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,7 @@
       content="Amber Web, a task list app."
     />
     <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Amber Web</title>
   </head>

diff --git a/src/views/editorView.tsx b/src/views/editorView.tsx
@@ -135,29 +135,29 @@ class EditorView extends React.Component<Props, State> {
                     </span>
                     <div className="editor">
                         <div className="row">
-                            <span className="label">
+                            <label className="label">
                                 {strings.editor_statusTp}
-                            </span>
+                            </label>
                             <input
                                 type="checkbox"
                                 checked={task.Completed}
                                 onChange={this.updateStatus}
                             />
                         </div>
                         <div className="row">
-                            <span className="label">
+                            <label className="label">
                                 {strings.editor_textTp}
-                            </span>
+                            </label>
                             <input
                                 type="text"
                                 onChange={this.updateText}
                                 value={task.Text}
                             />
                         </div>
                         <div className="row">
-                            <span className="label">
+                            <label className="label">
                                 {strings.editor_parentTp}
-                            </span>
+                            </label>
                             <TaskSelect
                                 current={task}
                                 initialValue={task.PID}

diff --git a/src/views/styles/editorView.scss b/src/views/styles/editorView.scss
@@ -8,18 +8,20 @@ div.header {
 
 div.main {
     margin: $spacing;
+    margin-left: $spacing * 2;
     margin-top: $spacing * 4;
     .mainSubheading {
         font-weight: bolder;
     }
     div.editor {
-        margin: $spacing;
+        margin-top: $spacing * 2;
         display: flex;
         flex-direction: column;
         .row {
             display: flex;
             flex-direction: row;
-            margin: $spacing/2 0;
+            align-content: center;
+            margin: $spacing 0;
             .label {
                 display: block;
                 min-width: $spacing * 8;

diff --git a/src/views/styles/mainView.scss b/src/views/styles/mainView.scss
@@ -4,8 +4,8 @@ div.header {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    * {
-        margin-left: $spacing;
+    input[type="button"] {
+        margin: 0 $spacing;
     }
     span.userName {
         font-weight: bold;
@@ -14,3 +14,19 @@ div.header {
         align-self: flex-end;
     }
 }
+
+@media (max-width: 600px) {
+    span.loggedInMsg {
+        display: none;
+    }
+    div.header {
+        justify-content: center !important;
+        div.headerText {
+            display: none;
+        }
+        div.headerButtons {
+            display: flex;
+            justify-content: space-evenly;
+        }
+    }
+}
diff --git a/src/views/styles/tasks.scss b/src/views/styles/tasks.scss
@@ -26,3 +26,11 @@ div.taskList {
         }
     }
 }
+
+@media (max-width: 600px) {
+    div.taskList {
+        div.taskSubtree {
+            margin-left: $spacing * 1.5 !important;
+        }
+    }
+}