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 {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
@ -16,6 +17,7 @@
|
||||
import ExerciceHints from '$lib/components/ExerciceHints.svelte';
|
||||
import ExerciceSolved from '$lib/components/ExerciceSolved.svelte';
|
||||
import ExerciceVideo from '$lib/components/ExerciceVideo.svelte';
|
||||
import ResolutionModal from '$lib/components/ResolutionModal.svelte';
|
||||
|
||||
import { current_exercice } from '$lib/stores/exercices';
|
||||
import { my } from '$lib/stores/my';
|
||||
@ -23,6 +25,7 @@
|
||||
import { settings } from '$lib/stores/settings';
|
||||
|
||||
let solved = {};
|
||||
let openResolution = false;
|
||||
</script>
|
||||
|
||||
{#if $current_exercice}
|
||||
@ -184,9 +187,17 @@
|
||||
{/if}
|
||||
{#if $my.exercices[$current_exercice.id].resolution || $my.exercices[$current_exercice.id].video_uri}
|
||||
<Card class="border-success mb-2">
|
||||
<CardHeader class="bg-success text-light">
|
||||
<Icon name="laptop-fill" />
|
||||
Solution du défi
|
||||
<CardHeader class="bg-success text-light d-flex justify-content-between">
|
||||
<div>
|
||||
<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>
|
||||
{#if $my.exercices[$current_exercice.id].resolution}
|
||||
<CardBody>
|
||||
|
Loading…
Reference in New Issue
Block a user