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>
 
 <style>
  :global(body) {

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

@@ -17,7 +17,9 @@
  }
 </script>
 
+<Container class="mt-2 mb-5">
     <Row>
         <MyTodo class="col-6" />
         <MyExercices class="col-6" />
     </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,11 +17,15 @@
  }
 </script>
 
+<Container class="mt-2 mb-5">
     <h2>
         Étapes
     </h2>
 
     {#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>
@@ -49,3 +55,4 @@
             </tbody>
         </Table>
     {/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>
 
+<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>

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

@@ -4,6 +4,7 @@
  import { themes } from '$lib/stores/themes';
 
  import {
+     Container,
      Table,
  } from 'sveltestrap';
 
@@ -17,6 +18,7 @@
  }
 </script>
 
+<Container class="mt-2 mb-5">
     <h2>
         Scénarios
     </h2>
@@ -52,3 +54,4 @@
             {/each}
         </tbody>
     </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,7 +20,11 @@
  }
 </script>
 
+<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
@@ -74,3 +79,4 @@
             </Table>
         {/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>
 
+<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>