update
This commit is contained in:
1 parent
5e34cb4406
commit
0ab3d53023
3 files changed
+335
-226
No files matched your search
@@ -236,70 +236,72 @@ async function entfernen(user) {
|
||||
<p v-else class="leer">Noch niemand in der Runde.</p>
|
||||
</section>
|
||||
|
||||
<section v-if="host" class="einladung">
|
||||
<h3>Einladung</h3>
|
||||
<p class="erklaerung">
|
||||
Eine Karte zum Verschicken: Datum, Ort, der gezogene Film. Als Bild fürs Handy.
|
||||
</p>
|
||||
<button type="button" class="klein" @click="einladung = true">Einladung erstellen</button>
|
||||
</section>
|
||||
<Einladung v-if="einladung" @zu="einladung = false" />
|
||||
<div v-if="host" class="rechts">
|
||||
<section class="einladung">
|
||||
<h3>Einladung</h3>
|
||||
<p class="erklaerung">
|
||||
Eine Karte zum Verschicken: Datum, Genre, Discord, Webseite. Als Bild fürs Handy.
|
||||
</p>
|
||||
<button type="button" class="klein" @click="einladung = true">Einladung erstellen</button>
|
||||
</section>
|
||||
<Einladung v-if="einladung" @zu="einladung = false" />
|
||||
|
||||
<section v-if="host" class="hostfilm">
|
||||
<h3>Host-Film</h3>
|
||||
<p class="erklaerung">
|
||||
Die Tastenkombination fragt ohne Freischaltung nach diesem Film. Wer ihn anklickt, ist Host
|
||||
— ohne Link.
|
||||
</p>
|
||||
<div class="zeile">
|
||||
<button type="button" class="klein" @click="hostFilmDialog = true">Film setzen</button>
|
||||
<button type="button" class="klein" title="Anzeigen" @click="hostFilmZeigen">👁</button>
|
||||
<button type="button" class="klein" @click="hostFilmSetzen(null)">Aufheben</button>
|
||||
<span v-if="hostFilm" class="film-anzeige">
|
||||
<template v-if="hostFilm.laden">…</template>
|
||||
<template v-else-if="hostFilm.fehler">nicht lesbar</template>
|
||||
<template v-else-if="hostFilm.film"
|
||||
>{{ hostFilm.film.title }} ({{ hostFilm.film.year }})</template
|
||||
>
|
||||
<template v-else>keiner gesetzt</template>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="hostfilm">
|
||||
<h3>Host-Film</h3>
|
||||
<p class="erklaerung">
|
||||
Die Tastenkombination fragt ohne Freischaltung nach diesem Film. Wer ihn anklickt, ist
|
||||
Host — ohne Link.
|
||||
</p>
|
||||
<div class="zeile">
|
||||
<button type="button" class="klein" @click="hostFilmDialog = true">Film setzen</button>
|
||||
<button type="button" class="klein" title="Anzeigen" @click="hostFilmZeigen">👁</button>
|
||||
<button type="button" class="klein" @click="hostFilmSetzen(null)">Aufheben</button>
|
||||
<span v-if="hostFilm" class="film-anzeige">
|
||||
<template v-if="hostFilm.laden">…</template>
|
||||
<template v-else-if="hostFilm.fehler">nicht lesbar</template>
|
||||
<template v-else-if="hostFilm.film"
|
||||
>{{ hostFilm.film.title }} ({{ hostFilm.film.year }})</template
|
||||
>
|
||||
<template v-else>keiner gesetzt</template>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="host" class="aufnahmen">
|
||||
<h3>Aufnahmen</h3>
|
||||
<p v-if="aufnahmenFehler" class="fehler">{{ aufnahmenFehler }}</p>
|
||||
<p v-if="aufnahmen === null" class="leer">Suche Aufnahmen …</p>
|
||||
<p v-else-if="!aufnahmen.length" class="leer">Keine Aufnahmen.</p>
|
||||
<ul v-else>
|
||||
<li v-for="s in aufnahmen" :key="s.start" class="zeile">
|
||||
<span>
|
||||
{{ aufnahmeText(s) }} ·
|
||||
<strong v-if="s.film">{{ s.film.title }}</strong>
|
||||
<em v-else>kein Film</em>
|
||||
</span>
|
||||
<span class="knoepfe">
|
||||
<button type="button" class="klein" @click="filmDialogFuer = s.start">Film</button>
|
||||
<button
|
||||
v-if="s.zugewiesen"
|
||||
type="button"
|
||||
class="klein"
|
||||
@click="filmZuweisen(s.start, null)"
|
||||
>
|
||||
Aufheben
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="klein"
|
||||
:class="{ warnung: loeschFrage === s.start }"
|
||||
@click="aufnahmeLoeschen(s)"
|
||||
>
|
||||
{{ loeschFrage === s.start ? 'Wirklich löschen?' : 'Löschen' }}
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="aufnahmen">
|
||||
<h3>Aufnahmen</h3>
|
||||
<p v-if="aufnahmenFehler" class="fehler">{{ aufnahmenFehler }}</p>
|
||||
<p v-if="aufnahmen === null" class="leer">Suche Aufnahmen …</p>
|
||||
<p v-else-if="!aufnahmen.length" class="leer">Keine Aufnahmen.</p>
|
||||
<ul v-else>
|
||||
<li v-for="s in aufnahmen" :key="s.start" class="zeile">
|
||||
<span>
|
||||
{{ aufnahmeText(s) }} ·
|
||||
<strong v-if="s.film">{{ s.film.title }}</strong>
|
||||
<em v-else>kein Film</em>
|
||||
</span>
|
||||
<span class="knoepfe">
|
||||
<button type="button" class="klein" @click="filmDialogFuer = s.start">Film</button>
|
||||
<button
|
||||
v-if="s.zugewiesen"
|
||||
type="button"
|
||||
class="klein"
|
||||
@click="filmZuweisen(s.start, null)"
|
||||
>
|
||||
Aufheben
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="klein"
|
||||
:class="{ warnung: loeschFrage === s.start }"
|
||||
@click="aufnahmeLoeschen(s)"
|
||||
>
|
||||
{{ loeschFrage === s.start ? 'Wirklich löschen?' : 'Löschen' }}
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="filmDialogFuer" class="hintergrund" @click.self="filmDialogFuer = null">
|
||||
@@ -361,7 +363,28 @@ async function entfernen(user) {
|
||||
|
||||
<style scoped>
|
||||
.verwaltung-tab {
|
||||
max-width: 34rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 2.5rem 3.5rem;
|
||||
align-items: start;
|
||||
max-width: 72rem;
|
||||
}
|
||||
|
||||
/* Mit Host-Rechten: Benutzer links, der Rest rechts */
|
||||
.verwaltung-tab:has(.rechts) {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.rechts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.verwaltung-tab:has(.rechts) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -399,20 +422,21 @@ h3 {
|
||||
}
|
||||
|
||||
.liste {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
list-style: none;
|
||||
background: var(--bg-soft);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.liste li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.55rem 0.85rem;
|
||||
background: var(--bg-soft);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.7rem;
|
||||
}
|
||||
|
||||
.liste li + li {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.zeile {
|
||||
@@ -491,7 +515,7 @@ h3 {
|
||||
}
|
||||
|
||||
.erklaerung {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user