From 67c49c7432429e77bbd466a90268a92c5448a064 Mon Sep 17 00:00:00 2001 From: Emruz Hossain Date: Sun, 2 May 2021 05:02:27 +0600 Subject: [PATCH] Fix note layout (#274) * Re-structure note lists Signed-off-by: hossainemruz * Support note splitting Signed-off-by: hossainemruz * Update single page Signed-off-by: hossainemruz * Refactor separator logic in navbar Signed-off-by: hossainemruz --- layouts/notes/list.html | 11 ++++++- layouts/notes/single.html | 6 ++-- .../helpers/add-navbar-separator.html | 25 ++++++++++++++ layouts/partials/navigators/navbar.html | 25 +++++++++----- layouts/partials/note-aggregator.html | 18 ---------- layouts/shortcodes/note.html | 15 ++++----- static/css/layouts/notes.css | 33 +++++++++++++++---- static/js/imagesloaded.pkgd.min.js | 7 ++++ static/js/note.js | 32 ++++++++++++++++++ 9 files changed, 127 insertions(+), 45 deletions(-) create mode 100644 layouts/partials/helpers/add-navbar-separator.html delete mode 100644 layouts/partials/note-aggregator.html create mode 100644 static/js/imagesloaded.pkgd.min.js create mode 100644 static/js/note.js diff --git a/layouts/notes/list.html b/layouts/notes/list.html index f381b6c..f8181c7 100644 --- a/layouts/notes/list.html +++ b/layouts/notes/list.html @@ -40,7 +40,14 @@
- {{ partial "note-aggregator.html" . }} + {{ $paginator := .Paginate .RegularPagesRecursive 10 }} + {{ range $paginator.Pages }} + {{ if .Layout }} + {{/* ignore search.md file*/}} + {{ else }} + {{ .Content }} + {{ end }} + {{ end }}
{{ template "_internal/pagination.html" . }} @@ -51,6 +58,8 @@ {{ define "scripts" }} + + diff --git a/layouts/notes/single.html b/layouts/notes/single.html index b35edb6..152cb52 100644 --- a/layouts/notes/single.html +++ b/layouts/notes/single.html @@ -40,9 +40,7 @@
-
- {{ .Content }} -
+ {{ .Content }}
@@ -50,6 +48,8 @@ {{ define "scripts" }} + + diff --git a/layouts/partials/helpers/add-navbar-separator.html b/layouts/partials/helpers/add-navbar-separator.html new file mode 100644 index 0000000..6fb280e --- /dev/null +++ b/layouts/partials/helpers/add-navbar-separator.html @@ -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 }} diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html index 2daae09..df29cdc 100644 --- a/layouts/partials/navigators/navbar.html +++ b/layouts/partials/navigators/navbar.html @@ -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 @@ {{ 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 }} {{ end }} - {{ if site.Params.enableBlogPost }} + {{ if $blogEnabled }}
  • {{ i18n "posts" }}
    • {{ end }} + {{ if $notesEnabled }} +
  • + {{ i18n "notes" }} +
    • + {{ end }} {{ range $customMenus }}
  • {{ .name }} diff --git a/layouts/partials/note-aggregator.html b/layouts/partials/note-aggregator.html deleted file mode 100644 index 8d90c5c..0000000 --- a/layouts/partials/note-aggregator.html +++ /dev/null @@ -1,18 +0,0 @@ -{{ $paginator := .Paginate .RegularPagesRecursive 10 }} -{{ range $paginator.Pages }} - {{ if .Layout }} - {{/* ignore search.md file*/}} - {{ else }} - {{$id := .Params.Menu.Notes.Identifier }} -

    - # {{ .Title }} - {{$badges:= split .File.Dir "/"}} - {{ range after 1 $badges }} - {{ . }} - {{ end }} -

    -
    - {{ .Content }} -
    - {{ end }} -{{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html index dfc77cf..ffa3663 100644 --- a/layouts/shortcodes/note.html +++ b/layouts/shortcodes/note.html @@ -1,11 +1,10 @@
    -
    -
    - {{.Get "title"}} -
    -
    {{ .Inner | markdownify }}
    - {{ if .Get "footer" }} -
    {{ .Get "footer" }}
    - {{end}} +
    +
    {{ .Get "title" }}
    + {{ range $idx, $val := split .Inner "---" }} +
    +
    {{ $val | markdownify }}
    +
    + {{ end }}
    diff --git a/static/css/layouts/notes.css b/static/css/layouts/notes.css index d481f13..28f852c 100644 --- a/static/css/layouts/notes.css +++ b/static/css/layouts/notes.css @@ -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; } } diff --git a/static/js/imagesloaded.pkgd.min.js b/static/js/imagesloaded.pkgd.min.js new file mode 100644 index 0000000..e443a77 --- /dev/null +++ b/static/js/imagesloaded.pkgd.min.js @@ -0,0 +1,7 @@ +/*! + * imagesLoaded PACKAGED v4.1.4 + * JavaScript is all like "You images are done yet or what?" + * MIT License + */ + +!function(e,t){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",t):"object"==typeof module&&module.exports?module.exports=t():e.EvEmitter=t()}("undefined"!=typeof window?window:this,function(){function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var i=this._events=this._events||{},n=i[e]=i[e]||[];return n.indexOf(t)==-1&&n.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var i=this._onceEvents=this._onceEvents||{},n=i[e]=i[e]||{};return n[t]=!0,this}},t.off=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=i.indexOf(t);return n!=-1&&i.splice(n,1),this}},t.emitEvent=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){i=i.slice(0),t=t||[];for(var n=this._onceEvents&&this._onceEvents[e],o=0;o