Diffstat (limited to 'views')
| -rw-r--r-- | views/layouts/general-page.html | 25 | ||||
| -rw-r--r-- | views/pages/blog-catalogue.html | 97 | ||||
| -rw-r--r-- | views/pages/blog-page.html | 8 | ||||
| -rw-r--r-- | views/pages/global-map.html | 18 | ||||
| -rw-r--r-- | views/partials/blog-page-like-button.html | 9 | ||||
| -rw-r--r-- | views/partials/general-page-header.html | 6 |
6 files changed, 84 insertions, 79 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 87f7946..01043c6 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -172,25 +172,28 @@ <div class="grow bg-split-left"></div> - <div class="flex flex-col [@media(max-height:32rem)]:flex-row"> - <div id="sidebar" class="bg-sidebar flex sticky flex-col z-20 w-dvw xs:w-[90dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] [@media(max-height:32rem)]:w-fit h-fit [@media(max-height:32rem)]:h-dvh shadow-[0_0_1rem_black]"> - <div class="text-[3rem] flex flex-row [@media(max-height:32rem)]:flex-col gap-0 relative z-20"> - <a onclick="return changeUrl('/../', true);" href="./" id="sidebar-back-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> + <div class="flex flex-col sm:flex-row"> + <div id="sidebar" class="bg-sidebar flex + flex-row sticky w-dvw h-fit xs:w-[90dvw] + sm:left-0 sm:flex-col sm:fixed sm:w-fit + z-20 shadow-[0_0_1rem_black]"> + <div class="text-[3rem] flex flex-row sm:flex-col gap-0 relative z-20"> + <a onclick="return changeUrl('/../', true);" href="./" id="sidebar-back-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false"> <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a onclick="return changeUrl('/{{ .Lang }}');" href="/{{ .Lang }}" id="sidebar-home-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> + <a onclick="return changeUrl('/{{ .Lang }}');" href="/{{ .Lang }}" id="sidebar-home-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false"> <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a onclick="return changeUrl('/{{ .Lang }}/blog');" href="/{{ .Lang }}/blog" id="sidebar-blog-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> + <a onclick="return changeUrl('/{{ .Lang }}/blog');" href="/{{ .Lang }}/blog" id="sidebar-blog-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false"> <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a href="/{{ .Lang }}/map" id="sidebar-map-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> + <a href="/{{ .Lang }}/map" id="sidebar-map-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false"> <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="toolbar-button w-fit h-fit" draggable="false"> + <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar"></i> </div> - <a onclick="return changeUrl('/{{ .Lang }}/user');" href="/{{ .Lang }}/user" id="sidebar-user-button" class="toolbar-button w-fit h-fit hidden" draggable="false"> + <a onclick="return changeUrl('/{{ .Lang }}/user');" href="/{{ .Lang }}/user" id="sidebar-user-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false"> <i class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar"></i> </a> </div> @@ -237,10 +240,10 @@ </script> </div> - <div class="bg-background-dark @container/main flex z-10 w-dvw xs:w-[90dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] grow-0 h-[calc(100dvh-5.1rem)] [@media(max-height:32rem)]:h-dvh shadow-[0_0_1rem_black]"> + <div class="bg-background-dark @container/main flex z-10 w-dvw xs:w-[90dvw] sm:w-[85dvw] md:w-[80dvw] lg:w-[75dvw] xl:w-[70dvw] 2xl:w-[60dvw] 3xl:w-[50dvw] grow-0 h-[calc(100dvh-5rem)] sm:h-dvh shadow-[0_0_1rem_black]"> <div class="bg-background-dark border-r-2 border-dashed border-main-hard"></div> - <div class="max-h-100% flex flex-col grow bg-background-dark relative pt-4 ml-8 pr-4"> + <div class="max-h-full max-w-full flex flex-col grow bg-background-dark relative pt-4 ml-8 pr-4"> <div id="general-page-header" class="max-xs:hidden [@media(max-height:32rem)]:hidden flex flex-col basis-8" hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML"> </div> diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html index c0c72b9..d2c74ae 100644 --- a/views/pages/blog-catalogue.html +++ b/views/pages/blog-catalogue.html @@ -1,54 +1,57 @@ {{ define "body" }} <div class="flex flex-row ar-lt-0.8:flex-col text-base h-full"> - <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML" - class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-full ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-light inset-shadow-[0_0_0.4rem_black]"> - <div class="flex flex-col overflow-y-auto"> - <fieldset> - <legend class="font-bold w-full text-center">{{ .L.BlogSearch.TagsHeader }}</legend> - <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 xs:grid-cols-4 sm:grid-cols-5 grid-flow-row-dense"> - <div class="m-1"> - <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label> + <div class="relative flex shrink-0 ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-full ar-lt-0.8:max-h-[30%] ar-gt-0.8:mr-6"> + <div class="absolute w-full h-full inset-shadow-[0_0_0.4rem_black] pointer-events-none z-20"></div> + <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML" + class="tags-list relative flex flex-col w-full bg-background-light"> + <div class="flex flex-col overflow-y-auto"> + <fieldset> + <legend class="font-bold w-full text-center">{{ .L.BlogSearch.TagsHeader }}</legend> + <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 xs:grid-cols-4 sm:grid-cols-5 grid-flow-row-dense"> + <div class="m-1"> + <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label> + </div> + {{- range .Tags }} + <div class="m-1"> + <label><input type="checkbox" id="tag{{ .Name }}Checkbox" name="tags[]" value="{{ .Name }}" onclick="contextAll();" {{ if contains $.QueryTags .Name }}checked{{ end }}> {{ .Name }} <span class="text-secondary italic">{{ .Count }}</span></label> + </div> + {{- end }} </div> - {{- range .Tags }} - <div class="m-1"> - <label><input type="checkbox" id="tag{{ .Name }}Checkbox" name="tags[]" value="{{ .Name }}" onclick="contextAll();" {{ if contains $.QueryTags .Name }}checked{{ end }}> {{ .Name }} <span class="text-secondary italic">{{ .Count }}</span></label> + </fieldset> + <fieldset class="mt-1"> + <legend class="font-bold w-full text-center">{{ .L.BlogSearch.OrderByHeader }}</legend> + <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col"> + <div class="m-1"> + <label><input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-a-z"></i></label> + </div> + <div class="m-1"> + <label><input type="radio" id="sortTitleDesc" name="sort" value="titleDesc" {{ if eq .QuerySort "titleDesc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-z-a"></i></label> + </div> + <div class="m-1"> + <label><input type="radio" id="sortActionDateAsc" name="sort" value="actionDateAsc" {{ if eq .QuerySort "actionDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label> + </div> + <div class="m-1"> + <label><input type="radio" id="sortActionDateDesc" name="sort" value="actionDateDesc" {{ if eq .QuerySort "actionDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label> + </div> + <div class="m-1"> + <label><input type="radio" id="sortPublicationDateAsc" name="sort" value="publicationDateAsc" {{ if eq .QuerySort "publicationDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label> + </div> + <div class="m-1"> + <label><input type="radio" id="sortPublicationDateDesc" name="sort" value="publicationDateDesc" {{ if eq .QuerySort "publicationDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label> + </div> </div> - {{- end }} - </div> - </fieldset> - <fieldset class="mt-1"> - <legend class="font-bold w-full text-center">{{ .L.BlogSearch.OrderByHeader }}</legend> - <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col"> - <div class="m-1"> - <label><input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-a-z"></i></label> - </div> - <div class="m-1"> - <label><input type="radio" id="sortTitleDesc" name="sort" value="titleDesc" {{ if eq .QuerySort "titleDesc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-z-a"></i></label> - </div> - <div class="m-1"> - <label><input type="radio" id="sortActionDateAsc" name="sort" value="actionDateAsc" {{ if eq .QuerySort "actionDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label> - </div> - <div class="m-1"> - <label><input type="radio" id="sortActionDateDesc" name="sort" value="actionDateDesc" {{ if eq .QuerySort "actionDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.ActionDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label> - </div> - <div class="m-1"> - <label><input type="radio" id="sortPublicationDateAsc" name="sort" value="publicationDateAsc" {{ if eq .QuerySort "publicationDateAsc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-1-9"></i></label> - </div> - <div class="m-1"> - <label><input type="radio" id="sortPublicationDateDesc" name="sort" value="publicationDateDesc" {{ if eq .QuerySort "publicationDateDesc" }}checked{{ end }}> {{ .L.BlogSearch.PublicationDateOrdered }} <i class="fas fa-arrow-down-9-1"></i></label> - </div> - </div> - </fieldset> - </div> - <hr class="border-t-2 border-dotted border-main-hard my-0.5"> - <div class="flex flex-row bg-background-dark my-2 p-0.5 rounded-1 justify-items-center"> - <i onclick="defaultSearchParams(); cleanHrefParams();" class="fas fa-rotate-left flex-1 text-center text-2xl hover:bg-background-light cursor-pointer transition-colors duration-300"></i> - <div class="w-1 bg-background-light grow-0"></div> - <button class="flex-1" type="submit"> - <i onclick="setHrefParams();" class="fas fa-magnifying-glass text-center text-2xl hover:bg-background-light cursor-pointer transition-colors duration-300"></i> - </button> - </div> - </form> + </fieldset> + </div> + <hr class="border-t-2 border-dotted border-main-hard my-0.5"> + <div class="flex flex-row bg-background-dark my-2 p-0.5 rounded-1 justify-items-center"> + <i onclick="defaultSearchParams(); cleanHrefParams();" class="fas fa-rotate-left flex-1 text-center text-2xl hover:bg-background-light cursor-pointer transition-colors duration-300"></i> + <div class="w-1 bg-background-light grow-0"></div> + <button class="flex-1" type="submit"> + <i onclick="setHrefParams();" class="fas fa-magnifying-glass text-center text-2xl hover:bg-background-light cursor-pointer transition-colors duration-300"></i> + </button> + </div> + </form> + </div> <div class="w-[0.5dvh] border-r-2 border-dotted border-main-hard bg-background-dark"></div> diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html index 6b6cd6b..c81406f 100644 --- a/views/pages/blog-page.html +++ b/views/pages/blog-page.html @@ -21,9 +21,9 @@ function initLocationMap(id, x, y, relativeErrorMeters = 0) { map = L.map(id).setView([x, y], 8); - L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 18, - attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' + L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', { + maxZoom: 20, + attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); if (relativeErrorMeters != 0) { @@ -63,6 +63,6 @@ </div> {{ end }} -{{ define "footer" }} +{{ define "header" }} <div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div> {{ end }} diff --git a/views/pages/global-map.html b/views/pages/global-map.html index 8961aab..7d788d6 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -44,22 +44,22 @@ <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-fit h-auto"> <div class="text-[3rem] flex flex-col gap-0 relative z-1001"> - <a href="./" class="toolbar-button w-fit h-fit" draggable="false"> + <a href="./" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a href="/{{ .Lang }}" class="toolbar-button w-fit h-fit" draggable="false"> + <a href="/{{ .Lang }}" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a href="/{{ .Lang }}/blog" class="toolbar-button w-fit h-fit" draggable="false"> + <a href="/{{ .Lang }}/blog" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a href="/{{ .Lang }}/map" class="toolbar-button w-fit h-fit" draggable="false"> + <a href="/{{ .Lang }}/map" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="toolbar-button w-fit h-fit" draggable="false"> + <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar"></i> </div> - <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="toolbar-button w-fit h-fit" draggable="false"> + <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar"></i> </a> </div> @@ -230,9 +230,9 @@ function initLocationMap() { map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4); - L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 18, - attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', + L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', { + maxZoom: 20, + attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', zoomControl: false }).addTo(map); diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html index 8d555da..8da52a6 100644 --- a/views/partials/blog-page-like-button.html +++ b/views/partials/blog-page-like-button.html @@ -1,6 +1,5 @@ -<button - hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click" - class="text-sm/[0.9] shrink-0 font-andika text-left px-1 py-0.5 {{ if .Liked }}bg-main-soft hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-hard hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-2 border-background-dark"> - <i class="fas fa-thumbs-up w-3 h-3"></i> - <span class="italic ml-0.5 text-background-light">({{ .LikedCount }})</span> +<button hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click" + class="themed-button themed-button-like flex flex-col shrink-0 w-fit h-fit mr-2 my-auto{{ if .Liked }} active{{ end }}"> + <i class="fas fa-thumbs-up w-8 h-fit py-0.5 content-center text-center"></i> + <div class="h-fit px-0.5 content-center bg-(--background-medium-color) text-(--main-hard-color)">{{ .LikedCount }}</div> </button>
\ No newline at end of file diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html index 83a1058..e019d3b 100644 --- a/views/partials/general-page-header.html +++ b/views/partials/general-page-header.html @@ -1,5 +1,5 @@ <title>{{ .Title }} // SAYA TODAY</title> <div class="flex flex-row mb-2"> - <p class="text-4xl font-andika font-light italic text-shadow-[0_2px_2px_var(--main-soft-color)] text-left mt-auto">{{ .Title }}</p> -</div> -{{ block "header" . }}{{ end }} + {{ block "header" . }}{{ end }} + <p class="text-4xl font-andika font-light italic text-shadow-[0_2px_2px_var(--main-soft-color)] text-left my-auto">{{ .Title }}</p> +</div>
\ No newline at end of file |