Skip to content

Commit

Permalink
fix modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@SethSharp
SethSharp committed Jun 2, 2024
1 parent 82e6a5e commit c27c199
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 113 deletions.
4 changes: 2 additions & 2 deletions resources/views/components/body/wrapper.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div
class="flex flex-col gap-5 transition-all duration-500 ease-in opacity-0"
class="transition-all duration-500 ease-in opacity-0"
x-data="{ inView: false }"
x-intersect:enter="setTimeout(() => { inView = true }, 50)"
:class="{'translate-y-0 opacity-1 md:delay-500' : inView, 'translate-y-[2rem] opacity-0' : ! inView }"
:class="{' opacity-1 md:delay-500' : inView, 'translate-y-[2rem] opacity-0' : ! inView }"
>
{{ $slot }}
</div>
54 changes: 25 additions & 29 deletions resources/views/components/modals/register.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<div
class="size-full"
x-data="{
<div x-data="{
showModal: $wire.entangle('showRegisterModal'),
openModal() {
this.showModal = true
Expand All @@ -9,37 +7,35 @@ class="size-full"
this.showModal = false
}
}"
x-show="showModal"
@click.self="closeModal()"
x-cloak
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
>
<div x-show="showModal" @click="closeModal()" x-cloak
class="fixed inset-0 z-50 overflow-auto">
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white sm:w-1/2 p-6 rounded shadow-xl">
<h1 class="text-2xl font-bold mb-4">You need to register an account first!</h1>
<div class="bg-white sm:w-1/2 p-6 rounded shadow-xl">
<h1 class="text-2xl font-bold mb-4">You need to register an account first!</h1>

<p>
This is an easy process and allows the comments within these blogs
to be more likely to be actual people.
</p>
<p>
This is an easy process and allows the comments within these blogs
to be more likely to be actual people.
</p>

<div class=" mt-5 flex gap-x-4">
<button @click="closeModal()"
class="bg-white text-gray-600 border-2 border-transparent hover:border-gray-600 transition rounded-lg p-2">
Close
</button>
<div class="mt-5 flex gap-x-4">
<a href="{{ route('login') }}"
class="text-primary-600 border-2 border-primary-600 hover:border-transparent hover:text-white hover:bg-primary-600 transition rounded-lg p-2">
Login
</a>
<a href="{{ route('register') }}"
class="bg-primary-600 hover:bg-white text-white hover:text-primary-600 border-2 border-transparent hover:border-primary-600 transition rounded-lg p-2">
Register
</a>

<a href="{{route('register')}}"
class="bg-primary-600 hover:bg-primary-400 text-white transition rounded-lg p-2">
Register
</a>
<span class="my-auto text-gray-400"> or </span>

<span class="my-auto text-gray-400"> or </span>

<a href="{{route('login')}}"
class="text-primary-600 border-2 border-primary-600 hover:border-transparent hover:text-primary-400 transition rounded-lg p-2">
Login
</a>
</div>
</div>
<button @click="closeModal()"
class="bg-white text-gray-600 border-2 border-transparent hover:border-gray-600 transition rounded-lg p-2">
Close
</button>
</div>
</div>
</div>
4 changes: 2 additions & 2 deletions resources/views/livewire/blogs/comments/blog-comments.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<div>
<x-modals.register/>

<h3 class="text-gray-500 text-xl"> Comments ({{ count($comments) }})</h3>

<div class=" mt-4 px-2 sm:px-4 py-0.5 rounded-lg">
Expand Down Expand Up @@ -38,6 +40,4 @@ class="p-2 w-full rounded-xl text-gray-500"
@error('comment') <p class="text-red-500">{{ $message }}</p> @enderror
</form>
</div>

<x-modals.register/>
</div>
162 changes: 82 additions & 80 deletions resources/views/livewire/blogs/seth/show-blog.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,95 +14,97 @@
@endif
@endpush

<x-body.wrapper>
<div class="lg:w-4/5 mx-auto bg-white shadow-lg shadow-primary-500 rounded-lg p-8">
@role('admin', 'author')
<a href="{{ route('dashboard.blogs.edit', $this->blog) }}">
<x-icons.pencil-square class="size-8 text-gray-500 hover:text-gray-700"/>
</a>
@endrole
<div class="flex-wrap">
@if($collection)
<a href="{{ route('collections.show', $collection) }}" class="text-gray-400 font-medium text-md">
{{ $collection->title }}
</a>
@endif

<h1 class="text-2xl sm:text-4xl font-extrabold"> {{ $this->blog->title }}</h1>

<h6 class="text-gray-400 font-medium text-sm mt-1">
@if($this->blog->published_at)
{{ $this->blog->author->name }} {{ $this->blog->published_at_for_humans }}
@else
This blog is in a draft status
<div>
<x-modals.register/>

