qa: Add spinners and rework

qa/ui/src/lib/components/ExerciceQA.svelte

@@ -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">

qa/ui/src/routes/+layout.svelte

@@ -18,9 +18,7 @@
 <Styles />
 
 <Header />
-<Container class="mt-2 mb-5">
-    <slot></slot>
-</Container>
+<slot></slot>
 
 <style>
  :global(body) {

qa/ui/src/routes/+page.svelte

@@ -17,7 +17,9 @@
  }
 </script>
 
-<Row>
+<Container class="mt-2 mb-5">
+    <Row>
         <MyTodo class="col-6" />
         <MyExercices class="col-6" />
-</Row>
+    </Row>
+</Container>

qa/ui/src/routes/exercices/+page.svelte

@@ -2,7 +2,9 @@
  import { goto } from '$app/navigation';
 
  import {
+     Container,
      Icon,
+     Spinner,
      Table,
  } from 'sveltestrap';
 
@@ -15,12 +17,16 @@
  }
 </script>
 
-<h2>
+<Container class="mt-2 mb-5">
+    <h2>
         Étapes
-</h2>
+    </h2>
 
-{#await getExercices()}
-{:then exercices}
+    {#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>
@@ -48,4 +54,5 @@
                 {/each}
             </tbody>
         </Table>
-{/await}
+    {/await}
+</Container>

qa/ui/src/routes/exercices/[eid]/+page.svelte

@@ -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}
+<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}
+    {/await}
+</Container>

qa/ui/src/routes/themes/+page.svelte

@@ -4,6 +4,7 @@
  import { themes } from '$lib/stores/themes';
 
  import {
+     Container,
      Table,
  } from 'sveltestrap';
 
@@ -17,14 +18,15 @@
  }
 </script>
 
-<h2>
+<Container class="mt-2 mb-5">
+    <h2>
         Scénarios
-</h2>
+    </h2>
 
-<p>
+    <p>
         <input type="search" class="form-control" placeholder="Filtrer" bind:value={query} autofocus>
-</p>
-<Table class="table-hover table-bordered table-striped">
+    </p>
+    <Table class="table-hover table-bordered table-striped">
         <thead class="thead-dark">
             <tr>
                 {#each fields as field}
@@ -51,4 +53,5 @@
                 {/if}
             {/each}
         </tbody>
-</Table>
+    </Table>
+</Container>

qa/ui/src/routes/themes/[tid]/+page.svelte

@@ -7,6 +7,7 @@
      Container,
      Icon,
      Table,
+     Spinner,
  } from 'sveltestrap';
 
  import { getTheme } from '$lib/themes';
@@ -19,8 +20,12 @@
  }
 </script>
 
-{#await getTheme($page.params.tid)}
-{:then theme}
+<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"
@@ -73,4 +78,5 @@
                 </tbody>
             </Table>
         {/await}
-{/await}
+    {/await}
+</Container>

qa/ui/src/routes/themes/[tid]/[eid]/+page.svelte

@@ -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}
+<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}
+    {/await}
+</Container>