Re-structure note lists

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2021-04-01 01:39:23 +06:00
parent fc5656c937
commit 063a8256e2
6 changed files with 88 additions and 21 deletions

View file

@ -40,7 +40,14 @@
<section class="content-section" id="content-section"> <section class="content-section" id="content-section">
<div class="content container-fluid" id="content"> <div class="content container-fluid" id="content">
<div class="container-fluid note-card-holder" id="note-card-holder"> <div class="container-fluid note-card-holder" id="note-card-holder">
{{ partial "note-aggregator.html" . }} {{ $paginator := .Paginate .RegularPagesRecursive 10 }}
{{ range $paginator.Pages }}
{{ if .Layout }}
{{/* ignore search.md file*/}}
{{ else }}
{{ .Content }}
{{ end }}
{{ end }}
</div> </div>
<div class="paginator"> <div class="paginator">
{{ template "_internal/pagination.html" . }} {{ template "_internal/pagination.html" . }}
@ -51,6 +58,8 @@
{{ define "scripts" }} {{ define "scripts" }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script src="{{ "/js/imagesloaded.pkgd.min.js" | relURL }}"></script>
<script src="{{ "/js/note.js" | relURL }}"></script>
<script> <script>
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
</script> </script>

View file

@ -4,15 +4,15 @@
{{/* ignore search.md file*/}} {{/* ignore search.md file*/}}
{{ else }} {{ else }}
{{$id := .Params.Menu.Notes.Identifier }} {{$id := .Params.Menu.Notes.Identifier }}
<h4 class="note-collection-title" id="{{ $id }}"> <!-- <h4 class="note-collection-title" id="{{ $id }}">
<a href="#{{ $id }}" title="{{ .Title }}"># {{ .Title }}</a> <a href="#{{ $id }}"># {{ .Title }}</a>
{{$badges:= split .File.Dir "/"}} {{$badges:= split .File.Dir "/"}}
{{ range after 1 $badges }} {{ range after 1 $badges }}
<span class="badge btn-info note-badge">{{ . }}</span> <span class="badge btn-info note-badge">{{ . }}</span>
{{ end }} {{ end }}
</h4> </h4> -->
<div class="note-collection"> {{ .Content }}
{{ .Content }} <!-- <div class="note-collection">
</div> </div> -->
{{ end }} {{ end }}
{{ end }} {{ end }}

View file

@ -1,11 +1,11 @@
<div class="note-card {{if .Get "size" }}{{.Get "size"}}-note{{end}}"> <div class="note-card {{if .Get "size" }}{{.Get "size"}}-note{{end}}">
<div class="card"> <div class="item">
<div class="card-header" style="background-color: {{ site.Params.notes.headerBackground | default "transparent" }};"> <h5 class="note-title"><span>{{ .Get "title" }}</span></h5>
<span class="note-title" style="color: {{ site.Params.notes.headerTextColor | default "#1c2d41" }};">{{.Get "title"}}</span> <div class="card">
<div class="card-body">{{ .Inner | markdownify }}</div>
{{ if .Get "footer" }}
<div class="card-footer">{{ .Get "footer" }}</div>
{{end}}
</div> </div>
<div class="card-body">{{ .Inner | markdownify }}</div>
{{ if .Get "footer" }}
<div class="card-footer">{{ .Get "footer" }}</div>
{{end}}
</div> </div>
</div> </div>

View file

@ -25,12 +25,16 @@
.note-card-holder{ .note-card-holder{
padding-top: 2rem; 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; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} } */
.note-card { .note-card {
align-self: flex-start; align-self: flex-start;
@ -41,7 +45,22 @@
} }
.note-title{ .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{ .note-card .card-body{
@ -53,7 +72,7 @@
border-radius: 3px; border-radius: 3px;
} }
.small-note{ /* .small-note{
max-width: 15rem; max-width: 15rem;
} }
@ -65,7 +84,7 @@
max-width: 40rem; max-width: 40rem;
} }
.huge-note{} .huge-note{} */
.note-badge{ .note-badge{
font-size: 10pt; font-size: 10pt;
@ -146,8 +165,8 @@
transition: all ease-out 0.3s; transition: all ease-out 0.3s;
} }
.content-section.hide .note-card-holder .note-card { .content-section.hide .note-card-holder{
max-width: 100%; grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
transition: all ease-out 0.3s; transition: all ease-out 0.3s;
} }
} }

7
static/js/imagesloaded.pkgd.min.js vendored Normal 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);