Apps/NotePost
2
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Make UI a bit nicer

Browse Source
This commit is contained in:
Skylar Ittner 2018-11-25 20:04:48 -07:00
parent c83cbd5e65
commit 6bf687b40c
4 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
langs/en/notes.json
View File

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

37
pages/home.php
View File

@ -68,6 +68,7 @@ foreach ($colors as $c) {
<div class="btn-group mb-4"> <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=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>
<div class="row" id="grid"> <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="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 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"> <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"); ?>"> <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> <i class="fa<?php echo $note->getFavorite() ? "s" : "r"; ?> fa-star"></i>
</a> </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>
<div class="card-text note-text"> <div class="card-text note-text">
<?php echo $note->getHTML(); ?> <?php echo $note->getHTML(); ?>
@ -92,15 +90,28 @@ foreach ($colors as $c) {
</div> </div>
<div class="card-footer"> <div class="card-footer">
<a href="./app.php?page=editnote&note=<?php echo $note->getID(); ?>" class="mr-2"> <div class="d-flex justify-content-around">
<i class="fas fa-edit"></i> <?php $Strings->get('Edit'); ?> <div>
</a> <a href="./app.php?page=editnote&note=<?php echo $note->getID(); ?>" data-toggle="tooltip" title="<?php $Strings->get('Edit'); ?>">
<a href="./action.php?action=downloadnote&noteid=<?php echo $note->getID(); ?>" class="mr-2"> <i class="fas fa-edit"></i> <noscript><?php $Strings->get('Edit'); ?></noscript>
<i class="fas fa-download"></i> <?php $Strings->get('Download'); ?> </a>
</a> </div>
<a href="./action.php?action=deletenote&noteid=<?php echo $note->getID(); ?>"> <div class="d-none yesscript">
<i class="fas fa-trash"></i> <?php $Strings->get('Delete'); ?> <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(); ?>">
</a> <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> </div>
</div> </div>

9
static/css/home.css
View File

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

7
static/js/home.js
View File

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