qa: Add spinners and rework
This commit is contained in:
parent
1aa82bb2ef
commit
8758effc99
8 changed files with 199 additions and 133 deletions
|
|
@ -37,8 +37,18 @@
|
|||
</h2>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">{@html exercice.statement}</div>
|
||||
<div class="col-md-6">{@html exercice.overview}</div>
|
||||
<div
|
||||
class="col-md-6"
|
||||
style="overflow-y: auto; max-height: 50vh;"
|
||||
>
|
||||
{@html exercice.statement}
|
||||
</div>
|
||||
<div
|
||||
class="col-md-6"
|
||||
style="overflow-y: auto; max-height: 50vh;"
|
||||
>
|
||||
{@html exercice.overview}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@
|
|||
<Styles />
|
||||
|
||||
<Header />
|
||||
<Container class="mt-2 mb-5">
|
||||
<slot></slot>
|
||||
</Container>
|
||||
<slot></slot>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
<MyTodo class="col-6" />
|
||||
<MyExercices class="col-6" />
|
||||
</Row>
|
||||
<Container class="mt-2 mb-5">
|
||||
<Row>
|
||||
<MyTodo class="col-6" />
|
||||
<MyExercices class="col-6" />
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
import { goto } from '$app/navigation';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Icon,
|
||||
Spinner,
|
||||
Table,
|
||||
} from 'sveltestrap';
|
||||
|
||||
|
|
@ -15,37 +17,42 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<h2>
|
||||
Étapes
|
||||
</h2>
|
||||
<Container class="mt-2 mb-5">
|
||||
<h2>
|
||||
Étapes
|
||||
</h2>
|
||||
|
||||
{#await getExercices()}
|
||||
{:then exercices}
|
||||
<p>
|
||||
<input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
|
||||
</p>
|
||||
<Table class="table-hover table-bordered table-striped table-sm">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
{#each fieldsExercices as field}
|
||||
<th>
|
||||
{field}
|
||||
</th>
|
||||
{#await getExercices()}
|
||||
<div class="d-flex justify-content-center">
|
||||
<Spinner size="lg" />
|
||||
</div>
|
||||
{:then exercices}
|
||||
<p>
|
||||
<input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
|
||||
</p>
|
||||
<Table class="table-hover table-bordered table-striped table-sm">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
{#each fieldsExercices as field}
|
||||
<th>
|
||||
{field}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each exercices as exercice (exercice.id)}
|
||||
{#if exercice.title.indexOf(query) >= 0}
|
||||
<tr on:click={() => show(exercice.id)}>
|
||||
{#each fieldsExercices as field}
|
||||
<td>
|
||||
{@html exercice[field]}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each exercices as exercice (exercice.id)}
|
||||
{#if exercice.title.indexOf(query) >= 0}
|
||||
<tr on:click={() => show(exercice.id)}>
|
||||
{#each fieldsExercices as field}
|
||||
<td>
|
||||
{@html exercice[field]}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</Table>
|
||||
{/await}
|
||||
</tbody>
|
||||
</Table>
|
||||
{/await}
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,33 @@
|
|||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Icon,
|
||||
Spinner,
|
||||
} from 'sveltestrap';
|
||||
|
||||
import { getExercice } from '$lib/exercices';
|
||||
import ExerciceQA from '$lib/components/ExerciceQA.svelte';
|
||||
|
||||
let exerciceP = getExercice($page.params.eid);
|
||||
</script>
|
||||
|
||||
{#await exerciceP}
|
||||
{:then exercice}
|
||||
<ExerciceQA {exercice} />
|
||||
{/await}
|
||||
<Container class="mt-2 mb-5">
|
||||
{#await exerciceP}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { themes } from '$lib/stores/themes';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Table,
|
||||
} from 'sveltestrap';
|
||||
|
||||
|
|
@ -17,38 +18,40 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<h2>
|
||||
Scénarios
|
||||
</h2>
|
||||
<Container class="mt-2 mb-5">
|
||||
<h2>
|
||||
Scénarios
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<input type="search" class="form-control" placeholder="Filtrer" bind:value={query} autofocus>
|
||||
</p>
|
||||
<Table class="table-hover table-bordered table-striped">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
{#each fields as field}
|
||||
<th>
|
||||
{field}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $themes as theme (theme.id)}
|
||||
{#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>
|
||||
{#if field == "image"}
|
||||
<img src={"../files" + theme[field]} alt="Image du scénario">
|
||||
{:else}
|
||||
{@html theme[field]}
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</Table>
|
||||
<p>
|
||||
<input type="search" class="form-control" placeholder="Filtrer" bind:value={query} autofocus>
|
||||
</p>
|
||||
<Table class="table-hover table-bordered table-striped">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
{#each fields as field}
|
||||
<th>
|
||||
{field}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $themes as theme (theme.id)}
|
||||
{#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>
|
||||
{#if field == "image"}
|
||||
<img src={"../files" + theme[field]} alt="Image du scénario">
|
||||
{:else}
|
||||
{@html theme[field]}
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
Container,
|
||||
Icon,
|
||||
Table,
|
||||
Spinner,
|
||||
} from 'sveltestrap';
|
||||
|
||||
import { getTheme } from '$lib/themes';
|
||||
|
|
@ -19,58 +20,63 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#await getTheme($page.params.tid)}
|
||||
{:then theme}
|
||||
<div class="d-flex align-items-end">
|
||||
<Button
|
||||
class="align-self-center"
|
||||
color="link"
|
||||
on:click={() => goto('themes/')}
|
||||
>
|
||||
<Icon name="chevron-left" />
|
||||
</Button>
|
||||
<h2>
|
||||
{theme.name}
|
||||
</h2>
|
||||
<small class="m-2 mb-3 text-muted text-truncate">{@html theme.authors}</small>
|
||||
</div>
|
||||
<Container class="mt-2 mb-5">
|
||||
{#await getTheme($page.params.tid)}
|
||||
<div class="d-flex justify-content-center">
|
||||
<Spinner size="lg" />
|
||||
</div>
|
||||
{:then theme}
|
||||
<div class="d-flex align-items-end">
|
||||
<Button
|
||||
class="align-self-center"
|
||||
color="link"
|
||||
on:click={() => goto('themes/')}
|
||||
>
|
||||
<Icon name="chevron-left" />
|
||||
</Button>
|
||||
<h2>
|
||||
{theme.name}
|
||||
</h2>
|
||||
<small class="m-2 mb-3 text-muted text-truncate">{@html theme.authors}</small>
|
||||
</div>
|
||||
|
||||
<Container class="text-muted">
|
||||
{@html theme.intro}
|
||||
</Container>
|
||||
<Container class="text-muted">
|
||||
{@html theme.intro}
|
||||
</Container>
|
||||
|
||||
{#await getThemedExercices($page.params.tid)}
|
||||
{:then exercices}
|
||||
<h3>
|
||||
Défis ({exercices.length})
|
||||
</h3>
|
||||
{#await getThemedExercices($page.params.tid)}
|
||||
{:then exercices}
|
||||
<h3>
|
||||
Défis ({exercices.length})
|
||||
</h3>
|
||||
|
||||
<p>
|
||||
<input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
|
||||
</p>
|
||||
<Table class="table-hover table-bordered table-striped table-sm">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
{#each fieldsExercices as field}
|
||||
<th>
|
||||
{field}
|
||||
</th>
|
||||
<p>
|
||||
<input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
|
||||
</p>
|
||||
<Table class="table-hover table-bordered table-striped table-sm">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
{#each fieldsExercices as field}
|
||||
<th>
|
||||
{field}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each exercices as exercice (exercice.id)}
|
||||
{#if exercice.title.indexOf(query) >= 0}
|
||||
<tr on:click={() => show(exercice.id)}>
|
||||
{#each fieldsExercices as field}
|
||||
<td>
|
||||
{@html exercice[field]}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each exercices as exercice (exercice.id)}
|
||||
{#if exercice.title.indexOf(query) >= 0}
|
||||
<tr on:click={() => show(exercice.id)}>
|
||||
{#each fieldsExercices as field}
|
||||
<td>
|
||||
{@html exercice[field]}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</Table>
|
||||
</tbody>
|
||||
</Table>
|
||||
{/await}
|
||||
{/await}
|
||||
{/await}
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,33 @@
|
|||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Icon,
|
||||
Spinner,
|
||||
} from 'sveltestrap';
|
||||
|
||||
import { getThemedExercice } from '$lib/exercices';
|
||||
import ExerciceQA from '$lib/components/ExerciceQA.svelte';
|
||||
|
||||
let exerciceP = getThemedExercice($page.params.tid, $page.params.eid);
|
||||
</script>
|
||||
|
||||
{#await exerciceP}
|
||||
{:then exercice}
|
||||
<ExerciceQA {exercice} />
|
||||
{/await}
|
||||
<Container class="mt-2 mb-5">
|
||||
{#await exerciceP}
|
||||
<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>
|
||||
|
|
|
|||
Reference in a new issue