Instances UI
This commit is contained in:
parent
86cc464f45
commit
e8c24ee540
@ -1 +1 @@
|
|||||||
ad9da3c17151b053a4d2fda8e3578901
|
48cb20b8d107dab0a7876a449352234a
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user