Merge pull request #11 from peterjuma/master

Resize

Author: peterjuma

public/javascript/script.js

@@ -348,7 +348,9 @@ function editNote(notediv) {
             if (matching) {
                 html = `<div name=${matching.noteid} class="editor" id="editpad">
                             <input name="title" type="text" id="title">
-                            <textarea style="margin-top: 20px;" name="notebody" id="notebody"></textarea>
+                            <textarea name="notebody" id="notebody"></textarea>
+                        </div>
+                        <div class="editBtns">
                             <button onclick='update(this)' name="${matching.noteid}" class="btn btnnote" style="float: left; background-color: #ddd; margin-top: 17px;" onMouseOut="this.style.color='crimson'" onMouseOver="this.style.color='green'"><i class="fa fa-check fa-lg" aria-hidden="true"></i> OK</button>
                             <button onclick='cancelEdit(this)' name="${matching.noteid}" class="btn btnnote" style="float: right; background-color: #ddd;margin-top: 17px;" onMouseOut="this.style.color='crimson'" onMouseOver="this.style.color='green'"><i class="fas fa-window-close fa-lg"></i> Cancel</button>
                         </div>`

public/styles/style.css

@@ -65,7 +65,7 @@ body {
   }
 }
 
-.notebody {
+/* .notebody {
   height: 18px;
   width: 150px;
   padding: 0;
@@ -74,7 +74,7 @@ body {
   margin: 0 5px 0 5px;
   text-decoration: none;
   white-space: nowrap;
-}
+} */
 
 
 .column:hover {
@@ -134,23 +134,29 @@ body {
   }
 
 .editor {
-    padding: 10px;
-    resize: none;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    /* resize: none; */
+    resize: vertical;
+    overflow: auto;
 		background: #F5F5F5;
 		border-color:  #D8D8D8;
 		border-style: solid;
 		border-radius: 5px;
 		border-width: 1px;
 		box-shadow: none;
 		display: block;
-    width: 99%;
-    height: 90%;
+    width: 100%;
+    max-height: 85%;
+    min-height: 30%;
+    height: 80%;
 }
 
 input[type="text"] {
   width: 100%;
   padding: 10px;
-  margin-top: 20px;
+  margin-top: 10px;
   outline: none;
   border-radius: 5px;
   box-shadow: none;
@@ -161,8 +167,8 @@ textarea {
   width: 100%;
   height: 90%;
   display: block;
-  margin-top: 20px;
-  padding: 20px;
+  margin-top: 10px;
+  padding: 20px; 
   resize: none;
   border-radius: 5px;
   box-shadow: none;