fic/server
2
0
Fork 0
Code Issues Pull Requests 9 Releases Wiki Activity

frontend: Visual improvements

Browse Source
This commit is contained in:
nemunaire 2024-03-17 14:30:12 +01:00
parent 6e5fd70156
commit c082ee43d0
6 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/fic/src/fic.scss
View File

@ -20,6 +20,10 @@ $enable-print-styles: false;
@import "bootstrap/scss/bootstrap"; @import "bootstrap/scss/bootstrap";
@import "bootswatch/dist/slate/_bootswatch"; @import "bootswatch/dist/slate/_bootswatch";
.text-indent p {
text-indent: 1em;
}
p img { p img {
margin: auto; margin: auto;
max-width: 100%; max-width: 100%;

4
frontend/fic/src/lib/components/Header.svelte
View File

@ -64,13 +64,13 @@
<Nav navbar> <Nav navbar>
<NavItem> <NavItem>
<NavLink href="."> <NavLink href=".">
<Icon name="box-seam" /> <Icon name="house" />
Accueil Accueil
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavThemes /> <NavThemes />
<NavTags /> <NavTags />
{#if $settings && $settings.start >= $settings.recvTime && $teams && Object.keys($teams).length} {#if $settings && $settings.end - $settings.start > 0 && $teams && Object.keys($teams).length}
<NavItem> <NavItem>
<NavLink href="rank"> <NavLink href="rank">
<Icon name="sort-down" /> <Icon name="sort-down" />

21
frontend/fic/src/lib/components/NavThemes.svelte
View File

@ -25,18 +25,23 @@
{#if th.id != 0} {#if th.id != 0}
<DropdownItem href="{th.urlid}" active={$current_theme && $current_theme.id == th.id}> <DropdownItem href="{th.urlid}" active={$current_theme && $current_theme.id == th.id}>
{th.name} {th.name}
{#if $my && $my.team_id && th.exercice_count && $myThemes[th.id].exercice_solved >= th.exercice_count}
<Badge color="success" pill>
<Icon name="check" />
</Badge>
{/if}
{#if $max_solved > 1 && th.solved == $max_solved} {#if $max_solved > 1 && th.solved == $max_solved}
<Badge color="danger"> <Badge color="danger" pill>
<Icon name="heart-fill" /> <Icon name="heart-fill" />
</Badge> </Badge>
{/if} {/if}
{#if th.exercice_coeff_max > 1} {#if th.exercice_coeff_max > 1}
<Badge color="success"> <Badge color="warning" pill>
<Icon name="gift-fill" /> <Icon name="gift-fill" />
</Badge> </Badge>
{/if} {/if}
{#if th.locked} {#if th.locked}
<Badge color="light"> <Badge color="secondary" pill>
<Icon name="lock-fill" /> <Icon name="lock-fill" />
</Badge> </Badge>
{/if} {/if}
@ -52,7 +57,7 @@
{#if $themesStore && $themesStore["0"] && $themesStore["0"].exercices} {#if $themesStore && $themesStore["0"] && $themesStore["0"].exercices}
<Dropdown nav inNavbar active={$current_theme && $current_theme && $current_theme.id == 0}> <Dropdown nav inNavbar active={$current_theme && $current_theme && $current_theme.id == 0}>
<DropdownToggle nav caret> <DropdownToggle nav caret>
<Icon name="pencil" /> <Icon name="box-seam" />
Défis Défis
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="niceborder"> <DropdownMenu class="niceborder">
@ -61,17 +66,17 @@
<DropdownItem href="{$themesStore["0"].urlid}/{exercice.urlid}" active={$current_theme && $current_theme.id == 0 && $current_exercice && $current_exercice.id == exercice.id}> <DropdownItem href="{$themesStore["0"].urlid}/{exercice.urlid}" active={$current_theme && $current_theme.id == 0 && $current_exercice && $current_exercice.id == exercice.id}>
{exercice.title} {exercice.title}
{#if exercice.solved} {#if exercice.solved}
<Badge color="secondary"> <Badge color="success" pill>
<Icon name="check" /> <Icon name="check" />
</Badge> </Badge>
{/if} {/if}
{#if exercice.curcoeff > 1} {#if exercice.curcoeff > 1}
<Badge color="success"> <Badge color="warning" pill>
<Icon name="gift-fill" /> <Icon name="gift-fill" />
</Badge> </Badge>
{/if} {/if}
{#if $themesStore["0"].locked || exercice.disabled} {#if $themesStore["0"].locked || exercice.disabled || ($my && !$my.exercices[exercice.id])}
<Badge color="light"> <Badge color="secondary" pill>
<Icon name="lock-fill" /> <Icon name="lock-fill" />
</Badge> </Badge>
{/if} {/if}

4
frontend/fic/src/routes/+page.svelte
View File

@ -98,7 +98,7 @@
{@const exercice = item.exercice} {@const exercice = item.exercice}
<CardTheme <CardTheme
style="opacity: {$my && !$my.exercices[exercice.id] ? 0.6 : 1}" style="opacity: {$my && !$my.exercices[exercice.id] ? 0.6 : 1}"
class="{$my && $my.team_id && exercice.solved?'border-light ':''}{exercice.curcoeff > 1?'border-success ':''}{theme.locked || exercice.disabled || ($my && !$my.exercices[exercice.id])?' border-secondary ':''}" class="{$my && $my.team_id && exercice.solved?'border-success ':''}{exercice.curcoeff > 1?'border-warning ':''}{theme.locked || exercice.disabled || ($my && !$my.exercices[exercice.id])?' border-secondary ':''}"
{theme} {theme}
{exercice} {exercice}
on:click={goto(`${theme.urlid}/${exercice.urlid}`)} on:click={goto(`${theme.urlid}/${exercice.urlid}`)}
@ -106,7 +106,7 @@
{:else} {:else}
{@const th = item.theme} {@const th = item.theme}
<CardTheme <CardTheme
class="{$my && $my.team_id && $myThemes[th.id].exercice_solved > 0?'border-light ':''}{th.exercice_coeff_max > 1?'border-success ':''}{th.locked?' border-secondary ':''}" class="{$my && $my.team_id && $myThemes[th.id].exercice_solved > 0?'border-light ':''}{th.exercice_coeff_max > 1?'border-warning ':''}{th.locked?' border-secondary ':''}"
theme={th} theme={th}
color={item.color ? item.color : "dark"} color={item.color ? item.color : "dark"}
on:click={goto(`${th.urlid}`)} on:click={goto(`${th.urlid}`)}

2
frontend/fic/src/routes/[theme]/+page.svelte
View File

@ -30,7 +30,7 @@
> >
<CardTheme <CardTheme
style="opacity: {$my && !$my.exercices[exercice.id] ? 0.6 : 1}" style="opacity: {$my && !$my.exercices[exercice.id] ? 0.6 : 1}"
class="{$my && $my.team_id && exercice.solved?'border-light ':''}{exercice.curcoeff > 1?'border-success ':''}{$current_theme.locked || exercice.disabled || ($my && !$my.exercices[exercice.id])?' border-secondary ':''}" class="{$my && $my.team_id && exercice.solved?'border-success ':''}{exercice.curcoeff > 1?'border-warning ':''}{$current_theme.locked || exercice.disabled || ($my && !$my.exercices[exercice.id])?' border-secondary ':''}"
theme={$current_theme} theme={$current_theme}
{exercice} {exercice}
on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)} on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)}

7
frontend/fic/src/routes/[theme]/[exercice]/+page.svelte
View File

@ -51,7 +51,8 @@
</script> </script>
{#if $current_exercice} {#if $current_exercice}
<Card body class="niceborder text-indent my-3"> <Card class="niceborder text-indent my-3">
<CardBody class="bg-dark">
{#if $current_theme.locked} {#if $current_theme.locked}
<div style="position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;" class="d-flex justify-content-center align-items-center"> <div style="position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;" class="d-flex justify-content-center align-items-center">
<div style="transform: rotate(-25deg)"> <div style="transform: rotate(-25deg)">
@ -86,7 +87,8 @@
</Alert> </Alert>
{/if} {/if}
{/if} {/if}
<hr class="mt-0 mb-4"> </CardBody>
<CardBody>
<Row> <Row>
<Col> <Col>
<Row class="level" cols={{xs:2, md:3, xl:4}}> <Row class="level" cols={{xs:2, md:3, xl:4}}>
@ -210,6 +212,7 @@
</Col> </Col>
{/if} {/if}
</Row> </Row>
</CardBody>
</Card> </Card>
{#if $my && $my.exercices[$current_exercice.id]} {#if $my && $my.exercices[$current_exercice.id]}