piwalker/FCLauncher
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 5 Wiki Activity

Moving page elements out of the way when the navbar opens

Browse Source
This commit is contained in:
cuptain 2024-11-02 18:32:24 +11:00
parent 6f6a00cb45
commit 3fe2b3df6d
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
fclauncher/frontend/src/App.svelte
View File

@ -4,25 +4,33 @@
import Loading from './Loading.svelte'
import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
import { onMount } from 'svelte'
import { loading, testPage, navMargin } from './global'
import { loading, testPage, } from './global'
import { slide } from 'svelte/transition'
import Navbar from './Navbar.svelte'
import Testpage from './Testpage.svelte'
import { set_attributes, set_style } from 'svelte/internal';
let width: int = 10
let navMargin = document.getElementById("body") as HTMLElement;
onMount(() => {
CheckPrerequisites().then(() => $loading = false)
})
function setMargin(){
document.documentElement.style.setProperty('--navMargin', '17rem');
}
function unsetMargin(){
document.documentElement.style.setProperty('--navMargin', '5rem');
}
</script>
<main>
<div class="navbar">
<div class="navbar" on:mouseover={setMargin} on:focus={setMargin} on:mouseleave={unsetMargin} >
<Navbar />
</div>
<body>
<body class="body" id="body">
<!--<img alt="Wails logo" id="logo" src="{logo}">-->
{#if $testPage}
<div>
@ -49,6 +57,7 @@
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
--navMargin: 5rem;
background-color: var(--bg-secondary);
}
.navbar{
@ -70,8 +79,8 @@
body{
display: flex;
flex-direction: column;
margin-left: 5rem;
margin-left: var(--navMargin);
transition: 200ms;
}
main{

2
fclauncher/frontend/src/Navbar.svelte
View File

@ -12,7 +12,7 @@ function unextend(){
</script>
<main>
<nav class="navbar" id="navbar" on:mouseover={extend} on:focus={extend} on:mouseleave={unextend}>
<nav class="navbar" id="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">

4
fclauncher/frontend/src/Testpage.svelte
View File

@ -18,7 +18,7 @@ import {instances, loading, navMargin} from './global'
</script>
<main style="margin-left: {marginScale};">
<main>
<div class="header">
<div>Instances</div>
<div class="container">
@ -37,7 +37,7 @@ import {instances, loading, navMargin} from './global'
</div>
</div>
<div class="options-container">
<button class="launch-button" on:click={launchclick}>Launch {$navMargin}</button>
<button class="launch-button" on:click={launchclick}>Launch {radio}</button>
</div>
</main>
<style>