Fix note layout (#274)
* 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
GitHub
parent
fc5656c937
commit
67c49c7432
9 changed files with 127 additions and 45 deletions
|
|
@ -40,7 +40,14 @@
|
|||
<section class="content-section" id="content-section">
|
||||
<div class="content container-fluid" id="content">
|
||||
<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 class="paginator">
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
|
|
@ -51,6 +58,8 @@
|
|||
|
||||
{{ define "scripts" }}
|
||||
<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>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -40,16 +40,16 @@
|
|||
<section class="content-section" id="content-section">
|
||||
<div class="content container-fluid" id="content">
|
||||
<div class="container-fluid note-card-holder" id="note-card-holder">
|
||||
<div class="note-collection">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "scripts" }}
|
||||
<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>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
|
|
|
|||
25
layouts/partials/helpers/add-navbar-separator.html
Normal file
25
layouts/partials/helpers/add-navbar-separator.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{{ $addNavbarSeparator:= false }}
|
||||
|
||||
{{/* If "blog" feature is enabled, then add navbar separator */}}
|
||||
{{ if site.Params.features.blog.enable }}
|
||||
{{ $addNavbarSeparator = true }}
|
||||
{{ end }}
|
||||
|
||||
{{/* If "notes" feature is enabled, then add navbar separator */}}
|
||||
{{ if site.Params.features.notes.enable }}
|
||||
{{ $addNavbarSeparator = true }}
|
||||
{{ end }}
|
||||
|
||||
{{/* If site has custom menus, then add navbar separator */}}
|
||||
{{ $customMenus := site.Params.customMenus }}
|
||||
{{ if (index site.Data site.Language.Lang).site.customMenus }}
|
||||
{{ $customMenus = (index site.Data site.Language.Lang).site.customMenus }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $customMenus }}
|
||||
{{ if gt (len $customMenus) 0 }}
|
||||
{{ $addNavbarSeparator = true }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ return $addNavbarSeparator }}
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
{{/* variables for enabling/disabling various features */}}
|
||||
{{ $blogEnabled := site.Params.features.blog.enable | default false }}
|
||||
{{ $notesEnabled := site.Params.features.notes.enable | default false }}
|
||||
|
||||
{{/* keep backward compatibility for blog post */}}
|
||||
{{ if site.Params.enableBlogPost }}
|
||||
{{ $blogEnabled = true }}
|
||||
{{ end }}
|
||||
|
||||
{{/* default logos */}}
|
||||
{{ $mainLogo := "/images/main-logo.png" }}
|
||||
{{ $invertedLogo := "/images/inverted-logo.png" }}
|
||||
|
|
@ -84,20 +93,20 @@
|
|||
</li>
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
{{ $hasCustomMenus:= false }}
|
||||
{{ if $customMenus }}
|
||||
{{ if gt (len $customMenus) 0 }}
|
||||
{{ $hasCustomMenus = true }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if (or site.Params.enableBlogPost $hasCustomMenus) }}
|
||||
{{ $shouldAddSeparator:= partial "helpers/add-navbar-separator.html" . }}
|
||||
{{ if $shouldAddSeparator }}
|
||||
<div class="dropdown-divider" id="top-navbar-divider"></div>
|
||||
{{ end }}
|
||||
{{ if site.Params.enableBlogPost }}
|
||||
{{ if $blogEnabled }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="blog-link" href="{{ "/posts" | relLangURL }}">{{ i18n "posts" }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if $notesEnabled }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="note-link" href="{{ "/notes" | relLangURL }}">{{ i18n "notes" }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ range $customMenus }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ .url }}">{{ .name }}</a>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
{{ $paginator := .Paginate .RegularPagesRecursive 10 }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ if .Layout }}
|
||||
{{/* ignore search.md file*/}}
|
||||
{{ else }}
|
||||
{{$id := .Params.Menu.Notes.Identifier }}
|
||||
<h4 class="note-collection-title" id="{{ $id }}">
|
||||
<a href="#{{ $id }}" title="{{ .Title }}"># {{ .Title }}</a>
|
||||
{{$badges:= split .File.Dir "/"}}
|
||||
{{ range after 1 $badges }}
|
||||
<span class="badge btn-info note-badge">{{ . }}</span>
|
||||
{{ end }}
|
||||
</h4>
|
||||
<div class="note-collection">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
<div class="note-card {{if .Get "size" }}{{.Get "size"}}-note{{end}}">
|
||||
<div class="item">
|
||||
<h5 class="note-title"><span>{{ .Get "title" }}</span></h5>
|
||||
{{ range $idx, $val := split .Inner "---" }}
|
||||
<div class="card">
|
||||
<div class="card-header" style="background-color: {{ site.Params.notes.headerBackground | default "transparent" }};">
|
||||
<span class="note-title" style="color: {{ site.Params.notes.headerTextColor | default "#1c2d41" }};">{{.Get "title"}}</span>
|
||||
<div class="card-body">{{ $val | markdownify }}</div>
|
||||
</div>
|
||||
<div class="card-body">{{ .Inner | markdownify }}</div>
|
||||
{{ if .Get "footer" }}
|
||||
<div class="card-footer">{{ .Get "footer" }}</div>
|
||||
{{end}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
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
32
static/js/note.js
Normal 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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue