fic/server
Archived
1
0
Fork 0
Code Issues Pull requests 10 Releases Wiki Activity

ui: Add theme from bootswatch
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
nemunaire 2021-09-01 01:47:44 +02:00
commit 83a47af391
18 changed files with 355 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/ui/src/components/ExerciceDownloads.svelte
View file

@ -13,8 +13,8 @@
</script>
{#if files.length}
<Card class="mb-2">
<CardHeader>
<Card class="mb-4">
<CardHeader class="text-light">
<Icon name="download" />
Téléchargements
</CardHeader>
@ -23,18 +23,19 @@
<strong>Attention&nbsp;:</strong> puisqu'il s'agit de captures effectuées dans le but de découvrir si des actes malveillants ont été commis, les contenus qui sont téléchargeables <em>peuvent</em> contenir du contenu malveillant&nbsp;!
</CardText>
</CardBody>
<ListGroup>
<ListGroup class="border-dark">
{#each files as file, index}
<ListGroupItem tag="a" href="{file.path}" target="_self" class="d-flex">
<h1><Icon name="arrow-down-circle" /></h1>
<div>
<ListGroupItem tag="a" href="{file.path}" target="_self" class="d-flex align-items-center">
<h1 class="me-3">
<Icon name="arrow-down-circle" />
</h1>
<div style="min-width: 0">
<h4 class="fw-bold"><samp>{file.name}</samp></h4>
<nobr>
Taille&nbsp;:
<span title="{file.size} octets">{file.size}</span>
</nobr>
&ndash;
<nobr>
<nobr class="d-block text-truncate">
<span title="blake2.net">b2sum</span>&nbsp;:
<samp class="cksum" title="{file.checksum}">{file.checksum}</samp>
</nobr>

12
frontend/ui/src/components/ExerciceFlags.svelte
View file

@ -94,7 +94,7 @@
</script>
<Card class="border-danger mb-2">
<CardHeader class="bg-danger">
<CardHeader class="bg-danger text-light">
<Icon name="flag-fill" />
Faire son rapport
</CardHeader>
@ -109,20 +109,20 @@
</Progress>
{/if}
{#if exercice.tries || exercice.submitted || sberr}
<ListGroup>
<ListGroup class="border-dark">
{#if exercice.solved_time && exercice.tries}
<ListGroupItem class="text-warning">
<ListGroupItem class="text-warning rounded-0">
{exercice.tries} {exercice.tries==1?"tentative effectuée":"tentatives effectuées"}.
Dernière solution envoyée à {exercice.solved_time}.
</ListGroupItem>
{/if}
{#if exercice.solve_dist}
<ListGroupItem>
<ListGroupItem class="rounded-0">
{exercice.solve_dist} {exercice.solve_dist == 1?"réponse erronée":"réponses erronées"}.
</ListGroupItem>
{/if}
{#if exercice.submitted || sberr}
<ListGroupItem class="{messageClass}">
<ListGroupItem class="{messageClass} rounded-0">
{#if !sberr}
<strong>Votre solution a bien été envoyée !</strong>
{:else}
@ -131,7 +131,7 @@
</ListGroupItem>
{/if}
{#if timeouted}
<ListGroupItem class="text-danger">
<ListGroupItem class="text-danger rounded-0">
<strong>Oops</strong>
La requête a dépassé le délai d'attente. Vous devriez réessayer dans quelques instant&hellip;
</ListGroupItem>

6
frontend/ui/src/components/ExerciceHints.svelte
View file

@ -86,13 +86,13 @@
{/if}
<ListGroup>
{#each hints as hint (hint.id)}
<ListGroupItem tag="a" href="{hint.file}" target="_self" class="d-flex">
<ListGroupItem tag="a" href="{hint.file}" target="_self" class="d-flex align-items-center">
{#if hint.file}
<h1 class="me-3">
<Icon name="arrow-down-circle" />
</h1>
{/if}
<div>
<div class="flex-fill" style="min-width:0">
{#if !(hint.content || hint.file)}
<button type="button" on:click={openHint(hint)} class="float-end btn btn-info" class:disabled={hints_submitted[hint.id]}>
{#if hints_submitted[hint.id]}
@ -111,7 +111,7 @@
{/if}
<h4 class="fw-bold">{hint.title}</h4>
{#if hint.file}
<p>
<p style="overflow-x: auto">
Cliquez ici pour télécharger l'indice.<br>
b2sum&nbsp;:
<samp class="cksum" title="Somme de contrôle BLAKE2b : {hint.content}">{hint.content}</samp>

2
frontend/ui/src/components/ExerciceSolved.svelte
View file

@ -14,7 +14,7 @@
</script>
<Card class="border-success mb-2">
<CardHeader class="bg-success">
<CardHeader class="bg-success text-light">
<Icon name="flag-fill" />
Défi réussi&nbsp;!
</CardHeader>

2
frontend/ui/src/components/ExerciceVideo.svelte
View file

@ -13,7 +13,7 @@
</script>
<Card class="border-success mb-2">
<CardHeader class="bg-success">
<CardHeader class="bg-success text-light">
<Icon name="laptop-fill" />
Solution du défi
</CardHeader>

4
frontend/ui/src/components/Header.svelte
View file

@ -51,7 +51,8 @@
<HeaderPartners />
</Container>
</div>
<Navbar class="sticky-top" color="dark" dark expand="md">
<div class="sticky-top">
<Navbar color="dark" dark expand="md">
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
<Nav navbar>
@ -103,6 +104,7 @@
</Collapse>
</Navbar>
<Progress value={$time.progression * 100} color="info" style="height: 5px; border-radius: 0;" />
</div>
<style>
.teamname {

70
frontend/ui/src/components/ThemeNav.svelte
View file

@ -12,42 +12,40 @@
export let exercice = {};
</script>
<Card body class="mb-3" color="dark">
<Breadcrumb listClassName="mb-0">
{#each Object.keys(theme.exercices) as k, index}
<BreadcrumbItem active={k == exercice.id}>
{#if k == exercice.id}
<strong class="text-info">
{theme.exercices[k].title}
{#if theme.exercices[k].curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" />
{/if}
{#if $my && $my.team_id && $my.exercices[k] && $my.exercices[k].solved}
<Icon name="check" class="text-success" aria-hidden="true" />
{/if}
</strong>
{:else if $my && $my.exercices[k]}
<a href="/{theme.urlid}/{theme.exercices[k].urlid}" class:text-success={$my.exercices[k].solved}>
{theme.exercices[k].title}
{#if theme.exercices[k].curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" />
{/if}
{#if $my.team_id && $my.exercices[k].solved}
<Icon name="check" class="text-success" aria-hidden="true" />
{/if}
</a>
{:else}
<span class="text-muted">
{theme.exercices[k].title}
{#if theme.exercices[k].curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" />
{/if}
</span>
{/if}
</BreadcrumbItem>
{/each}
</Breadcrumb>
</Card>
<Breadcrumb listClassName="mb-0 px-3 py-2">
{#each Object.keys(theme.exercices) as k, index}
<BreadcrumbItem active={k == exercice.id}>
{#if k == exercice.id}
<strong class="text-info">
{theme.exercices[k].title}
{#if theme.exercices[k].curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" />
{/if}
{#if $my && $my.team_id && $my.exercices[k] && $my.exercices[k].solved}
<Icon name="check" class="text-success" aria-hidden="true" />
{/if}
</strong>
{:else if $my && $my.exercices[k]}
<a href="/{theme.urlid}/{theme.exercices[k].urlid}" class:text-success={$my.exercices[k].solved}>
{theme.exercices[k].title}
{#if theme.exercices[k].curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" />
{/if}
{#if $my.team_id && $my.exercices[k].solved}
<Icon name="check" class="text-success" aria-hidden="true" />
{/if}
</a>
{:else}
<span class="text-muted">
{theme.exercices[k].title}
{#if theme.exercices[k].curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" />
{/if}
</span>
{/if}
</BreadcrumbItem>
{/each}
</Breadcrumb>
<style>
a {

24
frontend/ui/src/fic.scss Normal file
View file

@ -0,0 +1,24 @@
// Your variable overrides can go here, e.g.:
// $h1-font-size: 3rem;
$white: white;
$gray-500: #999;
$gray-900: #272b30;
$body-bg: $white;
$old-body-bg: $gray-900;
$dropdown-link-hover-bg: $old-body-bg;
$card-bg: lighten($old-body-bg, 5%);
$popover-bg: lighten($old-body-bg, 5%);
$toast-background-color: lighten($old-body-bg, 5%);
$modal-content-bg: lighten($old-body-bg, 5%);
$list-group-bg: lighten($old-body-bg, 5%);
$list-group-hover-bg: lighten($old-body-bg, 10%);
$list-group-border-color: rgba($gray-500, .6);
$enable-print-styles: false;
@import "bootswatch/dist/slate/_variables";
@import "bootstrap/scss/bootstrap";
@import "bootswatch/dist/slate/_bootswatch";

19
frontend/ui/src/routes/[theme]/[exercice].svelte
View file

@ -142,16 +142,22 @@
{#if $my && $my.exercices[exercice.id]}
<Row class="mt-4">
{#if $my.exercices[exercice.id].files || $my.exercices[exercice.id].hints}
<Col lg class="mb-5">
<Col lg="6" class="mb-5">
{#if $my.exercices[exercice.id].files}
<ExerciceDownloads files={$my.exercices[exercice.id].files} />
<ExerciceDownloads
files={$my.exercices[exercice.id].files}
/>
{/if}
{#if $my.exercices[exercice.id].hints}
<ExerciceHints hints={$my.exercices[exercice.id].hints} />
<ExerciceHints
{refresh_my}
exercice={$my.exercices[exercice.id]}
hints={$my.exercices[exercice.id].hints}
/>
{/if}
</Col>
{/if}
<Col lg class="mb-5">
<Col lg="6" class="mb-5">
{#if !$my.exercices[exercice.id].solved_rank}
<ExerciceFlags
{refresh_my}
@ -160,7 +166,10 @@
flags={$my.exercices[exercice.id].flags}
/>
{:else}
<ExerciceSolved theme={theme} exercice={$my.exercices[exercice.id]} />
<ExerciceSolved
{theme}
exercice={$my.exercices[exercice.id]}
/>
{/if}
{#if $my.exercices[exercice.id].video_uri}
<ExerciceVideo uri={$my.exercices[exercice.id].video_uri} />

4
frontend/ui/src/routes/[theme]/index.svelte
View file

@ -38,13 +38,13 @@
on:click={goto(`/${theme.urlid}/${theme.exercices[k].urlid}`)}
>
<div class="row">
<div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[k] && $my.exercices[k].solved_rank ? '62c462' : 'aaa'}">
<div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[k] && $my.exercices[k].solved_rank ? '62c462' : 'bbb'}">
</div>
<div class="col-10">
<div style="position: absolute; margin-left: calc(var(--bs-gutter-x) * -.5 - 15px); margin-top: -0.5rem;">
<svg style="height: 50px; width: 23px;">
<rect
style="fill:#{$my && $my.exercices[k] && (index < 1 || $my.exercices[Object.keys(theme.exercices)[index-1]].solved_rank) ? '62c462' : 'aaa'}"
style="fill:#{$my && $my.exercices[k] && (index < 1 || ($my.exercices[Object.keys(theme.exercices)[index-1]] && $my.exercices[Object.keys(theme.exercices)[index-1]].solved_rank)) ? '62c462' : 'bbb'}"
width="5"
height="30"
x="10"

2
frontend/ui/src/routes/__layout.svelte
View file

@ -105,7 +105,7 @@
</script>
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import '../fic.scss'
import "bootstrap-icons/font/bootstrap-icons.css";
import {

2
frontend/ui/src/routes/edit.svelte
View file

@ -29,7 +29,7 @@
</script>
<Container class="my-3">
<h1>
<h1 class="text-dark">
Votre équipe
{#if $my}
<small class="text-muted">{$my.name}</small>

2
frontend/ui/src/routes/rank.svelte
View file

@ -20,7 +20,7 @@
</script>
<Container fluid class="my-3">
<h1>
<h1 class="text-dark">
{$settings.title}
<small class="text-muted">Classement</small>
</h1>

2
frontend/ui/src/routes/rules.svelte
View file

@ -10,7 +10,7 @@
</script>
<Container class="my-3">
<h1>
<h1 class="text-dark">
{$settings.title}
<small class="text-muted">Règles générales</small>
</h1>

2
frontend/ui/src/routes/tags/[tag].svelte
View file

@ -45,7 +45,7 @@
</script>
<Container class="mt-3">
<h1>
<h1 class="text-dark">
Challenges <em>{tag}</em>
</h1>