Instances UI

This commit is contained in:
Cuptain 2024-11-27 15:34:12 +11:00
parent 86cc464f45
commit e8c24ee540
3 changed files with 72 additions and 19 deletions

View File

@ -1 +1 @@
ad9da3c17151b053a4d2fda8e3578901 48cb20b8d107dab0a7876a449352234a

View File

@ -34,27 +34,29 @@ import {onMount, createEventDispatcher} from 'svelte'
<main> <main>
<div class="instance-header">Instances</div>
<div class="header"> <div class="header">
<div>Instances</div>
<div class="container"> <div class="container">
<div class="tile-group"> <div class="tile-group">
{#each $instances as instance} {#each $instances as instance}
<div class="input-container" id=input-container> <div class="input-container" id=input-container>
<input id={instance} bind:group={radio} type="radio" name="radio" value={instance}> <input id={instance} bind:group={radio} type="radio" name="radio" value={instance}>
<div class="radio-tile"> <div class="radio-tile">
<!--icon goes here later--> <!--icon goes here later-->
<label for={instance}>{instance}</label> <label for={instance}>{instance}</label>
</div>
</div> </div>
</div> {/each}
{/each}
</div>
</div>
<div class="options-container">
<button class="launch-button" on:click={launchclick}>Launch {radio}</button>
<button class="option-button">Open Instance Folder</button>
</div> </div>
</div> </div>
</div>
<div class="options-container">
<button class="launch-button" on:click={launchclick}>Launch {radio}</button>
<button class="changecolor" on:click={changetheme}>Change color</button>
</div>
</main> </main>
<style> <style>
@ -73,24 +75,71 @@ body{
} }
main{ main{
display: flex; display: flex;
flex-direction: row; flex-direction: column;
} }
.header{ .header{
display: flex;
flex: 3; flex: 3;
flex-direction: row;
}
.instance-header{
display: inline-block;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
color: var(--text-primary);
} }
.options-container{ .options-container{
display: flex; display: flex;
height: 100vh; height: 100%;
justify-self: right; justify-self: right;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 15rem; width: 15rem;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin-left: auto;
margin-top: 15rem;
gap: 10px;
} }
.launch-button{ .launch-button{
height: 3rem; min-height: 3rem;
border:solid;
border-radius: 4px;
background-color: var(--bg-secondary);
border-color: var(--bg-secondary);
color: var(--text-primary);
font-size: large;
max-width: 10rem;
max-height: fit-content;
}
.launch-button:hover{
color: var(--text-secondary);
}
.launch-button:active{
opacity: 0.6;
}
.option-button{
min-height: 3rem;
border:solid;
border-radius: 4px;
background-color: var(--bg-secondary);
border-color: var(--bg-secondary);
color: var(--text-primary);
font-size: medium;
max-width: 10rem;
max-height: fit-content;
}
.option-button:hover{
color: var(--text-secondary);
}
.option-button:active{
opacity: 0.6;
} }
.container{ .container{
display: flex; display: flex;

View File

@ -52,10 +52,14 @@ function changethemeback(){
width: 4rem; width: 4rem;
justify-content: center; justify-content: center;
height: 4rem; height: 4rem;
transition: 100ms;
} }
.theme-button:hover{ .theme-button:hover{
color: var(--text-secondary); color: var(--text-secondary);
} }
.theme-button:active{
opacity: 0.6;
}
#green{ #green{
background-color: green; background-color: green;
border-color: green; border-color: green;