Make UI a bit nicer

langs/en/notes.json

@@ -11,5 +11,6 @@
     "Note color": "Note color",
     "Cancel": "Cancel",
     "Save": "Save",
-    "Close": "Close"
+    "Close": "Close",
+    "Refresh": "Refresh"
 }

pages/home.php

@@ -68,6 +68,7 @@ foreach ($colors as $c) {
 
 <div class="btn-group mb-4">
     <a href="app.php?page=newnote" class="btn btn-success"><i class="fas fa-plus"></i> <?php $Strings->get("New note"); ?></a>
+    <a href="app.php?page=home" class="btn btn-light"><i class="fas fa-sync-alt"></i> <?php $Strings->get("Refresh"); ?></a>
 </div>
 
 <div class="row" id="grid">
@@ -77,14 +78,11 @@ foreach ($colors as $c) {
         ?>
         <div class="grid__brick col-12 col-sm-6 col-md-6 col-lg-4">
             <div class="card notecard mb-3" data-color="<?php echo $note->getColor(); ?>" id="notecard_<?php echo $note->getID(); ?>" data-note="<?php echo $note->getID(); ?>">
-                <div class="card-body">
+                <div class="card-body notecard-click2open">
                     <div class="float-right">
                         <a href="./action.php?action=favoritenote&noteid=<?php echo $note->getID(); ?>" class="favorite-btn mr-2 <?php echo $note->getFavorite() ? "text-warning" : ""; ?>" data-toggle="tooltip" title="<?php $Strings->get("Favorite"); ?>">
                             <i class="fa<?php echo $note->getFavorite() ? "s" : "r"; ?> fa-star"></i>
                         </a>
-                        <a class="color-btn" data-toggle="tooltip" title="<?php $Strings->get("Set color"); ?>" data-color="<?php echo $note->getColor(); ?>" data-noteid="<?php echo $note->getID(); ?>">
-                            <i class="fas fa-palette"></i>
-                        </a>
                     </div>
                     <div class="card-text note-text">
                         <?php echo $note->getHTML(); ?>
@@ -92,15 +90,28 @@ foreach ($colors as $c) {
                 </div>
 
                 <div class="card-footer">
-                    <a href="./app.php?page=editnote&note=<?php echo $note->getID(); ?>" class="mr-2">
-                        <i class="fas fa-edit"></i> <?php $Strings->get('Edit'); ?>
-                    </a>
-                    <a href="./action.php?action=downloadnote&noteid=<?php echo $note->getID(); ?>" class="mr-2">
-                        <i class="fas fa-download"></i> <?php $Strings->get('Download'); ?>
-                    </a>
-                    <a href="./action.php?action=deletenote&noteid=<?php echo $note->getID(); ?>">
-                        <i class="fas fa-trash"></i> <?php $Strings->get('Delete'); ?>
-                    </a>
+                    <div class="d-flex justify-content-around">
+                        <div>
+                            <a href="./app.php?page=editnote&note=<?php echo $note->getID(); ?>" data-toggle="tooltip" title="<?php $Strings->get('Edit'); ?>">
+                                <i class="fas fa-edit"></i> <noscript><?php $Strings->get('Edit'); ?></noscript>
+                            </a>
+                        </div>
+                        <div class="d-none yesscript">
+                            <a class="color-btn" data-toggle="tooltip" title="<?php $Strings->get("Set color"); ?>" data-color="<?php echo $note->getColor(); ?>" data-noteid="<?php echo $note->getID(); ?>">
+                                <i class="fas fa-palette"></i>
+                            </a>
+                        </div>
+                        <div>
+                            <a href="./action.php?action=downloadnote&noteid=<?php echo $note->getID(); ?>" data-toggle="tooltip" title="<?php $Strings->get('Download'); ?>">
+                                <i class="fas fa-download"></i> <noscript><?php $Strings->get('Download'); ?></noscript>
+                            </a>
+                        </div>
+                        <div>
+                            <a href="./action.php?action=deletenote&noteid=<?php echo $note->getID(); ?>" data-toggle="tooltip" title="<?php $Strings->get('Delete'); ?>">
+                                <i class="fas fa-trash"></i> <noscript><?php $Strings->get('Delete'); ?></noscript>
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

static/css/home.css

@@ -7,4 +7,13 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 .sizer-element {
     z-index: -100;
     pointer-events: none;
+}
+
+.notecard-click2open {
+    cursor: default;
+}
+
+.grid__brick {
+    margin-top: 5px;
+    margin-bottom: 15px;
 }

static/js/home.js

@@ -39,9 +39,16 @@ $(".color-btn").click(function () {
     $("#colormodal").modal();
 });
 
+$(".notecard").on("click", ".notecard-click2open", function () {
+    document.location.href = "./app.php?page=editnote&note=" + $(this).parent().data("note");
+});
+
 $('[data-toggle="tooltip"]').tooltip();
 
 window.shuffleInstance = new window.Shuffle(document.getElementById('grid'), {
     itemSelector: '.grid__brick',
     sizer: '.sizer-element',
 });
+
+// Do the opposite of <noscript>
+$(".yesscript").removeClass("d-none");