mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
plebchat added
This commit is contained in:
Benjamin Takats
@@ -31,52 +31,57 @@
|
||||
<script src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.js"></script>
|
||||
@mapscripts
|
||||
<wireui:scripts/>
|
||||
<x-comments::scripts />
|
||||
<x-comments::scripts/>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
<!-- Styles -->
|
||||
<x-comments::styles />
|
||||
<x-comments::styles/>
|
||||
@livewireStyles
|
||||
@mapstyles
|
||||
<style>
|
||||
.comments {
|
||||
--comments-color-background: rgb(34, 34, 34);
|
||||
--comments-color-background: rgb(34, 34, 34);
|
||||
--comments-color-background-nested: rgb(34, 34, 34);
|
||||
--comments-color-background-paper: rgb(55, 51, 51);
|
||||
--comments-color-background-info: rgb(104, 89, 214);
|
||||
.comments {
|
||||
--comments-color-background: rgb(34, 34, 34);
|
||||
--comments-color-background: rgb(34, 34, 34);
|
||||
--comments-color-background-nested: rgb(34, 34, 34);
|
||||
--comments-color-background-paper: rgb(55, 51, 51);
|
||||
--comments-color-background-info: rgb(104, 89, 214);
|
||||
|
||||
--comments-color-reaction: rgb(59, 59, 59);
|
||||
--comments-color-reaction-hover: rgb(65, 63, 63);
|
||||
--comments-color-reacted: rgba(67, 56, 202, 0.25);
|
||||
--comments-color-reacted-hover: rgba(67, 56, 202, 0.5);
|
||||
--comments-color-reaction: rgb(59, 59, 59);
|
||||
--comments-color-reaction-hover: rgb(65, 63, 63);
|
||||
--comments-color-reacted: rgba(67, 56, 202, 0.25);
|
||||
--comments-color-reacted-hover: rgba(67, 56, 202, 0.5);
|
||||
|
||||
--comments-color-border: rgb(221, 221, 221);
|
||||
--comments-color-border: rgb(221, 221, 221);
|
||||
|
||||
--comments-color-text:white;
|
||||
--comments-color-text-dimmed: rgb(164, 164, 164);
|
||||
--comments-color-text-inverse: white;
|
||||
--comments-color-text: white;
|
||||
--comments-color-text-dimmed: rgb(164, 164, 164);
|
||||
--comments-color-text-inverse: white;
|
||||
|
||||
--comments-color-accent: rgba(67, 56, 202);
|
||||
--comments-color-accent-hover: rgba(67, 56, 202, 0.75);
|
||||
--comments-color-accent: rgba(67, 56, 202);
|
||||
--comments-color-accent-hover: rgba(67, 56, 202, 0.75);
|
||||
|
||||
--comments-color-danger: rgb(225, 29, 72);
|
||||
--comments-color-danger-hover: rgb(225, 29, 72, 0.75);
|
||||
--comments-color-danger: rgb(225, 29, 72);
|
||||
--comments-color-danger-hover: rgb(225, 29, 72, 0.75);
|
||||
|
||||
--comments-color-success: rgb(10, 200, 134);
|
||||
--comments-color-success-hover: rgb(10, 200, 134, 0.75);
|
||||
--comments-color-success: rgb(10, 200, 134);
|
||||
--comments-color-success-hover: rgb(10, 200, 134, 0.75);
|
||||
|
||||
--comments-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.comments-button {
|
||||
background-color: #F7931A !important;
|
||||
}
|
||||
--comments-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
.comments-button {
|
||||
background-color: #F7931A !important;
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-sans antialiased bg-21gray dark">
|
||||
@if(auth()->user())
|
||||
{{-- HIGHSCORE-CHAT --}}
|
||||
<livewire:chat.highscore-chat/>
|
||||
@endif
|
||||
<livewire:laravel-echo/>
|
||||
<x-notifications z-index="z-50" blur="md" align="center"/>
|
||||
<x-jet-banner/>
|
||||
|
||||
@@ -14,6 +14,18 @@
|
||||
{{ __('Hall of fame of our honorable plebs') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<x-button
|
||||
class="relative"
|
||||
primary
|
||||
lg
|
||||
wire:click="toggleChat">
|
||||
<i class="fa-thin fa-comments"></i>
|
||||
<span
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
|
||||
Chat
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
|
||||
127
resources/views/livewire/chat/highscore-chat.blade.php
Normal file
127
resources/views/livewire/chat/highscore-chat.blade.php
Normal file
@@ -0,0 +1,127 @@
|
||||
<div x-data="{ open: @entangle('open') }" x-show="open" class="relative z-50"
|
||||
aria-labelledby="slide-over-title" x-ref="dialog" aria-modal="true">
|
||||
|
||||
<div class="fixed inset-0 overflow-hidden">
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
|
||||
|
||||
<div x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
|
||||
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
|
||||
class="pointer-events-auto w-screen max-w-md"
|
||||
x-description="Slide-over panel, show/hide based on slide-over state.">
|
||||
<div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
|
||||
<div class="bg-amber-700 py-6 px-4 sm:px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-medium text-gray-900" id="slide-over-title">{{ __('PlebChat') }}</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button type="button"
|
||||
class="rounded-md bg-amber-700 text-amber-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
|
||||
@click="open = false">
|
||||
<span class="sr-only">{{ __('Close panel') }}</span>
|
||||
<svg class="h-6 w-6" x-description="Heroicon name: outline/x-mark"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<p class="text-sm text-gray-900">
|
||||
{{ __('This chat is limited by 100 messages.') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<!-- Replace with your content -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="flex antialiased text-gray-800 h-full">
|
||||
<div class="flex flex-row w-full overflow-x-hidden">
|
||||
<div class="flex flex-col flex-auto">
|
||||
<div
|
||||
class="flex flex-col h-full flex-auto flex-shrink-0 bg-21gray p-4"
|
||||
>
|
||||
<div
|
||||
x-data="{ scroll: () => { $el.scrollTo(0, $el.scrollHeight); }}"
|
||||
@chat-updated.window="scroll()"
|
||||
x-intersect="scroll()"
|
||||
class="flex flex-col overflow-x-auto mb-4">
|
||||
<div class="flex flex-col">
|
||||
<div class="grid grid-cols-12 gap-y-2">
|
||||
|
||||
@php
|
||||
$myMessageClass = 'col-start-1 col-end-8 p-3 rounded-lg';
|
||||
$otherMessageClass = 'col-start-6 col-end-13 p-3 rounded-lg';
|
||||
@endphp
|
||||
|
||||
@foreach($messages as $message)
|
||||
<div class="{{ auth()->id() === $message['fromId'] ? $myMessageClass : $otherMessageClass }}">
|
||||
<div class="flex flex-row items-center">
|
||||
<div
|
||||
class="flex items-center justify-center h-10 w-10 rounded-full flex-shrink-0"
|
||||
>
|
||||
<img class="object-cover rounded" src="{{ $message['userImg'] }}" alt="{{ $message['fromName'] }}">
|
||||
</div>
|
||||
<div
|
||||
class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
{{ $message['message'] }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 italic">
|
||||
{{ $message['time'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row items-center h-16 rounded-xl bg-white w-full px-4"
|
||||
>
|
||||
<div class="flex-grow ml-4">
|
||||
<form wire:submit.prevent="sendMessage">
|
||||
<div class="relative w-full">
|
||||
<input
|
||||
wire:model="myNewMessage"
|
||||
type="text"
|
||||
class="flex w-full border rounded-xl focus:outline-none focus:border-amber-300 pl-4 h-10"
|
||||
/>
|
||||
@error('myNewMessage')<p
|
||||
class="text-red-500 text-xs">{{ $message }}</p>@enderror
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<button
|
||||
wire:click="sendMessage"
|
||||
class="flex items-center justify-center bg-amber-500 hover:bg-amber-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
|
||||
>
|
||||
<span>{{ __('Send') }}</span>
|
||||
<span class="ml-2">
|
||||
<i class="fa-thin fa-envelope w-4 h-4 transform rotate-45 -mt-px"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /End replace -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user