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

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

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

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

@ -18,7 +18,7 @@ import {instances, loading, navMargin} from './global'
</script> </script>
<main style="margin-left: {marginScale};"> <main>
<div class="header"> <div class="header">
<div>Instances</div> <div>Instances</div>
<div class="container"> <div class="container">
@ -37,7 +37,7 @@ import {instances, loading, navMargin} from './global'
</div> </div>
</div> </div>
<div class="options-container"> <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> </div>
</main> </main>
<style> <style>