Dark mode fixes

This commit is contained in:
DariusIII
2025-11-19 12:52:02 +01:00
parent 964d8de6d2
commit 2a63645d3b
35 changed files with 255 additions and 169 deletions
+25 -5
View File
@@ -14,22 +14,42 @@
}
h1 {
@apply text-4xl my-6;
@apply text-4xl my-6 text-gray-900 dark:text-gray-100;
}
h2 {
@apply text-2xl;
@apply text-2xl text-gray-900 dark:text-gray-100;
}
h3 {
@apply text-xl;
@apply text-xl text-gray-900 dark:text-gray-100;
}
a {
@apply text-blue-500;
@apply text-blue-500 dark:text-blue-400;
}
a:hover {
@apply text-blue-800;
@apply text-blue-800 dark:text-blue-300;
}
}
@layer utilities {
/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.dark ::-webkit-scrollbar-track {
@apply bg-gray-800;
}
.dark ::-webkit-scrollbar-thumb {
@apply bg-gray-600 rounded;
}
.dark ::-webkit-scrollbar-thumb:hover {
@apply bg-gray-500;
}
}
@@ -10,6 +10,44 @@ window.axios = axios;
window.Vue = { createApp, ref, reactive, watch };
window.VueDraggable = draggable;
// Initialize dark mode theme from main app settings
// This runs immediately to prevent flash of wrong theme
(function() {
const metaTheme = document.querySelector('meta[name="theme-preference"]');
const isAuthenticated = document.querySelector('meta[name="user-authenticated"]');
let theme = 'light';
if (isAuthenticated && isAuthenticated.content === 'true' && metaTheme) {
// Use authenticated user's preference from database
theme = metaTheme.content;
} else {
// Use localStorage for guests (same key as main app)
theme = localStorage.getItem('theme') || 'light';
}
// Apply the theme
if (theme === 'system') {
// Use OS preference
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
} else if (theme === 'dark') {
document.documentElement.classList.add('dark');
}
// Listen for OS theme changes when in system mode
if (theme === 'system') {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
}
})();
document.addEventListener('DOMContentLoaded', function () {
createApp({
setup() {
@@ -85,6 +123,10 @@ document.addEventListener('DOMContentLoaded', function () {
feather.replace();
// Get default category color from meta tag if available
const defaultColorMeta = document.querySelector('meta[name="default-category-color"]');
window.defaultCategoryColor = defaultColorMeta ? defaultColorMeta.content : '#3490dc';
const input = document.querySelector('input[name=color_light_mode]');
if (!input) return;
@@ -3,7 +3,7 @@
@section ('content')
<div class="flex flex-row justify-between my-3">
<h2 class="grow text-3xl font-medium">{{ trans('forum::general.index') }}</h2>
<h2 class="grow text-3xl font-medium text-gray-900 dark:text-gray-100">{{ trans('forum::general.index') }}</h2>
@can ('createCategories')
<x-forum::button type="button" data-open-modal="create-category">
@@ -2,7 +2,7 @@
@section ('content')
<div class="flex flex-row justify-between mb-2">
<h2 class="text-3xl font-medium my-3">{{ trans('forum::general.manage') }}</h2>
<h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::general.manage') }}</h2>
@can ('createCategories')
<x-forum::button type="button" data-open-modal="create-category" class="px-6">
@@ -17,13 +17,13 @@
<draggable-category-list :categories="state.categories"></draggable-category-list>
<transition name="fade">
<div v-show="state.changesApplied" class="bg-green-100 mb-4 text-green-700 mt-3 px-4 py-3" role="alert">
<div v-show="state.changesApplied" class="bg-green-100 dark:bg-green-900/30 mb-4 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800 mt-3 px-4 py-3 rounded transition-colors" role="alert">
{{ trans('forum::general.changes_applied') }}
</div>
</transition>
<div class="flex justify-end py-3">
<button type="button" class="bg-blue-500 text-white rounded py-2 px-8 hover:cursor-pointer disabled:opacity-50" :disabled="state.isSavingDisabled" @click="onSave">
<button type="button" class="bg-blue-500 dark:bg-blue-600 text-white rounded py-2 px-8 hover:cursor-pointer hover:bg-blue-400 dark:hover:bg-blue-500 disabled:opacity-50 transition-colors" :disabled="state.isSavingDisabled" @click="onSave">
{{ trans('forum::general.save') }}
</button>
</div>
@@ -40,19 +40,19 @@
:empty-insert-threshold="50"
item-key="id">
<template #item="{element}">
<li class="bg-white p-4 my-2 rounded-md border" :data-id="element.id">
<li class="bg-white dark:bg-gray-800 p-4 my-2 rounded-md border dark:border-gray-700 transition-colors" :data-id="element.id">
<span class="flex">
<span class="grow">
<strong :style="{ color: element.color }">@{{ element.title }}</strong>
<div class="text-muted">@{{ element.description }}</div>
<strong class="text-gray-900 dark:text-gray-100">@{{ element.title }}</strong>
<div class="text-muted text-gray-500 dark:text-gray-400">@{{ element.description }}</div>
</span>
<span>
<a class="text-blue-500 hover:text-blue-800 px-3 py-2 text-sm ml-2" :href="element.route + '#modal=edit-category'">{{ trans('forum::general.edit') }}</a>
<a class="bg-red-500 hover:bg-red-400 text-white hover:text-white px-3 py-2 text-sm rounded ml-2" :href="element.route + '#modal=delete-category'">{{ trans('forum::general.delete') }}</a>
<a class="text-blue-500 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 px-3 py-2 text-sm ml-2 transition-colors" :href="element.route + '#modal=edit-category'">{{ trans('forum::general.edit') }}</a>
<a class="bg-red-500 dark:bg-red-600 hover:bg-red-400 dark:hover:bg-red-500 text-white hover:text-white px-3 py-2 text-sm rounded ml-2 transition-colors" :href="element.route + '#modal=delete-category'">{{ trans('forum::general.delete') }}</a>
</span>
</span>
<span v-if="element.children.length == 0" class="block min-h-5 border border-dashed border-slate-400 rounded">
<span v-if="element.children.length == 0" class="block min-h-5 border border-dashed border-slate-400 dark:border-slate-600 rounded">
<draggable-category-list :categories="element.children" />
</span>
<draggable-category-list v-else :categories="element.children" />
@@ -13,14 +13,14 @@
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ old('accepts_threads') ? 'checked' : '' }}>
<label class="form-check-label" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
<input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ old('accepts_threads') ? 'checked' : '' }}>
<label class="form-check-label text-gray-700 dark:text-gray-300" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
</div>
</div>
<div class="mb-3">
<div>
<input type="checkbox" name="is_private" id="is-private" value="1" {{ old('is_private') ? 'checked' : '' }}>
<label for="is-private">{{ trans('forum::categories.make_private') }}</label>
<input type="checkbox" name="is_private" id="is-private" value="1" class="rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" {{ old('is_private') ? 'checked' : '' }}>
<label for="is-private" class="text-gray-700 dark:text-gray-300">{{ trans('forum::categories.make_private') }}</label>
</div>
</div>
@include ('forum::category.partials.inputs.color')
@@ -4,18 +4,20 @@
@slot('route', Forum::route('category.delete', $category))
@slot('method', 'DELETE')
{{ trans('forum::general.generic_confirm') }}
<div class="text-gray-900 dark:text-gray-100">
{{ trans('forum::general.generic_confirm') }}
</div>
@if(!$category->isEmpty())
<div class="form-check mt-3">
<input class="form-check-input" type="checkbox" value="1" name="force" id="forceDelete">
<label class="form-check-label" for="forceDelete">
<input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" value="1" name="force" id="forceDelete">
<label class="form-check-label text-gray-700 dark:text-gray-300" for="forceDelete">
{{ trans('forum::categories.confirm_nonempty_delete') }}
</label>
</div>
@endif
@slot('actions')
<x-forum::button type="submit" class="bg-red-500 hover:bg-red-400">{{ trans('forum::general.delete') }}</x-forum::button>
<x-forum::button type="submit" class="bg-red-500 dark:bg-red-600 hover:bg-red-400 dark:hover:bg-red-500">{{ trans('forum::general.delete') }}</x-forum::button>
@endslot
@endcomponent
@@ -15,15 +15,15 @@
<div class="mb-3">
<div class="form-check">
<input type="hidden" name="accepts_threads" value="0" />
<input class="form-check-input" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ $category->accepts_threads ? 'checked' : '' }}>
<label class="form-check-label" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
<input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="accepts_threads" id="accepts-threads" value="1" {{ $category->accepts_threads ? 'checked' : '' }}>
<label class="form-check-label text-gray-700 dark:text-gray-300" for="accepts-threads">{{ trans('forum::categories.enable_threads') }}</label>
</div>
</div>
<div class="mb-3">
<div class="form-check">
<input type="hidden" name="is_private" value="0" />
<input class="form-check-input" type="checkbox" name="is_private" id="is-private" value="1" {{ $category->is_private ? 'checked' : '' }} {{ $privateAncestor != null ? 'disabled' : '' }}>
<label class="form-check-label" for="is-private">{{ trans('forum::categories.make_private') }}</label>
<input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="is_private" id="is-private" value="1" {{ $category->is_private ? 'checked' : '' }} {{ $privateAncestor != null ? 'disabled' : '' }}>
<label class="form-check-label text-gray-700 dark:text-gray-300" for="is-private">{{ trans('forum::categories.make_private') }}</label>
</div>
</div>
@if ($privateAncestor != null)
@@ -6,7 +6,7 @@
<input type="hidden" name="category_id" value="{{ $category->id }}" />
<p>{{ trans('forum::general.generic_confirm') }}</p>
<p class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.generic_confirm') }}</p>
@slot('actions')
<x-forum::button type="submit">
@@ -1,11 +1,11 @@
<div class="my-4">
<div class="bg-white shadow rounded-md relative">
<div class="bg-white dark:bg-gray-800 shadow rounded-md relative transition-colors">
<div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
<div class="md:w-3/6 text-center md:text-left">
<h5 class="text-lg">
<a href="{{ Forum::route('category.show', $category) }}" style="color: {{ $category->color_light_mode }};">{{ $category->title }}</a>
<a href="{{ Forum::route('category.show', $category) }}" style="color: {{ $category->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $category->title }}</a>
</h5>
<p class="text-gray-500">{{ $category->description }}</p>
<p class="text-gray-500 dark:text-gray-400">{{ $category->description }}</p>
</div>
<div class="md:w-1/6 flex flex-col items-center gap-1 mt-2 md:mt-0">
@if ($category->accepts_threads)
@@ -17,17 +17,17 @@
</x-forum::badge>
@endif
</div>
<div class="md:w-2/6 text-gray-500 text-center md:text-right mt-2 md:mt-0">
<div class="md:w-2/6 text-gray-500 dark:text-gray-400 text-center md:text-right mt-2 md:mt-0">
@if ($category->accepts_threads)
@if ($category->newestThread)
<div>
<a href="{{ Forum::route('thread.show', $category->newestThread) }}" class="mr-1">{{ $category->newestThread->title }}</a>
<a href="{{ Forum::route('thread.show', $category->newestThread) }}" class="mr-1 text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $category->newestThread->title }}</a>
@include ('forum::partials.timestamp', ['carbon' => $category->newestThread->created_at])
</div>
@endif
@if ($category->latestActiveThread && $category->latestActiveThread->post_count > 1)
<div>
<a href="{{ Forum::route('thread.show', $category->latestActiveThread->lastPost) }}" class="mr-1">Re: {{ $category->latestActiveThread->title }}</a>
<a href="{{ Forum::route('thread.show', $category->latestActiveThread->lastPost) }}" class="mr-1 text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">Re: {{ $category->latestActiveThread->title }}</a>
@include ('forum::partials.timestamp', ['carbon' => $category->latestActiveThread->lastPost->created_at])
</div>
@endif
@@ -39,11 +39,11 @@
@if ($category->children->count() > 0)
<div class="subcategories">
@foreach ($category->children as $subcategory)
<div class="bg-white -mt-1 shadow rounded-b-md">
<div class="bg-white dark:bg-gray-800 -mt-1 shadow rounded-b-md transition-colors">
<div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
<div class="md:w-3/6 text-center md:text-left">
<a href="{{ Forum::route('category.show', $subcategory) }}" style="color: {{ $subcategory->color_light_mode }};">{{ $subcategory->title }}</a>
<div class="text-muted">{{ $subcategory->description }}</div>
<a href="{{ Forum::route('category.show', $subcategory) }}" style="color: {{ $subcategory->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $subcategory->title }}</a>
<div class="text-muted text-gray-500 dark:text-gray-400">{{ $subcategory->description }}</div>
</div>
<div class="md:w-1/6 flex flex-col items-center gap-1 mt-2 md:mt-0">
<x-forum::badge style="background: {{ $subcategory->color_light_mode }};">
@@ -53,10 +53,10 @@
{{ trans_choice('forum::posts.post', 2) }}: {{ $subcategory->post_count }}
</x-forum::badge>
</div>
<div class="md:w-2/6 text-gray-500 md:items-end text-center md:text-right mt-2 md:mt-0">
<div class="md:w-2/6 text-gray-500 dark:text-gray-400 md:items-end text-center md:text-right mt-2 md:mt-0">
@if ($subcategory->newestThread)
<div>
<a href="{{ Forum::route('thread.show', $subcategory->newestThread) }}" class="mr-1">{{ $subcategory->newestThread->title }}</a>
<a href="{{ Forum::route('thread.show', $subcategory->newestThread) }}" class="mr-1 text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $subcategory->newestThread->title }}</a>
@include ('forum::partials.timestamp', ['carbon' => $subcategory->newestThread->created_at])
</div>
@endif
@@ -3,10 +3,10 @@
@section('content')
<div class="flex flex-row justify-between mb-2">
<h2 class="text-3xl" style="color: {{ $category->color_light_mode }};">
<h2 class="text-3xl text-gray-900 dark:text-gray-100" style="color: {{ $category->color_light_mode }};">
{{ $category->title }} &nbsp;
@if ($category->description)
<small>{{ $category->description }}</small>
<small class="text-gray-600 dark:text-gray-400">{{ $category->description }}</small>
@endif
</h2>
</div>
@@ -50,10 +50,10 @@
<div class="text-end mt-2">
<div class="form-check">
<label for="selectAllThreads">
<label for="selectAllThreads" class="text-gray-700 dark:text-gray-300">
{{ trans('forum::threads.select_all') }}
</label>
<input type="checkbox" value="" id="selectAllThreads" class="align-middle" @click="toggleAll" :checked="state.selectedThreads.length == selectableThreadIds.length">
<input type="checkbox" value="" id="selectAllThreads" class="align-middle rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" @click="toggleAll" :checked="state.selectedThreads.length == selectableThreadIds.length">
</div>
</div>
@endcan
@@ -5,19 +5,19 @@
@php
switch($type) {
case('info'):
$color = 'bg-blue-500';
$color = 'bg-blue-500 dark:bg-blue-600';
break;
case('danger'):
$color = 'bg-red-500';
$color = 'bg-red-500 dark:bg-red-600';
break;
case('warning'):
$color = 'bg-orange-500';
$color = 'bg-orange-500 dark:bg-orange-600';
break;
default:
$color = 'bg-gray-400';
$color = 'bg-gray-400 dark:bg-gray-500';
break;
}
@endphp
@@ -1,3 +1,3 @@
<a {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 text-white font-semibold hover:text-white px-3 py-2 rounded-md inline-block']) }}>
<a {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold hover:text-white px-3 py-2 rounded-md inline-block transition-colors']) }}>
{{ $slot }}
</a>
@@ -1,3 +1,3 @@
<button {{ $attributes->merge(['class' => 'bg-gray-300 hover:bg-gray-200 text-gray-600 font-semibold px-3 py-2 rounded-md inline-block']) }}>
<button {{ $attributes->merge(['class' => 'bg-gray-300 hover:bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-600 dark:text-gray-200 font-semibold px-3 py-2 rounded-md inline-block transition-colors']) }}>
{{ $slot }}
</button>
@@ -1,3 +1,3 @@
<button {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 text-white font-semibold px-3 py-2 rounded-md inline-block']) }}>
<button {{ $attributes->merge(['class' => 'bg-blue-500 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-semibold px-3 py-2 rounded-md inline-block transition-colors']) }}>
{{ $slot }}
</button>
@@ -1 +1,2 @@
<input {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500 rounded-md border shadow-sm']) }}>
<input {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 rounded-md border shadow-sm transition-colors']) }}>
@@ -1,3 +1,3 @@
<label {{ $attributes->merge(['class' => 'block w-full mb-1']) }}>
<label {{ $attributes->merge(['class' => 'block w-full mb-1 text-gray-700 dark:text-gray-300']) }}>
{{ $slot }}
</label>
@@ -1,5 +1,5 @@
<div class="inline-block relative w-64">
<select {{ $attributes->merge(['class' => 'block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline']) }}>
<select {{ $attributes->merge(['class' => 'block appearance-none w-full bg-white dark:bg-gray-800 border border-gray-400 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-500 text-gray-900 dark:text-gray-100 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline transition-colors']) }}>
{{ $slot }}
</select>
</div>
@@ -1 +1,2 @@
<textarea {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 focus:border-blue-500 focus:ring-blue-500 rounded-md border shadow-sm']) }}>{{ $slot }}</textarea>
<textarea {{ $attributes->merge(['type' => 'text', 'class' => 'px-3 py-1 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 rounded-md border shadow-sm transition-colors']) }}>{{ $slot }}</textarea>
@@ -3,6 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
@auth
<meta name="user-authenticated" content="true">
<meta name="theme-preference" content="{{ auth()->user()->theme_preference ?? 'light' }}">
@else
<meta name="user-authenticated" content="false">
@endauth
<meta name="default-category-color" content="{{ config('forum.frontend.default_category_color') }}">
<title>
@if (isset($thread_title))
@@ -16,12 +24,12 @@
@vite(['resources/forum/blade-tailwind/css/forum.css', 'resources/forum/blade-tailwind/js/forum.js'])
</head>
<body class="forum bg-gray-100">
<nav class="v-navbar bg-white shadow py-4">
<body class="forum bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
<nav class="v-navbar bg-white dark:bg-gray-800 shadow py-4 transition-colors duration-200">
<div class="container mx-auto px-4 md:flex md:items-center md:gap-4">
<div class="flex justify-between items-center">
<a class="text-lg font-semibold" href="{{ url(config('forum.frontend.router.prefix')) }}">Laravel Forum</a>
<button class="navbar-toggler block md:hidden border rounded-md px-2 py-1" type="button" :class="{ collapsed: isCollapsed }" @click="isCollapsed = !isCollapsed">
<a class="text-lg font-semibold text-gray-900 dark:text-white" href="{{ url(config('forum.frontend.router.prefix')) }}">Laravel Forum</a>
<button class="navbar-toggler block md:hidden border rounded-md px-2 py-1 text-gray-700 dark:text-gray-300 dark:border-gray-600" type="button" :class="{ collapsed: isCollapsed }" @click="isCollapsed = !isCollapsed">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="navbar-toggler-icon w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
@@ -30,37 +38,37 @@
<div class="grow justify-between navbar-collapse" :class="{ 'flex flex-col': !isCollapsed, 'hidden md:flex': isCollapsed }">
<ul class="flex flex-col md:flex-row gap-3 mb-4 md:mb-0">
<li>
<a class="text-gray-500 hover:text-gray-800" href="{{ route('home') }}">Home</a>
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('home') }}">Home</a>
</li>
<li>
<a class="text-gray-500 hover:text-gray-800" href="{{ url(config('forum.frontend.router.prefix')) }}">{{ trans('forum::general.index') }}</a>
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url(config('forum.frontend.router.prefix')) }}">{{ trans('forum::general.index') }}</a>
</li>
<li>
<a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.recent') }}">{{ trans('forum::threads.recent') }}</a>
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('forum.recent') }}">{{ trans('forum::threads.recent') }}</a>
</li>
@auth
<li>
<a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.unread') }}">{{ trans('forum::threads.unread_updated') }}</a>
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('forum.unread') }}">{{ trans('forum::threads.unread_updated') }}</a>
</li>
@endauth
@can ('moveCategories')
<li>
<a class="text-gray-500 hover:text-gray-800" href="{{ route('forum.category.manage') }}">{{ trans('forum::general.manage') }}</a>
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ route('forum.category.manage') }}">{{ trans('forum::general.manage') }}</a>
</li>
@endcan
</ul>
<ul class="navbar-nav flex gap-4 flex-col md:flex-row">
@if (Auth::check())
<li class="nav-item dropdown relative">
<a class="dropdown-toggle text-gray-500 flex items-center gap-1" href="#" id="navbarDropdownMenuLink" @click="isUserDropdownCollapsed = !isUserDropdownCollapsed">
<a class="dropdown-toggle text-gray-500 dark:text-gray-400 flex items-center gap-1 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="#" id="navbarDropdownMenuLink" @click="isUserDropdownCollapsed = !isUserDropdownCollapsed">
{{ $username }}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</a>
<div class="border absolute left-0 bg-white rounded-md w-44 divide-y" :class="{ hidden: isUserDropdownCollapsed }" aria-labelledby="navbarDropdownMenuLink">
<a class="block px-4 py-2" href="{{ url('/logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
<div class="border dark:border-gray-600 absolute left-0 bg-white dark:bg-gray-800 rounded-md w-44 divide-y dark:divide-gray-600 shadow-lg" :class="{ hidden: isUserDropdownCollapsed }" aria-labelledby="navbarDropdownMenuLink">
<a class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" href="{{ url('/logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
Log out
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
@@ -70,10 +78,10 @@
</li>
@else
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Log in</a>
<a class="nav-link text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url('/login') }}">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
<a class="nav-link text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors" href="{{ url('/register') }}">Register</a>
</li>
@endif
</ul>
@@ -89,9 +97,5 @@
</div>
@yield('footer')
<script>
window.defaultCategoryColor = '{{ config('forum.frontend.default_category_color') }}';
</script>
</body>
</html>
@@ -1,10 +1,10 @@
<div tabindex="-1" role="dialog" data-modal="{{ $key }}" class="fixed top-0 left-0 w-full h-full hidden z-10 items-center justify-center">
<div class="fixed top-0 left-0 w-full h-full bg-black/25" data-close-modal></div>
<div class="relative bg-white rounded-md max-w-screen-sm w-full m-2" role="document">
<div class="fixed top-0 left-0 w-full h-full bg-black/25 dark:bg-black/50" data-close-modal></div>
<div class="relative bg-white dark:bg-gray-800 rounded-md max-w-screen-sm w-full m-2 transition-colors" role="document">
<div class="">
<div class="border-b px-6 py-4 flex justify-between">
<h5 class="text-xl font-medium flex items-center gap-1">{!!$title !!}</h5>
<button type="button" aria-label="Close" data-close-modal>
<div class="border-b dark:border-gray-700 px-6 py-4 flex justify-between">
<h5 class="text-xl font-medium flex items-center gap-1 text-gray-900 dark:text-gray-100">{!!$title !!}</h5>
<button type="button" aria-label="Close" data-close-modal class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
@@ -20,7 +20,7 @@
{{ $slot }}
</div>
<div class="border-t px-6 py-4 flex justify-end gap-4">
<div class="border-t dark:border-gray-700 px-6 py-4 flex justify-end gap-4">
<x-forum::button-secondary type="button" class="btn btn-secondary" data-close-modal>{{ trans('forum::general.cancel') }}</x-forum::button-secondary>
{{ $actions }}
</div>
@@ -1,16 +1,16 @@
@php
$colorClasses = match ($type) {
'primary', '', null => 'bg-blue-100 text-blue-700',
'success', '', null => 'bg-green-100 text-green-700',
'danger' => 'bg-orange-100 text-orange-700'
'primary', '', null => 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800',
'success', '', null => 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800',
'danger' => 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 border border-orange-200 dark:border-orange-800'
};
@endphp
<div class="alert alert-{{ $type }} alert-dismissable rounded-md my-4 p-4 flex justify-between gap-4 {{ $colorClasses }}">
<div class="alert alert-{{ $type }} alert-dismissable rounded-md my-4 p-4 flex justify-between gap-4 {{ $colorClasses }} transition-colors">
<div class="message">
{!! $message !!}
</div>
<button type="button" data-dismiss="alert" aria-hidden="true">
<button type="button" data-dismiss="alert" aria-hidden="true" class="hover:opacity-70 transition-opacity">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
@@ -1,4 +1,4 @@
@if ($category->parent !== null)
@include ('forum::partials.breadcrumb-categories', ['category' => $category->parent])
@endif
<li class=""><a href="{{ Forum::route('category.show', $category) }}" class="text-blue-500">{{ $category->title }}</a></li>
<li class=""><a href="{{ Forum::route('category.show', $category) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $category->title }}</a></li>
@@ -1,11 +1,11 @@
<nav aria-label="breadcrumb" class="mb-4">
<ol class="flex flex-wrap [&_li]:after:content-['/'] [&_li]:after:px-2 [&_li]:after:text-gray-500 [&_li:last-child]:after:content-['']">
<li class=""><a href="{{ url(config('forum.frontend.router.prefix')) }}" class="text-blue-500">{{ trans('forum::general.index') }}</a></li>
<ol class="flex flex-wrap [&_li]:after:content-['/'] [&_li]:after:px-2 [&_li]:after:text-gray-500 dark:[&_li]:after:text-gray-400 [&_li:last-child]:after:content-[''] text-gray-700 dark:text-gray-300">
<li class=""><a href="{{ url(config('forum.frontend.router.prefix')) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::general.index') }}</a></li>
@if (isset($category) && $category)
@include ('forum::partials.breadcrumb-categories', ['category' => $category])
@endif
@if (isset($thread) && $thread)
<li class=""><a href="{{ Forum::route('thread.show', $thread) }}" class="text-blue-500">{{ $thread->title }}</a></li>
<li class=""><a href="{{ Forum::route('thread.show', $thread) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ $thread->title }}</a></li>
@endif
@if (isset($breadcrumbs_append) && count($breadcrumbs_append) > 0)
@foreach ($breadcrumbs_append as $breadcrumb)
@@ -2,9 +2,9 @@
@section ('content')
<div id="delete-post">
<h2 class="text-3xl">{{ trans_choice('forum::posts.delete', 1) }}</h2>
<h2 class="text-3xl text-gray-900 dark:text-gray-100">{{ trans_choice('forum::posts.delete', 1) }}</h2>
<hr>
<hr class="border-gray-300 dark:border-gray-700">
@include ('forum::post.partials.list', ['post' => $post, 'single' => true])
@@ -12,13 +12,13 @@
@csrf
@method('DELETE')
<div class="bg-white border rounded-md mb-3">
<div class="p-4">
<div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-md mb-3 transition-colors">
<div class="p-4 text-gray-900 dark:text-gray-100">
@if (config('forum.general.soft_deletes'))
<div class="form-check" v-if="state.selectedPostAction == 'delete'">
<input class="form-check-input" type="checkbox" name="permadelete" value="1" id="permadelete">
<label class="form-check-label" for="permadelete">
<input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="permadelete" value="1" id="permadelete">
<label class="form-check-label text-gray-700 dark:text-gray-300" for="permadelete">
{{ trans('forum::general.perma_delete') }}
</label>
</div>
@@ -30,7 +30,7 @@
<div class="flex justify-end items-center gap-2">
<x-forum::button-link href="{{ URL::previous() }}">{{ trans('forum::general.cancel') }}</x-forum::button-link>
<x-forum::button type="submit" class="bg-red-500 px-5">{{ trans('forum::general.delete') }}</x-forum::button>
<x-forum::button type="submit" class="bg-red-500 dark:bg-red-600 hover:bg-red-400 dark:hover:bg-red-500 px-5">{{ trans('forum::general.delete') }}</x-forum::button>
</div>
</form>
</div>
@@ -2,9 +2,9 @@
@section ('content')
<div id="delete-post">
<h2 class="flex-grow-1">{{ trans_choice('forum::posts.restore', 1) }}</h2>
<h2 class="flex-grow-1 text-3xl text-gray-900 dark:text-gray-100">{{ trans_choice('forum::posts.restore', 1) }}</h2>
<hr>
<hr class="border-gray-300 dark:border-gray-700">
@include ('forum::post.partials.list', ['post' => $post, 'single' => true])
@@ -12,14 +12,14 @@
@csrf
@method('POST')
<div class="card mb-3">
<div class="card-body">
<div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-md mb-3 transition-colors">
<div class="p-4 text-gray-900 dark:text-gray-100">
{{ trans('forum::general.generic_confirm') }}
</div>
</div>
<div class="text-end">
<a href="{{ URL::previous() }}" class="btn btn-link">{{ trans('forum::general.cancel') }}</a>
<div class="flex justify-end items-center gap-2">
<x-forum::button-link href="{{ URL::previous() }}" class="text-blue-500 dark:text-blue-400">{{ trans('forum::general.cancel') }}</x-forum::button-link>
<x-forum::button type="submit" class="px-5">
{{ trans('forum::general.restore') }}
</x-forum::button>
@@ -2,15 +2,15 @@
@section ('content')
<div id="create-post">
<h2 class="text-3xl font-medium my-3">{{ trans('forum::general.new_reply') }} ({{ $thread->title }})</h2>
<h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::general.new_reply') }} ({{ $thread->title }})</h2>
@if ($post !== null && !$post->trashed())
<div class="mb-2">{{ trans('forum::general.replying_to', ['item' => $post->authorName]) }}:</div>
<div class="mb-2 text-gray-700 dark:text-gray-300">{{ trans('forum::general.replying_to', ['item' => $post->authorName]) }}:</div>
@include ('forum::post.partials.quote')
@endif
<hr class="my-4" />
<hr class="my-4 border-gray-300 dark:border-gray-700" />
<form method="POST" action="{{ Forum::route('post.store', $thread) }}">
{!! csrf_field() !!}
@@ -24,7 +24,7 @@
</div>
<div class="flex justify-end items-center gap-4">
<a href="{{ URL::previous() }}" class="text-blue-500 underline">{{ trans('forum::general.cancel') }}</a>
<a href="{{ URL::previous() }}" class="text-blue-500 dark:text-blue-400 underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::general.cancel') }}</a>
<x-forum::button type="submit" class="">{{ trans('forum::general.reply') }}</x-forum::button>
</div>
</form>
@@ -2,12 +2,12 @@
@section ('content')
<div id="edit-post">
<h2 class="text-3xl font-medium my-3">{{ trans('forum::posts.edit') }} ({{ $thread->title }})</h2>
<h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::posts.edit') }} ({{ $thread->title }})</h2>
<hr class="mb-4">
<hr class="mb-4 border-gray-300 dark:border-gray-700">
@if ($post->parent)
<h3>{{ trans('forum::general.response_to', ['item' => $post->parent->authorName]) }}...</h3>
<h3 class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.response_to', ['item' => $post->parent->authorName]) }}...</h3>
@include ('forum::post.partials.list', ['post' => $post->parent, 'single' => true])
@endif
@@ -21,7 +21,7 @@
</div>
<div class="flex items-center gap-4 justify-end">
<a href="{{ URL::previous() }}" class="underline text-blue-500">{{ trans('forum::general.cancel') }}</a>
<a href="{{ URL::previous() }}" class="underline text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::general.cancel') }}</a>
<x-forum::button type="submit">{{ trans('forum::general.save') }}</x-forum::button>
</div>
</form>
@@ -1,14 +1,14 @@
<div @if (!$post->trashed())id="post-{{ $post->sequence }}"@endif
class="bg-white border mb-2 rounded-md {{ $post->trashed() || $thread->trashed() ? 'opacity-50' : '' }}"
:class="{ 'border-blue-500': state.selectedPosts.includes({{ $post->id }}) }">
<div class="bg-gray-100 border-b px-6 py-4 flex justify-between flex-row-reverse rounded-t-md">
class="bg-white dark:bg-gray-800 border dark:border-gray-700 mb-2 rounded-md transition-colors {{ $post->trashed() || $thread->trashed() ? 'opacity-50' : '' }}"
:class="{ 'border-blue-500 dark:border-blue-400': state.selectedPosts.includes({{ $post->id }}) }">
<div class="bg-gray-100 dark:bg-gray-700 border-b dark:border-gray-600 px-6 py-4 flex justify-between flex-row-reverse rounded-t-md transition-colors">
@if (!isset($single) || !$single)
<span class="float-end">
<a href="{{ Forum::route('thread.show', $post) }}" class="text-blue-500">#{{ $post->sequence }}</a>
<a href="{{ Forum::route('thread.show', $post) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">#{{ $post->sequence }}</a>
@if ($post->sequence != 1)
@can ('deletePosts', $post->thread)
@can ('delete', $post)
<input type="checkbox" name="posts[]" :value="{{ $post->id }}" v-model="state.selectedPosts" class="ml-2" />
<input type="checkbox" name="posts[]" :value="{{ $post->id }}" v-model="state.selectedPosts" class="ml-2 rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" />
@endcan
@endcan
@endif
@@ -16,8 +16,8 @@
@endif
<div>
{{ $post->authorName }}
<span class="text-gray-500">
<span class="text-gray-900 dark:text-gray-100">{{ $post->authorName }}</span>
<span class="text-gray-500 dark:text-gray-400">
@include ('forum::partials.timestamp', ['carbon' => $post->created_at])
@if ($post->hasBeenUpdated())
({{ trans('forum::general.last_updated') }} @include ('forum::partials.timestamp', ['carbon' => $post->updated_at]))
@@ -25,7 +25,7 @@
</span>
</div>
</div>
<div class="p-6">
<div class="p-6 text-gray-900 dark:text-gray-100">
@if ($post->parent !== null)
@include ('forum::post.partials.quote', ['post' => $post->parent])
@endif
@@ -43,11 +43,11 @@
@if (!isset($single) || !$single)
<div class="flex items-center gap-4 justify-end mt-4">
@if (!$post->trashed())
<a href="{{ Forum::route('post.show', $post) }}" class="text-gray-500 hover:text-gray-800">{{ trans('forum::general.permalink') }}</a>
<a href="{{ Forum::route('post.show', $post) }}" class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transition-colors">{{ trans('forum::general.permalink') }}</a>
@if ($post->sequence != 1)
@can ('deletePosts', $post->thread)
@can ('delete', $post)
<a href="{{ Forum::route('post.confirm-delete', $post) }}" class="text-red-500 hover:text-red-800">{{ trans('forum::general.delete') }}</a>
<a href="{{ Forum::route('post.confirm-delete', $post) }}" class="text-red-500 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 transition-colors">{{ trans('forum::general.delete') }}</a>
@endcan
@endcan
@endif
@@ -1,13 +1,15 @@
<div class="bg-white rounded-md border mb-2">
<div class="bg-white dark:bg-gray-800 rounded-md border dark:border-gray-700 mb-2 transition-colors">
<div class="p-6">
<div class="flex justify-between flex-row-reverse mb-2">
<span>
<a href="{{ Forum::route('thread.show', $post) }}" class="text-gray-500">#{{ $post->sequence }}</a>
<a href="{{ Forum::route('thread.show', $post) }}" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">#{{ $post->sequence }}</a>
</span>
<div>
<strong>{{ $post->authorName }}</strong> <span class="text-gray-500">{{ $post->posted }}</span>
<strong class="text-gray-900 dark:text-gray-100">{{ $post->authorName }}</strong> <span class="text-gray-500 dark:text-gray-400">{{ $post->posted }}</span>
</div>
</div>
{!! \Illuminate\Support\Str::limit(Forum::render($post->content)) !!}
<div class="text-gray-900 dark:text-gray-100">
{!! \Illuminate\Support\Str::limit(Forum::render($post->content)) !!}
</div>
</div>
</div>
@@ -2,7 +2,7 @@
@section ('content')
<div id="create-thread">
<h2 class="text-3xl">{{ trans('forum::threads.new_thread') }} ({{ $category->title }})</h2>
<h2 class="text-3xl text-gray-900 dark:text-gray-100">{{ trans('forum::threads.new_thread') }} ({{ $category->title }})</h2>
<form method="POST" action="{{ Forum::route('thread.store', $category) }}">
@csrf
@@ -17,7 +17,7 @@
</div>
<div class="text-end">
<x-forum::button-link href="{{ URL::previous() }}" class="bg-gray-500">{{ trans('forum::general.cancel') }}</x-forum::button-link>
<x-forum::button-link href="{{ URL::previous() }}" class="bg-gray-500 dark:bg-gray-600">{{ trans('forum::general.cancel') }}</x-forum::button-link>
<x-forum::button type="submit">{{ trans('forum::general.create') }}</x-forum::button>
</div>
</form>
@@ -4,7 +4,7 @@
@slot('route', Forum::route('unread.mark-as-read'))
@slot('method', 'PATCH')
<p>{{ trans('forum::general.generic_confirm') }}</p>
<p class="text-gray-900 dark:text-gray-100">{{ trans('forum::general.generic_confirm') }}</p>
@slot('actions')
<x-forum::button type="submit">
@@ -1,16 +1,16 @@
<div class="bg-white" :class="{ 'ring-1 ring-blue-500': state.selectedThreads.includes({{ $thread->id }}) }">
<div class="bg-white dark:bg-gray-800 transition-colors" :class="{ 'ring-1 ring-blue-500 dark:ring-blue-400': state.selectedThreads.includes({{ $thread->id }}) }">
<div class="flex flex-col md:items-start md:flex-row md:justify-between md:gap-4 p-6">
<div class="md:w-3/6 text-center md:text-left">
<span class="lead">
<a href="{{ Forum::route('thread.show', $thread) }}" @if (isset($category))style="color: {{ $category->color_light_mode }};"@endif class="text-lg">{{ $thread->title }}</a>
<a href="{{ Forum::route('thread.show', $thread) }}" @if (isset($category))style="color: {{ $category->color_light_mode }};"@endif class="text-lg hover:opacity-80 transition-opacity">{{ $thread->title }}</a>
</span>
<br>
{{ $thread->authorName }}
<span class="text-gray-500"> @include ('forum::partials.timestamp', ['carbon' => $thread->created_at])</span>
<span class="text-gray-900 dark:text-gray-100">{{ $thread->authorName }}</span>
<span class="text-gray-500 dark:text-gray-400"> @include ('forum::partials.timestamp', ['carbon' => $thread->created_at])</span>
@if (!isset($category))
<br>
<a href="{{ Forum::route('category.show', $thread->category) }}" style="color: {{ $thread->category->color_light_mode }};">{{ $thread->category->title }}</a>
<a href="{{ Forum::route('category.show', $thread->category) }}" style="color: {{ $thread->category->color_light_mode }};" class="hover:opacity-80 transition-opacity">{{ $thread->category->title }}</a>
@endif
</div>
@@ -35,17 +35,17 @@
@if ($thread->lastPost)
<div class="md:w-1/6 flex justify-center md:flex-col md:items-end">
<a href="{{ Forum::route('thread.show', $thread->lastPost) }}" class="text-blue-500">{{ trans('forum::posts.view') }} &raquo;</a>
<a href="{{ Forum::route('thread.show', $thread->lastPost) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::posts.view') }} &raquo;</a>
<div>
{{ $thread->lastPost->authorName }}
<span class="text-gray-500"> @include ('forum::partials.timestamp', ['carbon' => $thread->lastPost->created_at])</span>
<span class="text-gray-900 dark:text-gray-100">{{ $thread->lastPost->authorName }}</span>
<span class="text-gray-500 dark:text-gray-400"> @include ('forum::partials.timestamp', ['carbon' => $thread->lastPost->created_at])</span>
</div>
</div>
@endif
@if (isset($category) && isset($selectableThreadIds) && in_array($thread->id, $selectableThreadIds))
<div class="" style="flex: 0;">
<input type="checkbox" name="threads[]" :value="{{ $thread->id }}" v-model="state.selectedThreads">
<input type="checkbox" name="threads[]" :value="{{ $thread->id }}" v-model="state.selectedThreads" class="rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700">
</div>
@endif
</div>
@@ -2,7 +2,7 @@
@section ('content')
<div id="new-posts">
<h2 class="text-3xl font-medium my-3">{{ trans('forum::threads.recent') }}</h2>
<h2 class="text-3xl font-medium my-3 text-gray-900 dark:text-gray-100">{{ trans('forum::threads.recent') }}</h2>
@if (!$threads->isEmpty())
<div class="my-3">
@@ -11,8 +11,8 @@
@endforeach
</div>
@else
<div class="bg-white my-3">
<div class="card-body text-center text-muted">
<div class="bg-white dark:bg-gray-800 my-3 transition-colors">
<div class="card-body text-center text-muted text-gray-500 dark:text-gray-400 p-6">
{{ trans('forum::threads.none_found') }}
</div>
</div>
@@ -3,7 +3,7 @@
@section ('content')
<div id="thread">
<div class="flex flex-col md:flex-row justify-between my-4">
<h2 class="grow text-3xl font-semibold">{{ $thread->title }}</h2>
<h2 class="grow text-3xl font-semibold text-gray-900 dark:text-gray-100">{{ $thread->title }}</h2>
<div class="flex flex-col md:flex-row items-center gap-2">
@if (Gate::allows('deleteThreads', $thread->category) && Gate::allows('delete', $thread))
@@ -108,10 +108,10 @@
@if ((count($posts) > 1 || $posts->currentPage() > 1) && (Gate::allows('deletePosts', $thread) || Gate::allows('restorePosts', $thread)) && count($selectablePosts) > 0)
<div class="text-end mb-2">
<div class="form-check">
<label for="selectAllPosts">
<label for="selectAllPosts" class="text-gray-700 dark:text-gray-300">
{{ trans('forum::posts.select_all') }}
</label>
<input type="checkbox" value="" id="selectAllPosts" class="align-middle" @click="toggleAll" :checked="state.selectedPosts.length == posts.data.length">
<input type="checkbox" value="" id="selectAllPosts" class="align-middle rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" @click="toggleAll" :checked="state.selectedPosts.length == posts.data.length">
</div>
</div>
@endif
@@ -181,11 +181,13 @@
@if ($thread->trashed() && Gate::allows('restoreThreads', $thread->category) && Gate::allows('restore', $thread))
@component('forum::modal-form')
@slot('key', 'restore-thread')
@slot('title', '<i data-feather="refresh-cw" class="text-gray-500"></i>' . trans('forum::general.restore'))
@slot('title', '<i data-feather="refresh-cw" class="text-gray-500 dark:text-gray-400"></i>' . trans('forum::general.restore'))
@slot('route', Forum::route('thread.restore', $thread))
@slot('method', 'POST')
{{ trans('forum::general.generic_confirm') }}
<div class="text-gray-900 dark:text-gray-100">
{{ trans('forum::general.generic_confirm') }}
</div>
@slot('actions')
<x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -196,20 +198,22 @@
@if (Gate::allows('deleteThreads', $thread->category) && Gate::allows('delete', $thread))
@component('forum::modal-form')
@slot('key', 'delete-thread')
@slot('title', '<i data-feather="trash" class="text-gray-500"></i>' . trans('forum::threads.delete'))
@slot('title', '<i data-feather="trash" class="text-gray-500 dark:text-gray-400"></i>' . trans('forum::threads.delete'))
@slot('route', Forum::route('thread.delete', $thread))
@slot('method', 'DELETE')
@if (config('forum.general.soft_deletes'))
<div class="form-check">
<input class="form-check-input" type="checkbox" name="permadelete" value="1" id="permadelete">
<label class="form-check-label" for="permadelete">
{{ trans('forum::general.perma_delete') }}
</label>
</div>
@else
{{ trans('forum::general.generic_confirm') }}
@endif
<div class="text-gray-900 dark:text-gray-100">
@if (config('forum.general.soft_deletes'))
<div class="form-check">
<input class="form-check-input rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" type="checkbox" name="permadelete" value="1" id="permadelete">
<label class="form-check-label text-gray-700 dark:text-gray-300" for="permadelete">
{{ trans('forum::general.perma_delete') }}
</label>
</div>
@else
{{ trans('forum::general.generic_confirm') }}
@endif
</div>
@slot('actions')
<x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -219,13 +223,15 @@
@if (config('forum.general.soft_deletes'))
@component('forum::modal-form')
@slot('key', 'perma-delete-thread')
@slot('title', '<i data-feather="trash" class="text-gray-500"></i>' . trans_choice('forum::threads.perma_delete', 1))
@slot('title', '<i data-feather="trash" class="text-gray-500 dark:text-gray-400"></i>' . trans_choice('forum::threads.perma_delete', 1))
@slot('route', Forum::route('thread.delete', $thread))
@slot('method', 'DELETE')
<input type="hidden" name="permadelete" value="1" />
{{ trans('forum::general.generic_confirm') }}
<div class="text-gray-900 dark:text-gray-100">
{{ trans('forum::general.generic_confirm') }}
</div>
@slot('actions')
<x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -239,11 +245,13 @@
@if ($thread->locked)
@component('forum::modal-form')
@slot('key', 'unlock-thread')
@slot('title', '<i data-feather="unlock" class="text-gray-500"></i> ' . trans('forum::threads.unlock'))
@slot('title', '<i data-feather="unlock" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::threads.unlock'))
@slot('route', Forum::route('thread.unlock', $thread))
@slot('method', 'POST')
{{ trans('forum::general.generic_confirm') }}
<div class="text-gray-900 dark:text-gray-100">
{{ trans('forum::general.generic_confirm') }}
</div>
@slot('actions')
<x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -252,11 +260,13 @@
@else
@component('forum::modal-form')
@slot('key', 'lock-thread')
@slot('title', '<i data-feather="lock" class="text-gray-500"></i> ' . trans('forum::threads.lock'))
@slot('title', '<i data-feather="lock" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::threads.lock'))
@slot('route', Forum::route('thread.lock', $thread))
@slot('method', 'POST')
{{ trans('forum::general.generic_confirm') }}
<div class="text-gray-900 dark:text-gray-100">
{{ trans('forum::general.generic_confirm') }}
</div>
@slot('actions')
<x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -269,11 +279,13 @@
@if ($thread->pinned)
@component('forum::modal-form')
@slot('key', 'unpin-thread')
@slot('title', '<i data-feather="arrow-down" class="text-gray-500"></i> ' . trans('forum::threads.unpin'))
@slot('title', '<i data-feather="arrow-down" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::threads.unpin'))
@slot('route', Forum::route('thread.unpin', $thread))
@slot('method', 'POST')
{{ trans('forum::general.generic_confirm') }}
<div class="text-gray-900 dark:text-gray-100">
{{ trans('forum::general.generic_confirm') }}
</div>
@slot('actions')
<x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -282,11 +294,13 @@
@else
@component('forum::modal-form')
@slot('key', 'pin-thread')
@slot('title', '<i data-feather="arrow-up" class="text-gray-500"></i> ' . trans('forum::threads.pin'))
@slot('title', '<i data-feather="arrow-up" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::threads.pin'))
@slot('route', Forum::route('thread.pin', $thread))
@slot('method', 'POST')
{{ trans('forum::general.generic_confirm') }}
<div class="text-gray-900 dark:text-gray-100">
{{ trans('forum::general.generic_confirm') }}
</div>
@slot('actions')
<x-forum::button type="submit">{{ trans('forum::general.proceed') }}</x-forum::button>
@@ -298,7 +312,7 @@
@can ('rename', $thread)
@component('forum::modal-form')
@slot('key', 'rename-thread')
@slot('title', '<i data-feather="edit-2" class="text-gray-500"></i> ' . trans('forum::general.rename'))
@slot('title', '<i data-feather="edit-2" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::general.rename'))
@slot('route', Forum::route('thread.rename', $thread))
@slot('method', 'POST')
@@ -316,15 +330,15 @@
@can ('moveThreadsFrom', $category)
@component('forum::modal-form')
@slot('key', 'move-thread')
@slot('title', '<i data-feather="corner-up-right" class="text-gray-500"></i> ' . trans('forum::general.move'))
@slot('title', '<i data-feather="corner-up-right" class="text-gray-500 dark:text-gray-400"></i> ' . trans('forum::general.move'))
@slot('route', Forum::route('thread.move', $thread))
@slot('method', 'POST')
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text" for="category-id">{{ trans_choice('forum::categories.category', 1) }}</label>
<label class="input-group-text text-gray-700 dark:text-gray-300" for="category-id">{{ trans_choice('forum::categories.category', 1) }}</label>
</div>
<select name="category_id" id="category-id" class="form-select">
<select name="category_id" id="category-id" class="form-select bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600">
@include ('forum::category.partials.options', ['hide' => $thread->category])
</select>
</div>
@@ -2,7 +2,7 @@
@section ('content')
<div id="new-posts">
<h2 class="text-3xl text-medium my-4">{{ trans('forum::threads.unread_updated') }}</h2>
<h2 class="text-3xl text-medium my-4 text-gray-900 dark:text-gray-100">{{ trans('forum::threads.unread_updated') }}</h2>
@if (!$threads->isEmpty())
<div class="">
@@ -11,7 +11,7 @@
@endforeach
</div>
@else
<div class="bg-white shadow rounded text-gray-500 text-center py-4">
<div class="bg-white dark:bg-gray-800 shadow rounded text-gray-500 dark:text-gray-400 text-center py-4 transition-colors">
{{ trans('forum::threads.none_found') }}
</div>
@endif