frontend: Visual improvements

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

View File

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

View File

@ -64,13 +64,13 @@
<Nav navbar>
<NavItem>
<NavLink href=".">
<Icon name="box-seam" />
<Icon name="house" />
Accueil
</NavLink>
</NavItem>
<NavThemes />
<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>
<NavLink href="rank">
<Icon name="sort-down" />

View File

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

View File

@ -98,7 +98,7 @@
{@const exercice = item.exercice}
<CardTheme
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}
{exercice}
on:click={goto(`${theme.urlid}/${exercice.urlid}`)}
@ -106,7 +106,7 @@
{:else}
{@const th = item.theme}
<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}
color={item.color ? item.color : "dark"}
on:click={goto(`${th.urlid}`)}

View File

@ -30,7 +30,7 @@
>
<CardTheme
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}
{exercice}
on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)}

View File

@ -51,7 +51,8 @@
</script>
{#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}
<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)">
@ -86,7 +87,8 @@
</Alert>
{/if}
{/if}
<hr class="mt-0 mb-4">
</CardBody>
<CardBody>
<Row>
<Col>
<Row class="level" cols={{xs:2, md:3, xl:4}}>
@ -210,6 +212,7 @@
</Col>
{/if}
</Row>
</CardBody>
</Card>
{#if $my && $my.exercices[$current_exercice.id]}