qa: Improve design

This commit is contained in:
nemunaire 2022-11-07 03:47:48 +01:00
commit 0e19b59452
19 changed files with 487 additions and 241 deletions

View file

@ -1,4 +1,6 @@
<script>
import '../app.css';
import {
Container,
Styles,
@ -6,9 +8,13 @@
import Header from '$lib/components/Header.svelte';
import { version } from '$lib/stores/auth';
import { view } from '$lib/stores/todo';
version.refresh();
setInterval(version.refresh, 30000);
view.refresh();
setInterval(view.refresh, 60000);
</script>
<svelte:head>

View file

@ -1,6 +1,7 @@
<script>
import {
Alert,
Col,
Container,
Row,
} from 'sveltestrap';
@ -32,7 +33,11 @@
</p>
</Alert>
<Row>
<MyTodo class="col-6" />
<MyExercices class="col-6" />
<Col>
<MyTodo />
</Col>
<Col>
<MyExercices />
</Col>
</Row>
</Container>

View file

@ -47,6 +47,9 @@
{#each fieldsExercices as field}
<td>
{@html exercice[field]}
{#if field == "title" && exercice.wip}
<Icon name="cone-striped" />
{/if}
</td>
{/each}
</tr>

View file

@ -15,19 +15,12 @@
let exerciceP = getExercice($page.params.eid);
</script>
<Container class="mt-2 mb-5">
{#await exerciceP}
{#await exerciceP}
<Container class="mt-2 mb-5">
<div class="d-flex justify-content-center">
<Spinner size="lg" />
</div>
{:then exercice}
<Button
class="float-start"
color="link"
on:click={() => goto('exercices')}
>
<Icon name="chevron-left" />
</Button>
<ExerciceQA {exercice} />
{/await}
</Container>
</Container>
{:then exercice}
<ExerciceQA {exercice} />
{/await}

View file

@ -41,9 +41,9 @@
{#if theme.name.indexOf(query) >= 0 || theme.authors.indexOf(query) >= 0 || theme.intro.indexOf(query) >= 0}
<tr on:click={() => show(theme.id)}>
{#each fields as field}
<td>
<td class:text-end={field == "image"}>
{#if field == "image"}
<img src={"../files" + theme[field]} alt="Image du scénario">
<img src={"../files" + theme[field]} alt="Image du scénario" height="120">
{:else}
{@html theme[field]}
{/if}

View file

@ -40,13 +40,13 @@
<small class="m-2 mb-3 text-muted text-truncate">{@html theme.authors}</small>
</div>
<Container class="text-muted">
<Container class="text-muted" style="overflow-y: auto; max-height: 34vh">
{@html theme.intro}
</Container>
{#await getThemedExercices($page.params.tid)}
{:then exercices}
<h3>
<h3 class="mt-2">
Défis ({exercices.length})
</h3>
@ -70,6 +70,9 @@
{#each fieldsExercices as field}
<td>
{@html exercice[field]}
{#if field == "title" && exercice.wip}
<Icon name="cone-striped" />
{/if}
</td>
{/each}
</tr>

View file

@ -15,19 +15,12 @@
let exerciceP = getThemedExercice($page.params.tid, $page.params.eid);
</script>
<Container class="mt-2 mb-5">
{#await exerciceP}
{#await exerciceP}
<Container class="mt-2 mb-5">
<div class="d-flex justify-content-center">
<Spinner size="lg" />
</div>
{:then exercice}
<Button
class="float-start"
color="link"
on:click={() => goto('themes/' + $page.params.tid)}
>
<Icon name="chevron-left" />
</Button>
<ExerciceQA {exercice} />
{/await}
</Container>
</Container>
{:then exercice}
<ExerciceQA theme_id={$page.params.tid} {exercice} />
{/await}