<x-body.wrapper>
<div class="lg:w-4/5 mx-auto bg-white shadow-lg shadow-primary-500 rounded-lg p-8">
@role('admin', 'author')
<a href="{{ route('dashboard.blogs.edit', $this->blog) }}">
<x-icons.pencil-square class="size-8 text-gray-500 hover:text-gray-700"/>
</a>
@endrole
<div class="flex-wrap">
@if($collection)
<a href="{{ route('collections.show', $collection) }}" class="text-gray-400 font-medium text-md">
{{ $collection->title }}
</a>
@endif
</h6>
</div>

<div class="mt-8 prose min-h-[400px] leading-loose">
{!! $this->blog->getContent() !!}
</div>
<h1 class="text-2xl sm:text-4xl font-extrabold"> {{ $this->blog->title }}</h1>

<h6 class="text-gray-400 font-medium text-sm mt-1">
@if($this->blog->published_at)
{{ $this->blog->author->name }} {{ $this->blog->published_at_for_humans }}
@else
This blog is in a draft status
@endif
</h6>
</div>

<div class="mt-12">
<div class="sm:flex">
<button type="button" wire:click="like"
class="flex my-auto mx-4 {{ $isLiked ? 'text-red-500 hover:text-red-300' : 'text-gray-400 hover:text-red-500' }}">
<x-icons.heart/>
<span class="text-gray-600 font-medium"> {{ $this->blogLikes }}</span>
</button>

<div class="gap-4 mt-4 flex py-5 sm:py-0 sm:flex sm:mt-0 overflow-x-auto">
@foreach($this->blog->tags as $tag)
<span
class="rounded-lg text-gray-700 h-fit border-[1px] bg-gray-100 text-sm px-2 py-1 whitespace-nowrap">
<div class="mt-8 prose min-h-[400px] leading-loose">
{!! $this->blog->getContent() !!}
</div>

<div class="mt-12">
<div class="sm:flex">
<button type="button" wire:click="like"
class="flex my-auto mx-4 {{ $isLiked ? 'text-red-500 hover:text-red-300' : 'text-gray-400 hover:text-red-500' }}">
<x-icons.heart/>
<span class="text-gray-600 font-medium"> {{ $this->blogLikes }}</span>
</button>

<div class="gap-4 mt-4 flex py-5 sm:py-0 sm:flex sm:mt-0 overflow-x-auto">
@foreach($this->blog->tags as $tag)
<span
class="rounded-lg text-gray-700 h-fit border-[1px] bg-gray-100 text-sm px-2 py-1 whitespace-nowrap">
{{ $tag->name }}
</span>
@endforeach
@endforeach
</div>
</div>
</div>

<div class="mt-8">
<livewire:blogs.comments.blog-comments :blog="$this->blog"/>
<div class="mt-8">
<livewire:blogs.comments.blog-comments :blog="$this->blog"/>
</div>
</div>
</div>

<div class="mx-auto grid lg:grid-cols-2 gap-6">
@if($prev)
<div
class="cursor-pointer rounded-lg border border-gray-300 transition hover:border-gray-500 hover:bg-gray-50 p-2">
<a href="{{ route('blogs.show', $prev) }}">
<div class="flex">
<span class="text-primary-600">Previous blog </span>
</div>
<div class="mx-auto grid lg:grid-cols-2 gap-6">
@if($prev)
<div
class="cursor-pointer rounded-lg border border-gray-300 transition hover:border-gray-500 hover:bg-gray-50 p-2">
<a href="{{ route('blogs.show', $prev) }}">
<div class="flex">
<span class="text-primary-600">Previous blog </span>
</div>

<div class="text-gray-700">{{ $prev->title }}</div>
</a>
</div>
@else
<div></div>
@endif

<div class="text-gray-700">{{ $prev->title }}</div>
</a>
</div>
@else
<div></div>
@endif

@if($next)
<div
class="cursor-pointer rounded-lg border border-gray-300 transition hover:border-gray-500 hover:bg-gray-50 p-2">
<a href="{{ route('blogs.show', $next) }}">
<div class="flex justify-end">
<span class="text-primary-600">Next blog </span>
</div>

<div class="flex justify-end text-right text-gray-700">{{ $next->title }}</div>
</a>
</div>
@endif
</div>
@if($next)
<div
class="cursor-pointer rounded-lg border border-gray-300 transition hover:border-gray-500 hover:bg-gray-50 p-2">
<a href="{{ route('blogs.show', $next) }}">
<div class="flex justify-end">
<span class="text-primary-600">Next blog </span>
</div>

<div class="flex justify-end text-right text-gray-700">{{ $next->title }}</div>
</a>
</div>
@endif
</div>

<div class="grid mb-6 mt-6">
@if ($recentBlog)
<h4 class="text-xl pb-4"> Recent Blog</h4>
<x-blogs.card :blog="$recentBlog"/>
@endif
<div class="grid mb-6 mt-6">
@if ($recentBlog)
<h4 class="text-xl pb-4"> Recent Blog</h4>
<x-blogs.card :blog="$recentBlog"/>
@endif
</div>
</div>

<x-modals.register/>
</div>
</x-body.wrapper>
</x-body.wrapper>
</div>

0 comments on commit c27c199

Please sign in to comment.