This is a separate carousel from the one displayed at the bottom with location info; it is, i suppose, a carousel for the hero image. For the database, it works exactly as the home carousel, but on the front had to use AlpineJS instead of Slick because it needs to show a text popping up from the bottom when the slide is show, something i do not know how to do in Slick. It now makes no sense to have the carousel inside the “nature” section, because the heading is no longer in there, and moved it out into a new “hero” div. Since i now have two carousels in home, i had to add additional attributes to carousel.AdminHandler to know which URL to point to when POSTing, PUTting, or redirecting.
101 lines
4.1 KiB
Plaintext
101 lines
4.1 KiB
Plaintext
<!--
|
|
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
{{ define "title" -}}
|
|
{{( pgettext "Home Page" "title" )}}
|
|
{{- end }}
|
|
|
|
{{ define "content" -}}
|
|
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/home.homeIndex*/ -}}
|
|
<h2>{{( pgettext "Cover" "title" )}}</h2>
|
|
<a href="/admin/home/cover/new">{{( pgettext "Add cover image" "action" )}}</a>
|
|
{{ if .Cover -}}
|
|
<form id="slide-index"
|
|
class="sortable"
|
|
data-hx-post="/admin/home/cover/order"
|
|
data-hx-trigger="end"
|
|
data-hx-select="#slide-index"
|
|
data-hx-swap="outerHTML"
|
|
>
|
|
{{ CSRFInput }}
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{{( pgettext "Image" "header" )}}</th>
|
|
<th scope="col">{{( pgettext "Caption" "header" )}}</th>
|
|
<th scope="col">{{( pgettext "Actions" "header" )}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ $confirm := (gettext "Are you sure you wish to delete this cover image?")}}
|
|
{{ range $slide := .Cover -}}
|
|
<tr>
|
|
<td>
|
|
<span class="handle"></span>
|
|
<input type="hidden" name="media_id" value="{{ .ID }}">
|
|
<a href="/admin/home/cover/{{ .ID }}"><img src="{{ .Media }}" alt=""></a>
|
|
</td>
|
|
<td><a href="/admin/home/cover/{{ .ID }}">{{ .Caption }}</a></td>
|
|
<td>
|
|
<button data-hx-delete="/admin/home/cover/{{ .ID }}"
|
|
data-hx-confirm="{{ $confirm }}"
|
|
data-hx-headers='{ {{ CSRFHeader }} }'>
|
|
{{( pgettext "Delete" "action" )}}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{{- end }}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
{{ else -}}
|
|
<p>{{( gettext "No images added to the cover yet." )}}</p>
|
|
{{- end }}
|
|
|
|
<h2>{{( pgettext "Carousel" "title" )}}</h2>
|
|
<a href="/admin/home/slides/new">{{( pgettext "Add slide" "action" )}}</a>
|
|
{{ if .Slides -}}
|
|
<form id="slide-index"
|
|
class="sortable"
|
|
data-hx-post="/admin/home/slides/order"
|
|
data-hx-trigger="end"
|
|
data-hx-select="#slide-index"
|
|
data-hx-swap="outerHTML"
|
|
>
|
|
{{ CSRFInput }}
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{{( pgettext "Image" "header" )}}</th>
|
|
<th scope="col">{{( pgettext "Caption" "header" )}}</th>
|
|
<th scope="col">{{( pgettext "Actions" "header" )}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ $confirm := (gettext "Are you sure you wish to delete this slide?")}}
|
|
{{ range $slide := .Slides -}}
|
|
<tr>
|
|
<td>
|
|
<span class="handle"></span>
|
|
<input type="hidden" name="media_id" value="{{ .ID }}">
|
|
<a href="/admin/home/slides/{{ .ID }}"><img src="{{ .Media }}" alt=""></a>
|
|
</td>
|
|
<td><a href="/admin/home/slides/{{ .ID }}">{{ .Caption }}</a></td>
|
|
<td>
|
|
<button data-hx-delete="/admin/home/slides/{{ .ID }}"
|
|
data-hx-confirm="{{ $confirm }}"
|
|
data-hx-headers='{ {{ CSRFHeader }} }'>
|
|
{{( pgettext "Delete" "action" )}}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{{- end }}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
{{ else -}}
|
|
<p>{{( gettext "No slides added yet." )}}</p>
|
|
{{- end }}
|
|
{{- end }}
|