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

New settings hide_header to hide the top banner with partners and countdown

Browse Source
This commit is contained in:
nemunaire 2023-05-12 15:29:38 +02:00
parent aad95f1e53
commit 37dde01444
5 changed files with 97 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
admin/static/views/settings.html
View File

@ -248,6 +248,13 @@
</label>
</div>
<div class="form-check">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" ng-model="config.hide_header">
<span class="custom-control-label" ng-class="{'text-primary font-weight-bold': !config.hide_header != !dist_config.hide_header}">Cacher l'en-tête du compte à rebours</span>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox"ng-model="config.disabledsubmitbutton" ng-change="submitButtonStateChange()">

74
frontend/ui/src/lib/components/Clock.svelte Normal file
View File

@ -0,0 +1,74 @@
<script>
import {
ButtonGroup,
Icon,
} from 'sveltestrap';
import { time } from '$lib/stores/settings.js';
export { className as class };
let className = '';
</script>
<div
class="clock ${className}"
class:expired={$time.expired}
class:end={$time.end}
class:wait={$time.startIn}
>
{#if $time.seconds}
<span id="hours">
{$time.hours}
</span>
<span class="point">
:
</span>
<span id="minutes">
{$time.minutes}
</span>
<span class="point">
:
</span>
<span id="seconds">
{$time.seconds}
</span>
{:else}
Chargement
{/if}
</div>
<style>
.clock:not(.expired):not(.wait) .point, .clock.expired {
transition: color text-shadow 1s;
position: relative;
animation: clockanim 1s ease infinite;
-moz-animation: clockanim 1s ease infinite;
-webkit-animation: clockanim 1s ease infinite;
}
.clock.wait .point {
transition: color text-shadow 1s;
position: relative;
animation: clockwait 1s ease infinite;
-moz-animation: clockwait 1s ease infinite;
-webkit-animation: clockwait 1s ease infinite;
}
.end {
color: #e64143;
}
.point {
text-shadow: 0 0 20px #4eaee6;
}
.end .point {
text-shadow: 0 0 20px #e64143;
}
@keyframes clockanim {
0% { opacity: 1.0; }
50% { opacity: 0; }
100% { opacity: 1.0; }
}
@keyframes clockwait {
0% { text-shadow: 0 0 20px #A6D6F2; }
50% { text-shadow: 0 0 2px #A6D6F2; }
100% { text-shadow: 0 0 20px #A6D6F2; }
}
</style>

10
frontend/ui/src/lib/components/Header.svelte
View File

@ -24,6 +24,7 @@
import { teams } from '$lib/stores/teams.js';
import { settings, time } from '$lib/stores/settings.js';
import Clock from './Clock.svelte';
import HeaderClock from './HeaderClock.svelte';
import HeaderIssues from './HeaderIssues.svelte';
import HeaderPartners from './HeaderPartners.svelte';
@ -37,6 +38,7 @@
}
</script>
{#if !$settings.hide_header}
<div class="container-fluid bg-dark" style="max-height: 15vh;">
<div style="height: 100%; max-height: inherit; width: 98%; position: absolute">
<Container class="d-flex justify-content-center align-items-center text-light" style="height: 100%; max-height: inherit">
@ -54,6 +56,7 @@
<HeaderPartners />
</Container>
</div>
{/if}
<div class="sticky-top">
<Navbar color="dark" dark expand="md">
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
@ -67,7 +70,7 @@
</NavItem>
<NavThemes />
<NavTags />
{#if $settings && $settings.end - $settings.start >= 0 && $teams && Object.keys($teams).length}
{#if $settings && $settings.start >= $settings.recvTime && $teams && Object.keys($teams).length}
<NavItem>
<NavLink href="rank">
<Icon name="sort-down" />
@ -83,6 +86,11 @@
</NavLink>
</NavItem>
</Nav>
{#if $settings.hide_header && $settings.end - $settings.start > 0}
<Nav class="ms-auto text-light display-6" navbar>
<Clock />
</Nav>
{/if}
<Nav class="ms-auto text-light" navbar>
{#if $my && $my.team_id}
<NavItem>

68
frontend/ui/src/lib/components/HeaderClock.svelte
View File

@ -4,38 +4,16 @@
Icon,
} from 'sveltestrap';
import Clock from './Clock.svelte';
import { challengeInfo } from '$lib/stores/challengeinfo.js';
import { settings, time } from '$lib/stores/settings.js';
import { settings } from '$lib/stores/settings.js';
</script>
{#if $settings && $settings.end}
{#if $settings.end - $settings.start > 0}
<div
class="clock display-2 text-end text-md-center"
class:expired={$time.expired}
class:end={$time.end}
class:wait={$time.startIn}
>
{#if $time.seconds}
<span id="hours">
{$time.hours}
</span>
<span class="point">
:
</span>
<span id="minutes">
{$time.minutes}
</span>
<span class="point">
:
</span>
<span id="seconds">
{$time.seconds}
</span>
{:else}
Chargement
{/if}
</div>
<Clock
class="display-2 text-end text-md-center"
/>
{:else}
<div class="d-flex h-100 justify-content-center align-items-center">
<ButtonGroup size="lg">
@ -73,39 +51,3 @@
</h1>
</div>
{/if}
<style>
.clock:not(.expired):not(.wait) .point, .clock.expired {
transition: color text-shadow 1s;
position: relative;
animation: clockanim 1s ease infinite;
-moz-animation: clockanim 1s ease infinite;
-webkit-animation: clockanim 1s ease infinite;
}
.clock.wait .point {
transition: color text-shadow 1s;
position: relative;
animation: clockwait 1s ease infinite;
-moz-animation: clockwait 1s ease infinite;
-webkit-animation: clockwait 1s ease infinite;
}
.end {
color: #e64143;
}
.point {
text-shadow: 0 0 20px #4eaee6;
}
.end .point {
text-shadow: 0 0 20px #e64143;
}
@keyframes clockanim {
0% { opacity: 1.0; }
50% { opacity: 0; }
100% { opacity: 1.0; }
}
@keyframes clockwait {
0% { text-shadow: 0 0 20px #A6D6F2; }
50% { text-shadow: 0 0 2px #A6D6F2; }
100% { text-shadow: 0 0 20px #A6D6F2; }
}
</style>

2
settings/settings.go
View File

@ -87,6 +87,8 @@ type Settings struct {
GlobalTopMessage string `json:"globaltopmessage,omitempty"`
// GlobalTopMessageVariant control the variant/color of the previous message.
GlobalTopMessageVariant string `json:"globaltopmessagevariant,omitempty"`
// HideHeader will hide the countdown and partners block on front pages.
HideHeader bool `json:"hide_header,omitempty"`
}
// ExistsSettings checks if the settings file can by found at the given path.