add background image
All checks were successful
deploy / deploy (push) Successful in 48s

This commit is contained in:
Lee 2023-10-18 04:39:49 +01:00
parent b2fe5751f1
commit c2b5017324
7 changed files with 62 additions and 17 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

@ -7,6 +7,16 @@
transform: rotate(359deg);
}
}
.main-background {
display: none;
height: 100vh;
width: 100vw;
z-index: 0;
left: 0;
top: 0;
}
.tabs,
.pagination-previous,
.pagination-next,

@ -1,6 +1,6 @@
:root {
--background: #222;
--foreground: #252525;
--foreground: #2e2e2e;
--textColor: #eee;
--ppColour: #8992e8;
--alternate: #72a8ff;
@ -15,6 +15,8 @@
--color-behind: rgb(128, 0, 0);
--color-highlight: darkgreen;
--error: red;
--transparency: 0.95;
}
html {
@ -23,7 +25,6 @@ html {
body {
color: var(--textColor);
background-color: var(--background) !important;
margin: 0 auto;
padding: 0 1rem;
min-height: 100vh;
@ -36,10 +37,22 @@ select {
outline: none;
}
.main-background {
position: fixed;
display: block;
background: var(--background-image) !important;
filter: blur(4px) brightness(0.8);
background-size: cover !important;
}
.ssr-page-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
opacity: var(--transparency);
}
.box {

@ -14,7 +14,9 @@
import RankingPage from './pages/Ranking.svelte';
import SearchPage from './pages/Search.svelte';
import TwitchPage from './pages/Twitch.svelte';
import { configStore } from './stores/config';
import createContainerStore from './stores/container';
import { setGlobalCSSValue } from './utils/css';
// When SSR was built (eg: 1 hour ago)
export const buildDateAgo = moment(buildInfo.buildDate, "MMMM Do YYYY, h:mm:ss a").fromNow();
@ -27,8 +29,12 @@
setContext('pageContainer', containerStore);
$: if (mainEl) containerStore.observe(mainEl)
setGlobalCSSValue("background-image", "url(" + $configStore.preferences.backgroundImage + ")")
</script>
<div class="main-background" />
<Router {url}>
<Nav />
@ -86,7 +92,7 @@
}
footer {
margin: 1rem 0;
padding: 1rem;
font-size: .75em;
text-align: center;
}

@ -1,23 +1,24 @@
<script>
import produce from 'immer'
import {configStore, DEFAULT_LOCALE, getSupportedLocales} from '../../stores/config'
import createTwitchService from '../../services/twitch'
import {ROUTER} from 'svelte-routing/src/contexts'
import {getContext, onMount} from 'svelte'
import {opt} from '../../utils/js'
import eventBus from '../../utils/broadcast-channel-pubsub'
import {DAY} from '../../utils/date'
import {exportJsonData, importDataHandler} from '../../utils/export-import'
import Dialog from '../Common/Dialog.svelte'
import Button from '../Common/Button.svelte'
import File from '../Common/File.svelte'
import Select from "./Select.svelte"
import produce from 'immer';
import { getContext, onMount } from 'svelte';
import { ROUTER } from 'svelte-routing/src/contexts';
import createTwitchService from '../../services/twitch';
import { DEFAULT_LOCALE, configStore, getSupportedLocales } from '../../stores/config';
import eventBus from '../../utils/broadcast-channel-pubsub';
import { DAY } from '../../utils/date';
import { exportJsonData, importDataHandler } from '../../utils/export-import';
import { opt } from '../../utils/js';
import Button from '../Common/Button.svelte';
import Dialog from '../Common/Dialog.svelte';
import File from '../Common/File.svelte';
import Select from "./Select.svelte";
export let show = false;
const DEFAULT_SCORE_COMPARISON_METHOD = 'in-place';
const DEFAULT_SECONDARY_PP_METRICS = 'attribution';
const DEFAULT_AVATAR_ICONS = 'only-if-needed';
const DEFAULT_BACKGROUND_IMAGE = "/assets/background.png";
let twitchToken = null;
@ -45,12 +46,14 @@
let currentScoreComparisonMethod = DEFAULT_SCORE_COMPARISON_METHOD;
let currentSecondaryPpMetrics = DEFAULT_SECONDARY_PP_METRICS;
let currentAvatarIcons = DEFAULT_AVATAR_ICONS;
let currentBackgroundImage = DEFAULT_BACKGROUND_IMAGE;
function onConfigUpdated(config) {
if (config?.locale) currentLocale = config.locale;
if (config?.scoreComparison) currentScoreComparisonMethod = config?.scoreComparison?.method ?? DEFAULT_SCORE_COMPARISON_METHOD;
if (config?.preferences?.secondaryPp) currentSecondaryPpMetrics = config?.preferences?.secondaryPp ?? DEFAULT_SECONDARY_PP_METRICS;
if (config?.preferences?.avatarIcons) currentAvatarIcons = config?.preferences?.avatarIcons ?? DEFAULT_AVATAR_ICONS;
if (config?.preferences?.backgroundImage) currentBackgroundImage = config?.preferences?.backgroundImage ?? DEFAULT_BACKGROUND_IMAGE;
}
function onSave() {
@ -61,6 +64,7 @@
draft.scoreComparison.method = currentScoreComparisonMethod;
draft.preferences.secondaryPp = currentSecondaryPpMetrics;
draft.preferences.avatarIcons = currentAvatarIcons;
draft.preferences.backgroundImage = currentBackgroundImage;
})
show = false;
@ -72,6 +76,7 @@
currentScoreComparisonMethod = $configStore.scoreComparison.method;
currentSecondaryPpMetrics = $configStore.preferences.secondaryPp;
currentAvatarIcons = $configStore.preferences.avatarIcons;
currentBackgroundImage = $configStore.preferences.backgroundImage;
}
show = false;
@ -198,6 +203,11 @@
label={twitchBtnLabel} title={twitchBtnTitle}
on:click={() => window.location.href = twitchService.getAuthUrl(opt($activeRoute, 'uri', ''))}/>
</section>
<section class="option">
<label title="Change the image in the background of the site">Background Image</label>
<input bind:value={currentBackgroundImage} />
</section>
</section>
{:else}
Loading...

@ -30,6 +30,7 @@ const DEFAULT_CONFIG = {
preferences: {
secondaryPp: "attribution",
avatarIcons: "only-if-needed",
backgroundImage: "/assets/background.png",
},
locale: DEFAULT_LOCALE,
};
@ -38,6 +39,7 @@ const newSettingsAvailableDefinition = {
"scoreComparison.method": "Method of displaying the comparison of scores",
"preferences.secondaryPp": "Setting the second PP metric",
"preferences.avatarIcons": "Showing icons on avatars",
"preferences.backgroundImage": "Change the background image",
locale: "Locale selection",
};

4
src/utils/css.js Normal file

@ -0,0 +1,4 @@
export function setGlobalCSSValue(name, value) {
var r = document.querySelector(":root");
r.style.setProperty("--" + name, value);
}