Library page (#53)

* launcher base gui initial

* Bootstraps router, Omorphia, and prettier.

* Adds pages. Adds Vuex. SideBar nav contains user section and pages section.

* Adds Instance markup. Instances added to Home page.

* Adds News to home page.

* Adds settings to nav. Other touches.

* Polishing initial base GUI.

* Moves some styling to assets. Changes px values to rem.

* Removes pointless border-radius CSS.

* Implements Omorphia vars.

* Adds trending mods section.

* Updates home page.

* Swaps Vuex implementation for Pinia.

* Fixes invalid CSS on instance list item hover.

* Adds @ path resolve for imports.

* Fix some styling of row display

* Gridview on library page

* Cleaning up styles and markup.

* Fixes overall layout issues.

* Cleans up more styling. Modifies AppBar coloring.

* instance routing

* Allows pagination arrows to conditionally appear in RowDisplay.

* Adds paging behavior in RowDisplay.

* Initial modlist layout

* Updates nav and settings button styling.

* Brings in Knossos style for trending mods. Polishes News CSS.

* Page redesign

* More tweaks

* Base library pages

* Remove errant css

* Update play.svg

* Addressed issues

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Zachary Baird <zdb1994@yahoo.com>
Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com>
This commit is contained in:
Adrian O.V
2023-03-30 18:37:45 -04:00
committed by GitHub
parent 8512b45e2b
commit bfe8b40f44
22 changed files with 1555 additions and 339 deletions

View File

@@ -0,0 +1,230 @@
<template>
<Card class="settings-card">
<h2 class="settings-title"> Java </h2>
<div class="settings-group">
<h3>Installation</h3>
<input
type="text"
class="input installation-input"
placeholder="/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home"
ref="javaPath"
v-model="javaPath"
/>
<span class="installation-buttons">
<Button @click="saveJavaPath">
<SearchIcon/>
Auto Detect
</Button>
<Button @click="saveJavaPath">
<BrowseIcon/>
Browse
</Button>
<Button @click="saveJavaPath">
<PlayIcon/>
Test
</Button>
</span>
</div>
<hr class="card-divider">
<div class="settings-group">
<h3>Arguments</h3>
<input
type="text"
class="input installation-input"
ref="javaArgs"
v-model="javaArgs"
/>
</div>
<hr class="card-divider">
<div class="settings-group">
<div class="sliders">
<span class="slider">
Minimum Memory
<Slider
v-model="javaMemory"
:min="1024"
:max="8192"
:step="1024"
/>
</span>
<span class="slider">
Maximum Memory
<Slider
v-model="javaMemory"
:min="1024"
:max="8192"
:step="1024"
/>
</span>
</div>
</div>
</Card>
<Card class="settings-card">
<h2 class="settings-title"> Window </h2>
<div class="settings-group">
<div class="settings-group">
<div class="sliders">
<span class="slider">
Width
<Slider
v-model="javaMemory"
:min="1024"
:max="8192"
:step="1024"
/>
</span>
<span class="slider">
Height
<Slider
v-model="javaMemory"
:min="1024"
:max="8192"
:step="1024"
/>
</span>
</div>
<div class="toggle-setting">
Start in Fullscreen
<input
type="checkbox"
id="fullscreen"
name="fullscreen"
v-model="fullscreen"
class="switch stylized-toggle"
/>
</div>
</div>
<hr class="card-divider">
<div class="settings-group">
<h3>Console</h3>
<div class="toggle-setting">
Show console while game is running
<input
type="checkbox"
id="fullscreen"
name="fullscreen"
v-model="fullscreen"
class="switch stylized-toggle"
/>
</div>
<div class="toggle-setting">
Close console when game quits
<input
type="checkbox"
id="fullscreen"
name="fullscreen"
v-model="fullscreen"
class="switch stylized-toggle"
/>
</div>
<div class="toggle-setting">
Show console when game crashes
<input
type="checkbox"
id="fullscreen"
name="fullscreen"
v-model="fullscreen"
class="switch stylized-toggle"
/>
</div>
</div>
</div>
</Card>
<Card class="settings-card">
<h2 class="settings-title"> Commands </h2>
<div class="settings-group">
<div class="toggle-setting">
Pre Launch
<input
type="text"
class="input"
ref="javaArgs"
v-model="javaArgs"
/>
</div>
<div class="toggle-setting">
Wrapper
<input
type="text"
class="input"
ref="javaArgs"
v-model="javaArgs"
/>
</div>
<div class="toggle-setting">
Post Launch
<input
type="text"
class="input"
ref="javaArgs"
v-model="javaArgs"
/>
</div>
</div>
</Card>
</template>
<script setup>
import {Card, Button, SearchIcon, Slider } from 'omorphia'
import {BrowseIcon, PlayIcon} from "@/assets/icons";
</script>
<style scoped lang="scss">
.settings-card {
display: flex;
flex-direction: column;
gap: 1rem;
}
.settings-title {
color: var(--color-contrast)
}
.settings-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.installation-input {
width: 100%;
}
.installation-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
margin: 0;
}
.sliders {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 1rem;
width: 100%;
.slider {
flex-grow: 1;
}
}
.toggle-setting {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.card-divider {
background-color: var(--color-button-bg);
border: none;
color: var(--color-button-bg);
height: 1px;
margin: var(--gap-sm) 0;
}
</style>