aditya/hugo-theme-introduction
1
0
Fork 0
mirror of https://git.adityakumar.xyz/hugo-theme-introduction.git synced 2024-12-22 22:52:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplify logic for project modals

Browse source
This commit is contained in:
Hanzei 2018-06-27 11:22:46 +02:00
parent 7f8d87bad7
commit db4f7e5d7a
No known key found for this signature in database
GPG key ID: 69A2DEFD98937BA0
1 changed files with 22 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
layouts/partials/projects.html
View file

@ -9,30 +9,28 @@
<div class="columns is-multiline"> <div class="columns is-multiline">
{{ $totalProjects := (len .Pages) }} {{ $totalProjects := (len .Pages) }}
{{ $numberOfProjectsToShow := .Site.Params.numberOfProjectsToShow | default $totalProjects }} {{ $numberOfProjectsToShow := .Site.Params.numberOfProjectsToShow | default $totalProjects }}
{{ range .Pages | first $numberOfProjectsToShow }} {{ range $index, $element := .Pages | first $numberOfProjectsToShow }}
{{ if eq (mod $numberOfProjectsToShow 2) 0 }} {{ if eq (mod $numberOfProjectsToShow 2) 0 }}
<div class="column is-half"> <div class="column is-half">
{{ else }} {{ else }}
<div class="column is-one-third"> <div class="column is-one-third">
{{ end }} {{ end }}
<div {{ if not .Params.external_link }} id="project{{ $card := .Title | urlize }}{{ replace $card "%" " "}}" {{ end }} <div id="project-{{ $index }}" class="card">
class="card"> <div class="card-image">
<div class="card-image"> <figure class="image is-3by2">
<figure class="image is-3by2">
<a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
<img src="{{ if .Params.image }}{{ .Params.image | relURL }}{{ else }}{{ (.Site.Params.placeHolderimg | default "/img/workday.jpg") | relURL }}{{ end }}">
</a>
</figure>
</div>
<div class="card-content has-text-centered top-pad">
<a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}> <a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
{{ .Title }} <img src="{{ if .Params.image }}{{ .Params.image | relURL }}{{ else }}{{ (.Site.Params.placeHolderimg | default "/img/workday.jpg") | relURL }}{{ end }}">
</a> </a>
</div> </figure>
</div>
<div class="card-content has-text-centered top-pad">
<a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
{{ .Title }}
</a>
</div> </div>
</div> </div>
{{ end }}
</div> </div>
{{ end }}
</div> </div>
</div> </div>
{{ if lt $numberOfProjectsToShow $totalProjects }} {{ if lt $numberOfProjectsToShow $totalProjects }}
@ -43,8 +41,8 @@
</div> </div>
<!-- End Projects container --> <!-- End Projects container -->
<!-- Projects modals --> <!-- Projects modals -->
{{ range .Pages | first $numberOfProjectsToShow }} {{ if not .Params.external_link }} {{ range $index, $element := .Pages | first $numberOfProjectsToShow }} {{ if not .Params.external_link }}
<div class="modal" id="modal{{ $card := .Title | urlize }}{{ replace $card "%" " "}}"> <div class="modal" id="modal-{{ $index }}">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
{{ with .Title }} {{ with .Title }}
@ -61,14 +59,14 @@
</section> </section>
{{ end }} {{ end }}
</div> </div>
<button class="modal-close is-large" aria-label="close" id="close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}"></button> <button class="modal-close is-large" aria-label="close" id="close-{{ $index }}"></button>
</div> </div>
<script> <script>
$('#project{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function () { $('#project-{{ $index }}').click(function () {
$('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').addClass('is-active'); $('#modal-{{ $index }}').addClass('is-active');
}); });
$('#close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function () { $('#close-{{ $index }}').click(function () {
$('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').removeClass('is-active'); $('#modal-{{ $index }}').removeClass('is-active');
}); });
</script> </script>
{{ end }} {{ end }} {{ end }} {{ end }}