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>

9 files changed, 127 insertions, 45 deletions

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 @@
 <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>
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 @@
 <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>
+      {{ .Content }}
     </div>
   </div>
 </section>
@@ -50,6 +48,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>
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 @@
             </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>
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 }}
-        <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 }}
\ 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 @@
 <div class="note-card {{if .Get "size" }}{{.Get "size"}}-note{{end}}">
-    <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>
-        <div class="card-body">{{ .Inner | markdownify }}</div>
-        {{ if .Get "footer" }}
-        <div class="card-footer">{{ .Get "footer" }}</div>
-        {{end}}
+    <div class="item">
+        <h5 class="note-title"><span>{{ .Get "title" }}</span></h5>
+        {{ range $idx, $val := split .Inner "---" }}
+            <div class="card">
+                <div class="card-body">{{ $val | markdownify }}</div>
+            </div>
+        {{ end }}
     </div>
 </div>
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<i.length;o++){var r=i[o],s=n&&n[r];s&&(this.off(e,r),delete n[r]),r.apply(this,t)}return this}},t.allOff=function(){delete this._events,delete this._onceEvents},e}),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return t(e,i)}):"object"==typeof module&&module.exports?module.exports=t(e,require("ev-emitter")):e.imagesLoaded=t(e,e.EvEmitter)}("undefined"!=typeof window?window:this,function(e,t){function i(e,t){for(var i in t)e[i]=t[i];return e}function n(e){if(Array.isArray(e))return e;var t="object"==typeof e&&"number"==typeof e.length;return t?d.call(e):[e]}function o(e,t,r){if(!(this instanceof o))return new o(e,t,r);var s=e;return"string"==typeof e&&(s=document.querySelectorAll(e)),s?(this.elements=n(s),this.options=i({},this.options),"function"==typeof t?r=t:i(this.options,t),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(this.check.bind(this))):void a.error("Bad element for imagesLoaded "+(s||e))}function r(e){this.img=e}function s(e,t){this.url=e,this.element=t,this.img=new Image}var h=e.jQuery,a=e.console,d=Array.prototype.slice;o.prototype=Object.create(t.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(e){"IMG"==e.nodeName&&this.addImage(e),this.options.background===!0&&this.addElementBackgroundImages(e);var t=e.nodeType;if(t&&u[t]){for(var i=e.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=e.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var u={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(e){var t=getComputedStyle(e);if(t)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(t.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,e),n=i.exec(t.backgroundImage)}},o.prototype.addImage=function(e){var t=new r(e);this.images.push(t)},o.prototype.addBackground=function(e,t){var i=new s(e,t);this.images.push(i)},o.prototype.check=function(){function e(e,i,n){setTimeout(function(){t.progress(e,i,n)})}var t=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(t){t.once("progress",e),t.check()}):void this.complete()},o.prototype.progress=function(e,t,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded,this.emitEvent("progress",[this,e,t]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,e),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,e,t)},o.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(e,[this]),this.emitEvent("always",[this]),this.jqDeferred){var t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},r.prototype=Object.create(t.prototype),r.prototype.check=function(){var e=this.getIsImageComplete();return e?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},r.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.img,t])},r.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var e=this.getIsImageComplete();e&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.element,t])},o.makeJQueryPlugin=function(t){t=t||e.jQuery,t&&(h=t,h.fn.imagesLoaded=function(e,t){var i=new o(this,e,t);return i.jqDeferred.promise(h(this))})},o.makeJQueryPlugin(),o});
\ No newline at end of file
diff --git a/static/js/note.js b/static/js/note.js
new file mode 100644
index 0000000..2c38b19
--- /dev/null
+++ b/static/js/note.js
@@ -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);