FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert list page into hugo templates

Browse source
This commit is contained in:
hossainemruz 2020-04-18 02:19:46 +06:00
parent 607f15580c
commit 00465629d2
11 changed files with 98 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

22
layouts/_default/list.html
View file

@ -1,14 +1,30 @@
{{ define "header" }}
<link rel="stylesheet" href="/assets/css/list.css">
{{ end }}
{{ define "navbar" }}
{{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }}
{{ end }}
{{ define "content" }}
<h1>Here is the actual content</h1>
<div class="sidebar" id="sidebar">
<div class="sidebar-tree">
<input type="text" name="filtr-search" value="" placeholder="Search" data-search="" id="search-box" />
<ul class="tree" id="tree">
<li id="list-heading"><a href="#" data-filter="all">{{.Title}}</a></li>
<div class="subtree">
{{ partial "sections.html" .Sections }}
</div>
</ul>
</div>
</div>
<div class="content container-fluid" id="content">
<div class="content-cards">
<div class="container-fluid filtr-container post-cards" id="post-cards">
{{ partial "posts.html" . }}
</div>
</div>
</div>
{{ end }}
{{ define "scripts" }}

14
layouts/partials/cards/post.html
View file

@ -1,17 +1,19 @@
<div class="col-lg-4 col-md-6 pt-2">
<div class="filtr-item" data-category='{{ delimit .Params.categories ","}}'>
<div class="card">
<div class="card-head">
<img class="card-img-top" src="{{ .Params.hero }}"
alt="Card image cap"
/>
<img class="card-img-top" src="{{ .Params.hero }}" alt="Card image cap" />
</div>
<div class="card-body">
<h5 class="card-title">{{ .Title }}</h5>
<p class="card-text post-summery"> {{ .Summary }}</p>
<p class="card-text post-summery">{{ .Summary }}</p>
</div>
<div class="card-footer">
<span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
<a href="{{ .RelPermalink }}" class="float-right btn btn-outline-info btn-sm">Details</a>
<a
href="{{ .RelPermalink }}"
class="float-right btn btn-outline-info btn-sm"
>Read</a
>
</div>
</div>
</div>

17
layouts/partials/cards/recent-post.html Normal file
View file

@ -0,0 +1,17 @@
<div class="col-lg-4 col-md-6 pt-2">
<div class="card">
<div class="card-head">
<img class="card-img-top" src="{{ .Params.hero }}"
alt="Card image cap"
/>
</div>
<div class="card-body">
<h5 class="card-title">{{ .Title }}</h5>
<p class="card-text post-summery"> {{ .Summary }}</p>
</div>
<div class="card-footer">
<span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
<a href="{{ .RelPermalink }}" class="float-right btn btn-outline-info btn-sm">Read</a>
</div>
</div>
</div>

2
layouts/partials/footer.html
View file

@ -51,7 +51,7 @@
<div class="col-md-4">
Powered by <a href="https://gohugo.io/">Hugo</a>
<img
src="assets/images/logos/hugo-logo-wide.svg"
src="/assets/images/logos/hugo-logo-wide.svg"
alt="Hugo Logo"
height="18"
/>

2
layouts/partials/navbar.html
View file

@ -20,7 +20,7 @@
{{ end }}
<div class="dropdown-divider" id="top-navbar-divider"></div>
<li class="nav-item">
<a class="nav-link" id="blog-link" href="blog.html">Blog</a>
<a class="nav-link" id="blog-link" href="/posts">Blog</a>
</li>
</ul>
</div>

7
layouts/partials/posts.html Normal file
View file

@ -0,0 +1,7 @@
{{ range .Pages }}
{{ if .IsNode }}
{{ partial "posts.html" . }}
{{ else }}
{{ partial "cards/post.html" . }}
{{ end }}
{{ end }}

2
layouts/partials/recent-posts.html
View file

@ -3,7 +3,7 @@
<div class="container">
<div class="row" id="recent-posts">
{{ range first 3 .Site.RegularPages }}
{{ partial "cards/post.html" . }}
{{ partial "cards/recent-post.html" . }}
{{ end }}
</div>
</div>

11
layouts/partials/sections.html Normal file
View file

@ -0,0 +1,11 @@
{{ range . }}
{{ if .Sections }}
<li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a>
<ul>
{{ partial "sections.html" .Sections }}
</ul>
</li>
{{ else }}
<li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a></li>
{{ end }}
{{ end }}

29
static/assets/css/list.css
View file

@ -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;

5
static/assets/css/single.css
View file

@ -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;

6
static/assets/js/list.js
View file

@ -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) {