From 00465629d23ab908aa060f9926d0b40796236353 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Sat, 18 Apr 2020 02:19:46 +0600 Subject: [PATCH] Convert list page into hugo templates --- layouts/_default/list.html | 22 ++++++++++++++++--- layouts/partials/cards/post.html | 14 +++++++----- layouts/partials/cards/recent-post.html | 17 +++++++++++++++ layouts/partials/footer.html | 2 +- layouts/partials/navbar.html | 2 +- layouts/partials/posts.html | 7 ++++++ layouts/partials/recent-posts.html | 2 +- layouts/partials/sections.html | 11 ++++++++++ static/assets/css/list.css | 29 ++++++++++++++++++++----- static/assets/css/single.css | 5 ++++- static/assets/js/list.js | 6 ++++- 11 files changed, 98 insertions(+), 19 deletions(-) create mode 100644 layouts/partials/cards/recent-post.html create mode 100644 layouts/partials/posts.html create mode 100644 layouts/partials/sections.html diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f19845e..15cca86 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,14 +1,30 @@ {{ define "header" }} - + {{ end }} {{ define "navbar" }} {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }} {{ end }} - {{ define "content" }} -

Here is the actual content

+ +
+
+
+ {{ partial "posts.html" . }} +
+
+
{{ end }} {{ define "scripts" }} diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html index a20f003..d3104ec 100644 --- a/layouts/partials/cards/post.html +++ b/layouts/partials/cards/post.html @@ -1,17 +1,19 @@ -
+
- Card image cap + Card image cap
{{ .Title }}
-

{{ .Summary }}

+

{{ .Summary }}

{{ .Date.Format "January 2, 2006" }} - Details + Read
diff --git a/layouts/partials/cards/recent-post.html b/layouts/partials/cards/recent-post.html new file mode 100644 index 0000000..d61af71 --- /dev/null +++ b/layouts/partials/cards/recent-post.html @@ -0,0 +1,17 @@ +
+
+
+ Card image cap +
+
+
{{ .Title }}
+

{{ .Summary }}

+
+
+ {{ .Date.Format "January 2, 2006" }} + Read +
+
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 471336b..7f65f40 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -51,7 +51,7 @@
Powered by Hugo Hugo Logo diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 6c2deda..dc03708 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -20,7 +20,7 @@ {{ end }}
  • - Blog + Blog
    • diff --git a/layouts/partials/posts.html b/layouts/partials/posts.html new file mode 100644 index 0000000..544812a --- /dev/null +++ b/layouts/partials/posts.html @@ -0,0 +1,7 @@ +{{ range .Pages }} + {{ if .IsNode }} + {{ partial "posts.html" . }} + {{ else }} + {{ partial "cards/post.html" . }} + {{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/recent-posts.html b/layouts/partials/recent-posts.html index 9b57286..9e377af 100644 --- a/layouts/partials/recent-posts.html +++ b/layouts/partials/recent-posts.html @@ -3,7 +3,7 @@
    {{ range first 3 .Site.RegularPages }} - {{ partial "cards/post.html" . }} + {{ partial "cards/recent-post.html" . }} {{ end }}
    diff --git a/layouts/partials/sections.html b/layouts/partials/sections.html new file mode 100644 index 0000000..d847fb5 --- /dev/null +++ b/layouts/partials/sections.html @@ -0,0 +1,11 @@ +{{ range . }} +{{ if .Sections }} +
  • {{ title .Title }} +
      + {{ partial "sections.html" .Sections }} +
    +
    • + {{ else }} +
  • {{ title .Title }}
    • + {{ end }} +{{ end }} diff --git a/static/assets/css/list.css b/static/assets/css/list.css index 56f6178..ddbeaec 100644 --- a/static/assets/css/list.css +++ b/static/assets/css/list.css @@ -43,6 +43,10 @@ position: fixed; } +#list-heading{ + padding-left: 0px!important; +} + .tree, .tree ul { margin: 0; @@ -52,7 +56,7 @@ } .tree ul { - margin-left: 1em; + margin-left: 0.5rem; position: relative; } @@ -65,12 +69,27 @@ display: block; width: 0; position: absolute; - top: -17px; + top: -20px; left: -3px; bottom: 16px; border-left: 1px solid; } +.subtree{ + padding-left: 0.7rem; +} + +.subtree:before{ + content: ""; + display: block; + width: 0; + position: absolute; + top: 6.5rem; + left: 0.5rem; + bottom: 16px; + border-left: 1px solid; +} + .tree li { margin: 0; padding: 0 1em; @@ -80,10 +99,10 @@ position: relative; } -.tree ul li:before { +.subtree li:before { content: ""; display: block; - width: 16px; + width: 20px; height: 0; border-top: 1px solid; margin-top: -1px; @@ -92,7 +111,7 @@ left: -3px; } -.tree ul li:last-child:before { +.subtree li:last-child:before { background: #f9fafc; height: auto; top: 1em; diff --git a/static/assets/css/single.css b/static/assets/css/single.css index 75ab9f7..70f5266 100644 --- a/static/assets/css/single.css +++ b/static/assets/css/single.css @@ -1,3 +1,6 @@ +body{ + background-color: #e5e9f2; +} .read-area { background-color: #f9fafc; } @@ -7,7 +10,7 @@ } .hero-area { - margin-top: 50px; + margin-top: 3.5rem; width: 100%; height: 400px; background-position: center; diff --git a/static/assets/js/list.js b/static/assets/js/list.js index 2ec8c28..41b5e87 100644 --- a/static/assets/js/list.js +++ b/static/assets/js/list.js @@ -26,7 +26,11 @@ var isMobile = false, isTablet = false, isLaptop = false; // ======= Adjust height of the post cards ============= function adjustPostCardsHeight() { if (!isMobile) { // no need to adjust height for mobile devices - let el = document.getElementById("post-cards").children; + let postCardHolder = document.getElementById("post-cards"); + if (postCardHolder == null ){ + return + } + let el = postCardHolder.children; let maxHeight = 0; for (let i = 0; i < el.length; i++) { if (el[i].children[0].clientHeight > maxHeight) {