FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix note layout (#274)

Browse source 
* Re-structure note lists

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Support note splitting

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Update single page

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Refactor separator logic in navbar

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
Emruz Hossain 2021-05-02 05:02:27 +06:00 • committed by GitHub
parent fc5656c937
commit 67c49c7432
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 127 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

33
static/css/layouts/notes.css
View file

@ -25,12 +25,16 @@
.note-card-holder{
padding-top: 2rem;
display: grid;
grid-gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
grid-auto-rows: 20px;
}
.note-collection {
/* .note-collection {
display: flex;
flex-wrap: wrap;
}
} */
.note-card {
align-self: flex-start;
@ -41,7 +45,22 @@
}
.note-title{
font-weight: 800;
padding-left: 1rem;
color: #248aaa;
}
.note-title span{
background: #e5e9f2;
padding-right: 5px;
}
.note-title:before{
content:'';
display:inline-block;
width:98%;
height:100%;
margin-bottom:-26px;
border-bottom: 1px solid #248aaa;
}
.note-card .card-body{
@ -53,7 +72,7 @@
border-radius: 3px;
}
.small-note{
/* .small-note{
max-width: 15rem;
}
@ -65,7 +84,7 @@
max-width: 40rem;
}
.huge-note{}
.huge-note{} */
.note-badge{
font-size: 10pt;
@ -146,8 +165,8 @@
transition: all ease-out 0.3s;
}
.content-section.hide .note-card-holder .note-card {
max-width: 100%;
.content-section.hide .note-card-holder{
grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
transition: all ease-out 0.3s;
}
}

7
static/js/imagesloaded.pkgd.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

32
static/js/note.js Normal file
View file

@ -0,0 +1,32 @@
"use strict";
(function ($) {
jQuery(document).ready(function () {
function resizeGridItem(item) {
var grid = document.getElementsByClassName("note-card-holder")[0];
var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
var rowSpan = Math.ceil((item.querySelector('.item').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
item.style.gridRowEnd = "span " + rowSpan;
}
function resizeAllGridItems() {
var allItems = document.getElementsByClassName("note-card");
for (var x = 0; x < allItems.length; x++) {
resizeGridItem(allItems[x]);
}
}
function resizeInstance(instance) {
var item = instance.elements[0];
resizeGridItem(item);
}
// window.onload = resizeAllGridItems();
window.addEventListener("resize", resizeAllGridItems);
var allItems = document.getElementsByClassName("note-card");
for (var x = 0; x < allItems.length; x++) {
imagesLoaded(allItems[x], resizeInstance);
}
});
})(jQuery);