diff options
author | hossainemruz <hossainemruz@gmail.com> | 2022-07-28 20:14:57 +0300 |
---|---|---|
committer | hossainemruz <hossainemruz@gmail.com> | 2022-07-28 20:14:57 +0300 |
commit | 0aab3e7afe401d13bc0b87791fdb03ce52b6b5a9 (patch) | |
tree | 96b207003dcc59160826461738bf547fe52c4623 | |
parent | eb167e015529ea4d77c62ebab38ee3287cc8a520 (diff) |
Add publication sectionpublication
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
-rw-r--r-- | layouts/index.html | 1 | ||||
-rw-r--r-- | layouts/partials/cards/publication.html | 39 | ||||
-rw-r--r-- | layouts/partials/sections/projects.html | 2 | ||||
-rw-r--r-- | layouts/partials/sections/publications.html | 30 | ||||
-rw-r--r-- | static/css/layouts/main.css | 6 | ||||
-rw-r--r-- | static/css/sections/publications.css | 144 | ||||
-rw-r--r-- | static/js/home.js | 19 |
7 files changed, 236 insertions, 5 deletions
diff --git a/layouts/index.html b/layouts/index.html index 6b8f29e..4ba24a7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -25,6 +25,7 @@ <link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/> <link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/> <link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/> + <link rel="stylesheet" href="{{ "/css/sections/publications.css" | relURL }}"/> <!--================= custom style overrides =========================--> <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/> diff --git a/layouts/partials/cards/publication.html b/layouts/partials/cards/publication.html new file mode 100644 index 0000000..bdc7b21 --- /dev/null +++ b/layouts/partials/cards/publication.html @@ -0,0 +1,39 @@ +{{ $dataCategories:= slice "pub-all"}} +{{ range .categories}} + {{ $dataCategories = $dataCategories | append (printf "pub-%s" .)}} +{{end}} + +<div + class="col-12 p-2 pub-filtr-item" + data-category='{{ delimit $dataCategories ","}}' +> + <div class="card mt-3"> + <div class="card-header"> + <h5 class="card-title mb-0">{{ .title }}</h5> + <div class="sub-title"> + <span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span> + <span class="ml-2">{{ .publishedIn.date }}</span> + </div> + <div class="authors"> + {{ range $index,$author:= .authors }} + <span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span> + {{ end }} + </div> + </div> + <div class="card-body"> + <p>{{ .paper.summary | markdownify }}</p> + </div> + <div class="card-footer"> + <div class="tags"> + {{ range $index,$tag:= .tags }} + <span class="btn badge btn-info ml-1 p-2"> + {{ $tag }} + </span> + {{ end }} + </div> + <div class="details-btn"> + <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a> + </div> + </div> + </div> +</div> diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html index c658e2c..34a5e6f 100644 --- a/layouts/partials/sections/projects.html +++ b/layouts/partials/sections/projects.html @@ -14,7 +14,7 @@ <div class="container ml-auto text-center"> <div class="btn-group flex-wrap" role="group" id="project-filter-buttons"> {{ range .buttons }} - <button type="button" class="btn btn-dark" data-filter="{{ .filter }}"> + <button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}"> {{ .name }} </button> {{ end }} diff --git a/layouts/partials/sections/publications.html b/layouts/partials/sections/publications.html new file mode 100644 index 0000000..733d578 --- /dev/null +++ b/layouts/partials/sections/publications.html @@ -0,0 +1,30 @@ +{{ $sectionID := replace (lower .section.name) " " "-" }} +{{ if .section.id }} + {{ $sectionID = .section.id }} +{{ end }} + +<div class="container-fluid anchor pb-5 publications-section" id="{{ $sectionID }}"> + {{ if not (.section.hideTitle) }} + <h1 class="text-center"> + <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1> + {{ else }} + <h1 class="text-center" style="display: none"> + <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1> + {{ end }} + <div class="container ml-auto text-center"> + <div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons"> + {{ range .buttons }} + <button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}"> + {{ .name }} + </button> + {{ end }} + </div> + </div> + <div class="container filtr-publications"> + <div class="row" id="publication-card-holder"> + {{ range .publications }} + {{ partial "cards/publication" . }} + {{ end }} + </div> + </div> +</div> diff --git a/static/css/layouts/main.css b/static/css/layouts/main.css index 0303086..ddf9342 100644 --- a/static/css/layouts/main.css +++ b/static/css/layouts/main.css @@ -444,7 +444,8 @@ mark { @media only screen and (max-width: 576px) { .skills-section .container, - .projects-section .container { + .projects-section .container, + .publications-section .container { padding-left: 0.3rem; padding-right: 0.3rem; } @@ -457,7 +458,8 @@ mark { .skills-section, .projects-section, .recent-posts-section, - .achievements-section { + .achievements-section, + .publications-section { padding-left: 0; padding-right: 0; } diff --git a/static/css/sections/publications.css b/static/css/sections/publications.css new file mode 100644 index 0000000..2724d31 --- /dev/null +++ b/static/css/sections/publications.css @@ -0,0 +1,144 @@ +.publications-section h1 > span{ + margin-top: -55px; /* Size of fixed header */ + padding-bottom:55px; + display: block; +} + +.publications-section .card { + background: #fff; + border-top: 2px solid #248aaa; +} +.publications-section .card .card-header { + background: none; + border: none; + display: flex; + flex-direction: column; +} + +.publications-section .card .card-header .sub-title { + color: #8392a5; + margin-top: 0.4rem; +} + +.publications-section .card .sub-title :nth-child(2) { + float: right !important; +} + +.publications-section .card .card-body { + padding: 0; + padding-left: 1rem; + padding-right: 1rem; +} + +.publications-section .card .card-footer { + background: #fff; + border: none; + padding: 0; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 0.3rem; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.publications-section .card .card-footer .tags { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; +} + +.filtr-publications { + padding: 1rem !important; +} + +.publications-section .btn-group{ + justify-content: center; +} + +/* ============= Device specific fixes ======= */ + +/* Large screens such as TV */ +@media only screen and (min-width: 1824px) { +} + +/* Extra large devices (large desktops, 1200px and up) */ + +@media (max-width: 1400px) { +} + +@media (max-width: 1200px) { +} + +/* IPad Pro */ +@media (max-width: 1024px) { + .publications-section { + padding-left: 0; + padding-right: 0; + width: 100%; + } + .publications-section .container { + max-width: 100%; + } + .publicationss-section .filtr-publications { + padding: 0; + } + .publicationss-section .pub-filtr-item { + padding-left: 0.2rem; + padding-right: 0.2rem; + } +} + +/* Large devices (desktops, 992px and up) */ + +@media (max-width: 992px) { +} + +/* Medium devices (tablets, 768px and up) */ + +@media only screen and (max-width: 768px) { + .publications-section { + padding-left: 0; + padding-right: 0; + width: 100%; + } + .publications-section .container { + max-width: 100%; + } + .publications-section .filtr-publications { + padding: 0; + } + .publications-section .pub-filtr-item { + padding-left: 0.2rem; + padding-right: 0.2rem; + flex: 100%; + } +} + +/* Small devices (landscape phones, 576px and up) */ + +@media only screen and (max-width: 576px) { + .publications-section .btn { + margin-top: 0.3125rem; + } + .publications-section .pub-filtr-item { + flex: 100%; + max-width: 100%; + } + .publications-section .card .card-footer .tags { + flex: 100%; + } +} + +/* iPhoneX, iPhone 6,7,8 */ +@media only screen and (max-width: 375px) { +} + +/* Galaxy S5, Moto G4 */ +@media only screen and (max-width: 360px) { +} + +/* iPhone 5 or before */ +@media only screen and (max-width: 320px) { +} diff --git a/static/js/home.js b/static/js/home.js index d1c0b5f..614540d 100644 --- a/static/js/home.js +++ b/static/js/home.js @@ -1,6 +1,6 @@ "use strict"; -var projectCards; +var projectCards, publicationCards; (function ($) { jQuery(document).ready(function () { @@ -79,7 +79,22 @@ var projectCards; var projectCardHolder = document.getElementById("project-card-holder"); if (projectCardHolder != null && projectCardHolder.children.length != 0) { - projectCards = $(".filtr-projects").filterizr({ layout: 'sameWidth' }); + projectCards = $(".filtr-projects").filterizr( + { + layout: 'sameWidth', + controlsSelector: '.project-filtr-control', + }); + } + + // ================== Publication cards ===================== + var publicationCardHolder = document.getElementById("publication-card-holder"); + if (publicationCardHolder != null && publicationCardHolder.children.length != 0) { + publicationCards = $(".filtr-publications").filterizr( + { + layout: 'sameWidth', + gridItemsSelector: '.pub-filtr-item', + controlsSelector: '.pub-filtr-control', + }); } function showGithubStars() { |