diff --git a/lang/de/nav.php b/lang/de/nav.php index 1c7a806..6df7218 100644 --- a/lang/de/nav.php +++ b/lang/de/nav.php @@ -2,6 +2,8 @@ return [ 'home' => 'Startseite', + 'browse' => 'Stöbern', + 'community' => 'Community', 'search' => 'Suche', 'public-playlists' => 'Öffentliche Playlisten', 'downloads' => 'Downloads', diff --git a/lang/en/nav.php b/lang/en/nav.php index 3d256bb..79f0a09 100644 --- a/lang/en/nav.php +++ b/lang/en/nav.php @@ -2,6 +2,8 @@ return [ 'home' => 'Home', + 'browse' => 'Browse', + 'community' => 'Community', 'search' => 'Search', 'public-playlists' => 'Public Playlists', 'downloads' => 'Downloads', diff --git a/lang/fr/nav.php b/lang/fr/nav.php index bfb5817..0faa088 100644 --- a/lang/fr/nav.php +++ b/lang/fr/nav.php @@ -2,6 +2,8 @@ return [ 'home' => 'Accueil', + 'browse' => 'Parcourir', + 'community' => 'Communauté', 'search' => 'Recherche', 'public-playlists' => 'Playlists publiques', 'downloads' => 'Téléchargements', diff --git a/resources/css/app.css b/resources/css/app.css index a188059..9bfa66f 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -68,6 +68,10 @@ input:checked~.dot { transform: translateX(100%); } +input:checked~.theme-icon { + transform: rotate(90deg); +} + #plyr__time_skip { background: #c61e54; border: 0; diff --git a/resources/js/theme.js b/resources/js/theme.js index 8d4d3b9..035845e 100644 --- a/resources/js/theme.js +++ b/resources/js/theme.js @@ -7,7 +7,7 @@ function darkModeListener() { } } -document.querySelector("input[type='checkbox']#toogleTheme")?.addEventListener("click", darkModeListener); +document.querySelectorAll("input[type='checkbox']#toogleTheme").forEach((toggle) => toggle.addEventListener("click", darkModeListener)); if(localStorage.theme) { if (localStorage.theme == 'light') { @@ -15,10 +15,9 @@ if(localStorage.theme) { document.querySelector("html").classList.toggle("dark"); } - const toggleThemeButton = document.getElementById("toogleTheme"); - if (toggleThemeButton) { - toggleThemeButton.checked = true; - } + document.querySelectorAll("#toogleTheme").forEach((toggle) => { + toggle.checked = true; + }); } } else { @@ -28,7 +27,6 @@ if(localStorage.theme) { // Ability to disable blur effects for slower devices const LOCAL_STORAGE_KEY = 'blur'; -const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur"); function setCSSFilter(selector, value) { document.querySelectorAll(selector).forEach(el => { @@ -38,10 +36,12 @@ function setCSSFilter(selector, value) { function applyBlur(enabled) { if (!enabled) { - setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none'); + setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg, .backdrop-blur-xl, .backdrop-blur-2xl', 'none'); return; } + setCSSFilter('.backdrop-blur-2xl', 'blur(40px)'); + setCSSFilter('.backdrop-blur-xl', 'blur(24px)'); setCSSFilter('.backdrop-blur-lg', 'blur(16px)'); setCSSFilter('.backdrop-blur', 'blur(8px)'); setCSSFilter('.backdrop-blur-sm', 'blur(4px)'); @@ -51,19 +51,22 @@ function initBlurToggle() { const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY); const enabled = storedValue === null ? true : storedValue === 'true'; + const blurCheckboxes = document.querySelectorAll("input[type='checkbox']#toggleBlur"); + // initialize UI and DOM applyBlur(enabled); - if (blurCheckbox) blurCheckbox.checked = enabled; + blurCheckboxes.forEach((checkbox) => { + checkbox.checked = enabled; + }); // add event listener - if (blurCheckbox) { - blurCheckbox.addEventListener('click', (e) => { - console.log("Received Event"); + blurCheckboxes.forEach((checkbox) => { + checkbox.addEventListener('click', (e) => { const isEnabled = e.target.checked; applyBlur(isEnabled); localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false'); }); - } + }); } initBlurToggle(); \ No newline at end of file diff --git a/resources/views/admin/layout.blade.php b/resources/views/admin/layout.blade.php index d0dc3fd..e1fe3e2 100644 --- a/resources/views/admin/layout.blade.php +++ b/resources/views/admin/layout.blade.php @@ -5,7 +5,7 @@
@include('layouts.navigation') @include('partials.background') -
+
@include('admin.partials.sidenav')
@yield('content') diff --git a/resources/views/components/dropdown-link.blade.php b/resources/views/components/dropdown-link.blade.php index 20b8f36..e3b3e79 100644 --- a/resources/views/components/dropdown-link.blade.php +++ b/resources/views/components/dropdown-link.blade.php @@ -1 +1 @@ -merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-neutral-100 dark:hover:bg-neutral-900 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out']) }}>{{ $slot }} +merge(['class' => 'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-start text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-rose-50/70 dark:hover:bg-rose-950/30 hover:text-rose-700 dark:hover:text-rose-300 focus:outline-none transition-colors duration-150']) }}>{{ $slot }} diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php index bbb5d63..160c8ae 100644 --- a/resources/views/components/dropdown.blade.php +++ b/resources/views/components/dropdown.blade.php @@ -1,4 +1,4 @@ -@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white dark:bg-neutral-800']) +@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'p-2 rounded-2xl border border-gray-200/70 dark:border-white/10 bg-white/95 dark:bg-neutral-900/80 backdrop-blur-2xl shadow-2xl shadow-black/10 dark:shadow-black/50']) @php $alignmentClasses = match ($align) { @@ -9,6 +9,9 @@ $alignmentClasses = match ($align) { $width = match ($width) { '48' => 'w-48', + '56' => 'w-56', + '64' => 'w-64', + '72' => 'w-72', default => $width, }; @endphp @@ -25,10 +28,10 @@ $width = match ($width) { x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" - class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}" + class="absolute z-50 mt-2 {{ $width }} rounded-2xl shadow-lg {{ $alignmentClasses }}" style="display: none;" @click="open = false"> -
+
{{ $content }}
diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php index 37bad55..2714436 100644 --- a/resources/views/components/nav-link.blade.php +++ b/resources/views/components/nav-link.blade.php @@ -2,8 +2,8 @@ @php $classes = ($active ?? false) - ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out' - : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'; + ? 'inline-flex items-center gap-1.5 rounded-xl bg-gradient-to-r from-rose-600 to-pink-600 px-3.5 py-2 text-sm font-semibold text-white shadow-md shadow-rose-600/25' + : 'inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-rose-50 dark:hover:bg-rose-950/30 hover:text-rose-700 dark:hover:text-rose-300 transition-colors'; @endphp merge(['class' => $classes]) }}> diff --git a/resources/views/components/responsive-nav-link.blade.php b/resources/views/components/responsive-nav-link.blade.php index a501604..23572ae 100644 --- a/resources/views/components/responsive-nav-link.blade.php +++ b/resources/views/components/responsive-nav-link.blade.php @@ -2,8 +2,8 @@ @php $classes = ($active ?? false) - ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out' - : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 focus:outline-none focus:text-neutral-800 dark:focus:text-neutral-200 focus:bg-neutral-50 dark:focus:bg-neutral-700 focus:border-neutral-300 dark:focus:border-neutral-600 transition duration-150 ease-in-out'; + ? 'flex w-full items-center gap-3 rounded-xl border-l-4 border-rose-500 bg-rose-50/80 dark:bg-rose-950/30 px-4 py-2.5 text-sm font-semibold text-rose-700 dark:text-rose-300' + : 'flex w-full items-center gap-3 rounded-xl border-l-4 border-transparent px-4 py-2.5 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-rose-50/60 dark:hover:bg-rose-950/20 hover:text-rose-700 dark:hover:text-rose-300 transition-colors'; @endphp merge(['class' => $classes]) }}> diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index e07fe0d..71e7ab5 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -9,7 +9,7 @@ @if (isset($header)) -
+
{{ $header }}
@@ -17,7 +17,7 @@ @endif -
+
{{ $slot }}
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php index 35b2d46..279cfae 100644 --- a/resources/views/layouts/navigation.blade.php +++ b/resources/views/layouts/navigation.blade.php @@ -1,152 +1,134 @@ - diff --git a/resources/views/livewire/nav-live-search.blade.php b/resources/views/livewire/nav-live-search.blade.php index 87afd6c..3bc5f91 100644 --- a/resources/views/livewire/nav-live-search.blade.php +++ b/resources/views/livewire/nav-live-search.blade.php @@ -3,7 +3,7 @@ @csrf
-
+
{{-- Search Icon --}}
-

{{ __('Blur effects') }}

-
-
- +
+

{{ __('Blur effects') }}

+
+ +
+
+ + + + + + + + + + +
+
+
diff --git a/resources/views/partials/themeswitcher.blade.php b/resources/views/partials/themeswitcher.blade.php index e2558e6..4f1bb5a 100644 --- a/resources/views/partials/themeswitcher.blade.php +++ b/resources/views/partials/themeswitcher.blade.php @@ -1,16 +1,10 @@ -