Add edit button, improve text wrapping and table behavior

www/css/notecards.css

@@ -20,11 +20,51 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     position: absolute;
     top: 0;
     right: 0;
-    padding: 1em;
+    padding: 0.5em;
+    padding-top: 1em;
     cursor: pointer;
     z-index: 99999;
 }
 
+.notecard .editbtn {
+    position: absolute;
+    top: 0;
+    right: 2.5em;
+    padding: 0.5em;
+    padding-top: 1em;
+    cursor: pointer;
+    z-index: 99999;
+}
+
+.notecard .btnswrapthing {
+    height: 2.5em;
+    width: 4.5em;
+    float: right;
+}
+
+.notecard .card-content {
+    word-wrap: break-word;
+}
+
+.notecard table {
+    border-spacing: 0px;
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    margin-bottom: 1em;
+}
+
+.notecard table th, .notecard table td {
+    border: 1px solid;
+    padding: 2px 4px;
+    border-spacing: 0px;
+    word-wrap: break-word;
+}
+
+.notecard table tbody tr:nth-child(odd) {
+    background-color: rgba(255,255,255,0.15);
+}
+
 .notecard {
     min-height: 4em;
 }

www/js/home.js

@@ -23,10 +23,13 @@ function loadCards(callback) {
                 var note = notes[n];
                 $("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-' + note.noteid + '">'
                         + '<div class="card notecard" id="notecard-' + note.noteid + '" data-id="' + note.noteid + '" data-bg="' + note.color + '" data-fg="' + note.textcolor + '" style="background-color: #' + note.color + '; color: #' + note.textcolor + ';">'
+                        + '<div class="editbtn">'
+                        + '<i class="material-icons">edit</i>'
+                        + '</div>'
                         + '<div class="menubtn">'
                         + '<i class="material-icons">more_vert</i>'
                         + '</div>'
-                        + '<div class="card-content card-content-padding">' + note.html + '</div>'
+                        + '<div class="card-content card-content-padding"><div class="btnswrapthing"></div>' + note.html + '</div>'
                         + '</div>'
                         + '</div>');
             }
@@ -194,6 +197,10 @@ $(".view-main").on("click", ".notecard .menubtn", function () {
     return openNoteActionMenu($(this).parent());
 });
 
+$(".view-main").on("click", ".notecard .editbtn", function () {
+    editNote($(this).parent().data("id"));
+});
+
 $(".view-main").on("contextmenu", ".notecard", function () {
     return openNoteActionMenu($(this));
 });

www/pages/home.html

@@ -43,10 +43,13 @@
             {{#each notecards}}
             <div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}">
                 <div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
+                    <div class="editbtn">
+                        <i class="material-icons">edit</i>
+                    </div>
                     <div class="menubtn">
                         <i class="material-icons">more_vert</i>
                     </div>
-                    <div class="card-content card-content-padding">{{html}}</div>
+                    <div class="card-content card-content-padding"><div class="btnswrapthing"></div>{{html}}</div>
                 </div>
             </div>
             {{/each}}