mirror of
https://git.adityakumar.xyz/hugo-theme-introduction.git
synced 2024-11-09 23:09:47 +00:00
Simplify logic for project modals
This commit is contained in:
parent
7f8d87bad7
commit
db4f7e5d7a
1 changed files with 22 additions and 24 deletions
|
@ -9,14 +9,13 @@
|
|||
<div class="columns is-multiline">
|
||||
{{ $totalProjects := (len .Pages) }}
|
||||
{{ $numberOfProjectsToShow := .Site.Params.numberOfProjectsToShow | default $totalProjects }}
|
||||
{{ range .Pages | first $numberOfProjectsToShow }}
|
||||
{{ range $index, $element := .Pages | first $numberOfProjectsToShow }}
|
||||
{{ if eq (mod $numberOfProjectsToShow 2) 0 }}
|
||||
<div class="column is-half">
|
||||
{{ else }}
|
||||
<div class="column is-one-third">
|
||||
{{ end }}
|
||||
<div {{ if not .Params.external_link }} id="project{{ $card := .Title | urlize }}{{ replace $card "%" " "}}" {{ end }}
|
||||
class="card">
|
||||
<div id="project-{{ $index }}" class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-3by2">
|
||||
<a {{ if .Params.external_link }} href="{{ .Params.external_link }}" {{ end }}>
|
||||
|
@ -34,7 +33,6 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ if lt $numberOfProjectsToShow $totalProjects }}
|
||||
<div class="container has-text-centered top-pad">
|
||||
<a href="{{ .RelPermalink }}">{{ i18n "index_projects_allProjects" . }}</a>
|
||||
|
@ -43,8 +41,8 @@
|
|||
</div>
|
||||
<!-- End Projects container -->
|
||||
<!-- Projects modals -->
|
||||
{{ range .Pages | first $numberOfProjectsToShow }} {{ if not .Params.external_link }}
|
||||
<div class="modal" id="modal{{ $card := .Title | urlize }}{{ replace $card "%" " "}}">
|
||||
{{ range $index, $element := .Pages | first $numberOfProjectsToShow }} {{ if not .Params.external_link }}
|
||||
<div class="modal" id="modal-{{ $index }}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
{{ with .Title }}
|
||||
|
@ -61,14 +59,14 @@
|
|||
</section>
|
||||
{{ end }}
|
||||
</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>
|
||||
<script>
|
||||
$('#project{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function () {
|
||||
$('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').addClass('is-active');
|
||||
$('#project-{{ $index }}').click(function () {
|
||||
$('#modal-{{ $index }}').addClass('is-active');
|
||||
});
|
||||
$('#close{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').click(function () {
|
||||
$('#modal{{ $card := .Title | urlize }}{{ replace $card "%" ""}}').removeClass('is-active');
|
||||
$('#close-{{ $index }}').click(function () {
|
||||
$('#modal-{{ $index }}').removeClass('is-active');
|
||||
});
|
||||
</script>
|
||||
{{ end }} {{ end }}
|
||||
|
|
Loading…
Reference in a new issue