Fix UI - Small Screen #2

Author: peterjuma

public/javascript/script.js

@@ -114,7 +114,7 @@ const queryDB = () => {
                 date_diff.days > 0 ? ago[0] = (date_diff.days + "d ago") : date_diff.hours > 0 ? ago[1] = (date_diff.hours + "h ago") : date_diff.minutes > 0 ? ago[2] = (date_diff.minutes + "m ago") : ago[2] = "now"
                 html = `<div class="column note" id="${cursor.key}" onclick='showNote(this)'>
                             <h2>${marked(cursor.value.title)}</h2>
-                             <caption>Created ${ago[0]||""} ${ago[1]||""} ${ago[2]||""}</caption>
+                             <span><caption>Created ${ago[0]||""} ${ago[1]||""} ${ago[2]||""}</caption></span>
                         </div>`;
                 notesGrid.innerHTML += html;
                 noteSelect() 

public/styles/style.css

@@ -19,16 +19,23 @@ body {
 .column {
   float: left;
   width: 100%;
-  height: auto;
-  border: #eee;
+  height: 100px;
+  border: 2px solid #eee;
   border-radius: 5%;
 }
 
+
+.column  p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
 .note {
   background-color: #f1f1f1;
   border: solid 2px #bbb;
   font-size: 10px;
-  padding: 0%;
   padding-left: 5px;
   cursor: pointer;
   text-align: left;
@@ -198,21 +205,13 @@ textarea {
     font-size: 12px;
   }
 
-  .column{
-    word-wrap: break-word;
-    font-size: 10px;
-    height: auto;
-  }
-
-  p{
+  .column p{
     margin: 2px;
-    font-size: x-small;
+    font-size: xx-small;
   }
 
-  caption {
-    margin: 1px;
-    font-size: xx-small;
-    padding: 0px;
+  .column span {
+    display: none;
   }
 
   .right{
@@ -231,5 +230,21 @@ textarea {
     font-weight: 700;
   }
 
+  .column:nth-of-type(odd) {
+    float: left;
+    width: 100%;
+    height: 50px;
+    border: 2px solid #eee;
+    border-radius: 5%;
+  }
+  
+  .column:nth-of-type(even) {
+    float: right; 
+    width: 100%;
+    height: 50px;
+    border: 2px solid #eee;
+    border-radius: 5%;
+  }
+
 }