ui: New button to expand resolution text in a large modal
This commit is contained in:
parent
5427d3cbf1
commit
d2aa336bf2
26
frontend/ui/src/lib/components/ResolutionModal.svelte
Normal file
26
frontend/ui/src/lib/components/ResolutionModal.svelte
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Icon,
|
||||||
|
Modal,
|
||||||
|
ModalBody,
|
||||||
|
ModalHeader
|
||||||
|
} from 'sveltestrap';
|
||||||
|
const toggle = () => (open = !open);
|
||||||
|
|
||||||
|
export let exercice = null;
|
||||||
|
export let open = false;
|
||||||
|
export let resolution;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal isOpen={open} {toggle} size="xl">
|
||||||
|
<ModalHeader {toggle} class="bg-success text-light">
|
||||||
|
<Icon name="laptop-fill" />
|
||||||
|
Solution du défi
|
||||||
|
{#if exercice}
|
||||||
|
: {exercice.title}
|
||||||
|
{/if}
|
||||||
|
</ModalHeader>
|
||||||
|
<ModalBody>
|
||||||
|
{@html resolution}
|
||||||
|
</ModalBody>
|
||||||
|
</Modal>
|
@ -2,6 +2,7 @@
|
|||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
Badge,
|
Badge,
|
||||||
|
Button,
|
||||||
Card,
|
Card,
|
||||||
CardBody,
|
CardBody,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
@ -16,6 +17,7 @@
|
|||||||
import ExerciceHints from '$lib/components/ExerciceHints.svelte';
|
import ExerciceHints from '$lib/components/ExerciceHints.svelte';
|
||||||
import ExerciceSolved from '$lib/components/ExerciceSolved.svelte';
|
import ExerciceSolved from '$lib/components/ExerciceSolved.svelte';
|
||||||
import ExerciceVideo from '$lib/components/ExerciceVideo.svelte';
|
import ExerciceVideo from '$lib/components/ExerciceVideo.svelte';
|
||||||
|
import ResolutionModal from '$lib/components/ResolutionModal.svelte';
|
||||||
|
|
||||||
import { current_exercice } from '$lib/stores/exercices';
|
import { current_exercice } from '$lib/stores/exercices';
|
||||||
import { my } from '$lib/stores/my';
|
import { my } from '$lib/stores/my';
|
||||||
@ -23,6 +25,7 @@
|
|||||||
import { settings } from '$lib/stores/settings';
|
import { settings } from '$lib/stores/settings';
|
||||||
|
|
||||||
let solved = {};
|
let solved = {};
|
||||||
|
let openResolution = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $current_exercice}
|
{#if $current_exercice}
|
||||||
@ -184,9 +187,17 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{#if $my.exercices[$current_exercice.id].resolution || $my.exercices[$current_exercice.id].video_uri}
|
{#if $my.exercices[$current_exercice.id].resolution || $my.exercices[$current_exercice.id].video_uri}
|
||||||
<Card class="border-success mb-2">
|
<Card class="border-success mb-2">
|
||||||
<CardHeader class="bg-success text-light">
|
<CardHeader class="bg-success text-light d-flex justify-content-between">
|
||||||
<Icon name="laptop-fill" />
|
<div>
|
||||||
Solution du défi
|
<Icon name="laptop-fill" />
|
||||||
|
Solution du défi
|
||||||
|
</div>
|
||||||
|
{#if $my.exercices[$current_exercice.id].resolution}
|
||||||
|
<Button color="success" size="sm" on:click={() => openResolution = true}>
|
||||||
|
<Icon name="arrows-angle-expand" />
|
||||||
|
</Button>
|
||||||
|
<ResolutionModal exercice={$current_exercice} bind:open={openResolution} resolution={$my.exercices[$current_exercice.id].resolution} />
|
||||||
|
{/if}
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
{#if $my.exercices[$current_exercice.id].resolution}
|
{#if $my.exercices[$current_exercice.id].resolution}
|
||||||
<CardBody>
|
<CardBody>
|
||||||
|
Loading…
Reference in New Issue
Block a user