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

More ui work

Browse Source
This commit is contained in:
cuptain 2024-11-02 00:12:40 +11:00
parent 2d8ce26af9
commit bd787bdfa2
3 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@
</script>
<main>
<div>
<div class="navbar">
<Navbar />
</div>
<body>
@ -51,6 +51,9 @@
--bg-secondary: #141418;
background-color: var(--bg-secondary);
}
.navbar{
z-index: 5;
}
#logo {
display: flex;

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

@ -74,6 +74,7 @@ import {addingInstance, testPage} from './global'
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
z-index: 5;
}
.navbar-nav{
list-style: none;

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

@ -1,7 +1,17 @@
<script lang="ts">
import {instances} from './global'
//import {LaunchInstance} from 'wailsjs/go/main/InstanceManager';
import {instances, loading} from './global'
var testArray = ["test","test2","test3"];
let pack;
//function launchclick(event) {
// $loading = true
// LaunchInstance(pack).then(() => {
// $loading = false
// })
//}
</script>
@ -10,15 +20,19 @@
<div class="tile-group">
{#each $instances as i}
<div class="input-container">
<input id={i} type="radio" name="radio">
<input id={i} type="radio" name="radio" on:click={pack = instances[i]}>
<div class="radio-tile">
<!--icon goes here later-->
<label for={i}>{i}</label>
</div>
</div>
{/each}
</div>
</div>
<div class="options-container">
<button class="launch-button">{pack}</button>
</div>
</main>
<style>
* {
@ -32,11 +46,29 @@
body{
background-color: var(--bg-secondary);
}
main{
display: flex;
flex-direction: row;
justify-content: right;
}
.options-container{
display: flex;
height: 100vh;
width: 20rem;
border: green 2px;
justify-self: right;
justify-content: center;
align-items: center;
}
.launch-button{
height: 3rem;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
min-width: 70%;
}
.tile-group{
display: flex;