Fix UI - Small Screen #11

Author: peterjuma

index.html

@@ -18,8 +18,8 @@
 <div class="container">
     <div class="left">
         <div id="btnContainer">
-            <button class="btn active" onclick="listView()"><i class="fa fa-bars"></i></button>
-            <button class="btn" onclick="gridView()"><i class="fa fa-th-large"></i></button>  
+            <button class="btn" onclick="listView()"><i class="fa fa-bars"></i></button>
+            <button class="btn active" onclick="gridView()"><i class="fa fa-th-large"></i></button>  
             <button class="btn" id="addBtn"><i class="fas fa-plus"></i></button>
         </div>
         <div class="row" id="notes">

public/javascript/script.js

@@ -7,6 +7,7 @@ var i;
 
 // List View
 function listView() {
+
     for (i = 0; i < elements.length; i++) {
         elements[i].style.width = "100%";
     }
@@ -27,15 +28,6 @@ for (var i = 0; i < btns.length; i++) {
         this.className += " active";
     });
 }
-var editContainer = document.getElementById("editContainer");
-var editbtns = editContainer.getElementsByClassName("btn");
-for (var i = 0; i < editbtns.length; i++) {
-    editbtns[i].addEventListener("click", function () {
-        var current = document.getElementsByClassName("active");
-        current[0].className = current[0].className.replace(" active", "");
-        this.className += " active";
-    });
-}
 
 class Notes {
     constructor(dbName) {

public/styles/style.css

@@ -16,7 +16,7 @@ body {
 /* Create two equal columns that floats next to each other */
 .column {
   float: left;
-  width: 100%;
+  width: 50%;
   height: 100px;
   border: 2px solid #eee;
   border-radius: 5%;