T-Gander/Sunshine
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(web-ui): Welcome page styling (#5466)

Browse Source
This commit is contained in:
Noklef
2026-08-07 23:45:59 +10:00
committed by GitHub
parent 0784774fec
commit e9ed5188f5
5 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src_assets/common/assets/web/NavbarSimple.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<nav class="navbar navbar-sunshine">
<div class="container-fluid">
<span class="navbar-brand" title="Sunshine">
<img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
</span>
<ThemeToggle/>
</div>
</nav>
</template>
<script>
import ThemeToggle from './ThemeToggle.vue'
export default {
components: {
ThemeToggle,
},
}
</script>

1
src_assets/common/assets/web/ResourceCard.vue
View File

@@ -2,7 +2,6 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h2>{{ $t('resource_card.resources') }}</h2> <h2>{{ $t('resource_card.resources') }}</h2>
<p>{{ $t('resource_card.resources_desc') }}</p>
<div class="d-flex flex-wrap gap-2 mt-4"> <div class="d-flex flex-wrap gap-2 mt-4">
<a class="btn btn-success" href="https://app.lizardbyte.dev" target="_blank"> <a class="btn btn-success" href="https://app.lizardbyte.dev" target="_blank">
<Globe :size="18" class="icon"></Globe> <Globe :size="18" class="icon"></Globe>

4
src_assets/common/assets/web/logout.html
View File

@@ -6,12 +6,12 @@
</head> </head>
<body id="app" v-cloak> <body id="app" v-cloak>
<Navbar-Simple></Navbar-Simple>
<div class="container py-5"> <div class="container py-5">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-8 col-lg-6"> <div class="col-md-8 col-lg-6">
<div class="card"> <div class="card">
<div class="card-body text-center"> <div class="card-body text-center">
<img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine" class="mb-3">
<h1 class="h3 mb-3">{{ $t('logout.logged_out') }}</h1> <h1 class="h3 mb-3">{{ $t('logout.logged_out') }}</h1>
<p class="text-muted mb-4">{{ $t('logout.logged_out_desc') }}</p> <p class="text-muted mb-4">{{ $t('logout.logged_out_desc') }}</p>
<a class="btn btn-primary" href="./"> <a class="btn btn-primary" href="./">
@@ -29,12 +29,14 @@
import { initApp } from './init' import { initApp } from './init'
import { loadAutoTheme } from './theme' import { loadAutoTheme } from './theme'
import { LogIn } from '@lucide/vue' import { LogIn } from '@lucide/vue'
import NavbarSimple from './NavbarSimple.vue'
loadAutoTheme(); loadAutoTheme();
const app = createApp({ const app = createApp({
components: { components: {
LogIn, LogIn,
NavbarSimple,
}, },
}); });

1
src_assets/common/assets/web/public/assets/locale/en.json
View File

@@ -523,7 +523,6 @@
"license": "License", "license": "License",
"lizardbyte_website": "LizardByte Website", "lizardbyte_website": "LizardByte Website",
"resources": "Resources", "resources": "Resources",
"resources_desc": "Resources for Sunshine!",
"third_party_notice": "Third Party Notice" "third_party_notice": "Third Party Notice"
}, },
"troubleshooting": { "troubleshooting": {

40
src_assets/common/assets/web/welcome.html
View File

@@ -6,45 +6,44 @@
</head> </head>
<body id="app" v-cloak> <body id="app" v-cloak>
<Navbar-Simple></Navbar-Simple>
<Notification></Notification> <Notification></Notification>
<main role="main" style="max-width: 1200px; margin: 1em auto"> <main id="content" class="container" role="main">
<div class="d-flex gap-4"> <h1 class="my-4">{{ $t('welcome.greeting') }}</h1>
<div class="card p-2"> <p>{{ $t('welcome.create_creds') }}</p>
<header> <div class="d-flex gap-4 align-items-start">
<h1 class="mb-0"> <div class="card">
<img src="./images/logo-sunshine-45.png" height="45" alt=""> <div class="card-body">
{{ $t('welcome.greeting') }}
</h1>
</header>
<p class="my-2 align-self-start">{{ $t('welcome.create_creds') }}</p>
<div class="alert alert-warning"> <div class="alert alert-warning">
{{ $t('welcome.create_creds_alert') }} {{ $t('welcome.create_creds_alert') }}
</div> </div>
<form @submit.prevent="save"> <form @submit.prevent="save">
<div class="mb-2"> <div class="mb-3">
<label for="usernameInput" class="form-label">{{ $t('_common.username') }}</label> <label for="usernameInput" class="form-label">{{ $t('_common.username') }}</label>
<input type="text" class="form-control" id="usernameInput" autocomplete="username" <input type="text" class="form-control" id="usernameInput" autocomplete="username"
v-model="passwordData.newUsername" /> v-model="passwordData.newUsername" />
</div> </div>
<div class="mb-2"> <div class="mb-3">
<label for="passwordInput" class="form-label">{{ $t('_common.password') }}</label> <label for="passwordInput" class="form-label">{{ $t('_common.password') }}</label>
<input type="password" class="form-control" id="passwordInput" autocomplete="new-password" <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
v-model="passwordData.newPassword" required /> v-model="passwordData.newPassword" required />
</div> </div>
<div class="mb-2"> <div class="mb-3">
<label for="confirmPasswordInput" class="form-label">{{ $t('welcome.confirm_password') }}</label> <label for="confirmPasswordInput" class="form-label">{{ $t('welcome.confirm_password') }}</label>
<input type="password" class="form-control" id="confirmPasswordInput" autocomplete="new-password" <input type="password" class="form-control" id="confirmPasswordInput" autocomplete="new-password"
v-model="passwordData.confirmNewPassword" required /> v-model="passwordData.confirmNewPassword" required />
</div> </div>
<button type="submit" class="btn btn-primary w-100 mb-2" v-bind:disabled="loading"> <button type="submit" class="btn btn-primary" v-bind:disabled="loading">
<log-in :size="18" class="icon"></log-in>
{{ $t('welcome.login') }} {{ $t('welcome.login') }}
</button> </button>
<div class="alert alert-danger" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div> <div class="alert alert-danger mt-3 mb-0" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div>
<div class="alert alert-success" v-if="success"> <div class="alert alert-success mt-3 mb-0" v-if="success">
<b>{{ $t('_common.success') }}</b> {{ $t('welcome.welcome_success') }} <b>{{ $t('_common.success') }}</b> {{ $t('welcome.welcome_success') }}
</div> </div>
</form> </form>
</div> </div>
</div>
<div> <div>
<Resource-Card></Resource-Card> <Resource-Card></Resource-Card>
</div> </div>
@@ -58,11 +57,18 @@
import { initApp } from './init' import { initApp } from './init'
import { apiFetch } from './fetch_utils' import { apiFetch } from './fetch_utils'
import Notification from './Notification.vue' import Notification from './Notification.vue'
import NavbarSimple from './NavbarSimple.vue'
import { loadAutoTheme } from './theme'
import { LogIn } from '@lucide/vue'
loadAutoTheme();
let app = createApp({ let app = createApp({
components: { components: {
ResourceCard, ResourceCard,
Notification, Notification,
NavbarSimple,
LogIn,
}, },
data() { data() {
return { return {
@@ -109,3 +115,5 @@
initApp(app); initApp(app);
</script> </script>
</html>