jyapayne/Sunshine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(web-ui): modernize UI (#4631)

Browse source
This commit is contained in:
David Lane 2026-01-29 10:16:37 -05:00 • committed by GitHub
commit 3ce39b36d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 3529 additions and 456 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src_assets/common/assets/web/Navbar.vue
View file

@ -1,5 +1,5 @@
<template>
<nav class="navbar navbar-light navbar-expand-lg navbar-background header">
<nav class="navbar navbar-expand-lg navbar-sunshine">
<div class="container-fluid">
<a class="navbar-brand" href="./" title="Sunshine">
<img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
@ -11,22 +11,46 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="./"><i class="fas fa-fw fa-home"></i> {{ $t('navbar.home') }}</a>
<a class="nav-link" href="./">
<Home :size="18" class="icon"></Home>
{{ $t('navbar.home') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pin"><i class="fas fa-fw fa-unlock"></i> {{ $t('navbar.pin') }}</a>
<a class="nav-link" href="./pin">
<Lock :size="18" class="icon"></Lock>
{{ $t('navbar.pin') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./apps"><i class="fas fa-fw fa-stream"></i> {{ $t('navbar.applications') }}</a>
<a class="nav-link" href="./apps">
<Layers :size="18" class="icon"></Layers>
{{ $t('navbar.applications') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./config"><i class="fas fa-fw fa-cog"></i> {{ $t('navbar.configuration') }}</a>
<a class="nav-link" href="./featured">
<Star :size="18" class="icon"></Star>
{{ $t('navbar.featured') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./password"><i class="fas fa-fw fa-user-shield"></i> {{ $t('navbar.password') }}</a>
<a class="nav-link" href="./config">
<Settings :size="18" class="icon"></Settings>
{{ $t('navbar.configuration') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./troubleshooting"><i class="fas fa-fw fa-info"></i> {{ $t('navbar.troubleshoot') }}</a>
<a class="nav-link" href="./password">
<Shield :size="18" class="icon"></Shield>
{{ $t('navbar.password') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./troubleshooting">
<Info :size="18" class="icon"></Info>
{{ $t('navbar.troubleshoot') }}
</a>
</li>
<li class="nav-item">
<ThemeToggle/>
@ -38,10 +62,20 @@
</template>
<script>
import { Home, Lock, Layers, Star, Settings, Shield, Info } from 'lucide-vue-next'
import ThemeToggle from './ThemeToggle.vue'
export default {
components: { ThemeToggle },
components: {
ThemeToggle,
Home,
Lock,
Layers,
Star,
Settings,
Shield,
Info
},
created() {
console.log("Header mounted!")
},
@ -53,34 +87,8 @@ export default {
</script>
<style>
.navbar-background {
background-color: #ffc400
}
.header .nav-link {
color: rgba(0, 0, 0, .65) !important;
}
.header .nav-link.active {
color: rgb(0, 0, 0) !important;
font-weight: 500;
}
.header .nav-link:hover {
color: rgb(0, 0, 0) !important;
font-weight: 500;
}
.header .navbar-toggler {
color: rgba(var(--bs-dark-rgb), .65) !important;
border: var(--bs-border-width) solid rgba(var(--bs-dark-rgb), 0.15) !important;
}
.header .navbar-toggler-icon {
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.form-control::placeholder {
opacity: 0.5;
/* Navbar toggler icon for dark text on light background */
.navbar-sunshine .navbar-toggler-icon {
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
</style>