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

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

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

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

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