Now possible to modify user avatar

This commit is contained in:
echarp 2022-12-29 20:47:04 +01:00
parent b712f9b1eb
commit a69e6c702f
11 changed files with 40 additions and 16 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View File

@ -5,6 +5,7 @@ date: 2022-11-07T12:56:40+01:00
ac_create: ac_create:
- /pages/1er-quiz/_index - /pages/1er-quiz/_index
groups: test groups: test
featured_image: ../../assets/users/d10c6d1c-f539-4084-9ff9-95a6305d7278.jpg
--- ---
Bienvenue sur votre page de joueur. Bienvenue sur votre page de joueur.

View File

@ -125,6 +125,7 @@ body.users .ac_choice input[type="radio"]:checked + label.text {
border-radius: 0.2em; border-radius: 0.2em;
} }
aside#actions input#cover,
aside#actions input#file { aside#actions input#file {
display: none; display: none;
} }

View File

@ -1,7 +1,3 @@
// Move up when a page is absent
if (document.head.querySelector('meta[content="/404.html"]'))
document.location.assign('..')
// Add the proper absolute url to invitation link // Add the proper absolute url to invitation link
document.querySelectorAll('aside#actions #invitation') document.querySelectorAll('aside#actions #invitation')
.forEach(elt => elt.href += document.location.href) .forEach(elt => elt.href += document.location.href)
@ -14,7 +10,7 @@ document.querySelectorAll('aside#actions #create')
.forEach(elt => elt.onclick = () => { .forEach(elt => elt.onclick = () => {
const url = `${topSection}/${uuid()}` const url = `${topSection}/${uuid()}`
fetch(`/edit/${url}.create`, { method: 'PUT', body: topSection }) fetch(`/edit/${url}.create`, { credentials: 'include', method: 'PUT', body: topSection })
.then(() => sleep(1)) .then(() => sleep(1))
.then(() => window.location.assign('/' + url)) .then(() => window.location.assign('/' + url))
.catch(error => console.error(`Error creating #{topSection}`, error)) .catch(error => console.error(`Error creating #{topSection}`, error))
@ -30,6 +26,20 @@ document.querySelectorAll('aside#actions #delete')
}) })
document.querySelectorAll('aside#actions input#cover')
.forEach(elt => elt.onchange = () => {
const header = document.querySelector('body > header')
const url = `/assets/users/${uuid()}.${elt.files[0].name.split('.').reverse()[0]}`
const body = `featured_image: ../..${url}`
fetch(`/edit${url}`, { method: 'PUT', body: elt.files[0] })
.then(() => fetch(`${document.body.dataset.editUrl}.prop`, { method: 'PUT', body: body }))
.then(() => header.style.backgroundImage = null)
.then(() => sleep(1))
.then(() => header.style.backgroundImage = `url("../..${url}")`)
.catch(error => console.error(`Error uploading ${elt.files[0].name}`, error))
})
document.querySelectorAll('aside#actions input#file') document.querySelectorAll('aside#actions input#file')
.forEach(elt => elt.onchange = () => .forEach(elt => elt.onchange = () =>
[...elt.files].forEach(file => [...elt.files].forEach(file =>

View File

@ -1,3 +1,7 @@
// Move up when a page is absent
if (document.head.querySelector('meta[content="/404.html"]'))
document.location.assign('..')
document.body.dataset.editUrl = '/edit/' + file.replace('.md', '') document.body.dataset.editUrl = '/edit/' + file.replace('.md', '')
const topSection = window.location.pathname.split('/')[1] const topSection = window.location.pathname.split('/')[1]

View File

@ -7,6 +7,7 @@ pages:
delete: 🗑 Supprimer quiz delete: 🗑 Supprimer quiz
users: users:
create: 👤 Créer un nouveau joueur create: 👤 Créer un nouveau joueur
cover: 🎭 Avatar
delete: 🗑 Supprimer joueur delete: 🗑 Supprimer joueur
send: 📧 Envoyer invitation send: 📧 Envoyer invitation
assets: assets:

View File

@ -1,7 +1,7 @@
{{ define "main" }} {{ define "main" }}
<section class="pa3 pa4-ns nested-copy-line-height"> <section class="pa3 pa4-ns nested-copy-line-height">
<aside id="actions" class="w-30-l mt4-l fr tc"> <aside id="actions" class="w-30-l mt4-l fr tc">
<button class="br-pill pa3 pointer"><label for="file">{{ T (print .Section ".create") }}</label></button> <button class="br-pill f6 link dim pa3 dib white bg-dark-gray pointer"><label for="file">{{ T (print .Section ".create") }}</label></button>
<input id="file" multiple name="file" type="file"/> <input id="file" multiple name="file" type="file"/>
</aside> </aside>

View File

@ -12,11 +12,12 @@
{{ $featured_image := partial "func/GetFeaturedImage.html" . }} {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
<article class="bb b--black-10 w-100 mb4 bg-white pa3-ns flex flex-column flex-row-ns relative"> <article class="bb b--black-10 w-100 mb4 bg-white pa3-ns flex flex-column flex-row-ns relative">
{{ if $featured_image }} {{ if $featured_image }}
<img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}"> <div class="mb4 mb0-ns w-100 w-40-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3-ns" "pr3-ns" }}">
<img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
</div>
{{ else }} {{ else }}
<a class="hero-pill fl w-10-ns bg-black" <a class="hero-pill fl w-10-ns bg-black" href="{{.RelPermalink}}"></a>
href="{{.RelPermalink}}"></a>
{{ end }} {{ end }}
<h1 class="f3 fw1 athelas lh-title mh3"> <h1 class="f3 fw1 athelas lh-title mh3">

View File

@ -3,12 +3,12 @@
<aside id="actions" class="w-30-l mt4-l fr tc"> <aside id="actions" class="w-30-l mt4-l fr tc">
{{ if .Parent.IsHome }} {{ if .Parent.IsHome }}
<button id="create" <button id="create"
class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray pointer"> class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer">
{{ T (print .Section ".create") }} {{ T (print .Section ".create") }}
</button> </button>
{{ else if .Parent.Parent.IsHome }} {{ else if .Parent.Parent.IsHome }}
<button id="delete" <button id="delete"
class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray pointer" class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer"
data-confirm="{{ T (print .Section ".delete") }}?"> data-confirm="{{ T (print .Section ".delete") }}?">
{{ T (print .Section ".delete") }} {{ T (print .Section ".delete") }}
</button> </button>

View File

@ -9,9 +9,9 @@
<img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}"> <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
</a> </a>
</div> </div>
{{ else }} {{ else }}
<a class="hero-pill fl w-10-ns bg-black mr3" <a class="hero-pill fl w-10-ns bg-black mr3" href="{{.RelPermalink}}"></a>
href="{{.RelPermalink}}"></a>
{{ end }} {{ end }}
<div class="blah w-100{{ if $featured_image }} w-60-ns{{ else }} w-90-ns{{ end }}"> <div class="blah w-100{{ if $featured_image }} w-60-ns{{ else }} w-90-ns{{ end }}">

View File

@ -4,18 +4,24 @@
<aside id="actions" class="w-30-l mt4-l fr tc"> <aside id="actions" class="w-30-l mt4-l fr tc">
{{ if .Parent.IsHome }} {{ if .Parent.IsHome }}
<button id="create" <button id="create"
class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray pointer"> class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer">
{{ T (print .Section ".create") }} {{ T (print .Section ".create") }}
</button> </button>
{{ else if .Parent.Parent.IsHome }} {{ else if .Parent.Parent.IsHome }}
<button class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer">
<label for="cover">{{ T (print .Section ".cover") }}</label>
</button>
<input id="cover" name="cover" type="file"/>
<button id="delete" <button id="delete"
class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray pointer" class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer"
data-confirm="{{ T (print .Section ".delete") }}?"> data-confirm="{{ T (print .Section ".delete") }}?">
{{ T (print .Section ".delete") }} {{ T (print .Section ".delete") }}
</button> </button>
<a href="mailto:?subject=invitation&body={{.Content | plainify}}" <a href="mailto:?subject=invitation&body={{.Content | plainify}}"
class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray" class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray"
id="invitation"> id="invitation">
{{ T (print .Section ".send") }} {{ T (print .Section ".send") }}
</a> </a>