обновил стиль новостей

This commit is contained in:
developer 2026-05-08 21:06:07 +08:00
parent 0450c67892
commit 8eb64a1365
2 changed files with 64 additions and 29 deletions

View File

@ -1,5 +1,5 @@
<div> <div>
<a href="#" wire:click="$toggle('isActive')" class="d-none d-lg-block btn btn-primary">@if($post->id) Редактировать @else Новая публикация @endif</a> <a href="#" wire:click="$toggle('isActive')" class="d-none d-lg-block btn btn-primary"><i class="bi bi-pen"></i> @if($post->id) Редактировать @else Новая публикация @endif</a>
@if($isActive == 'active') @if($isActive == 'active')
<div class="modal fade show d-block bg-dark" style="--bs-bg-opacity: .5;z-index:3000" id="postCardModal" data-bs-backdrop="static" <div class="modal fade show d-block bg-dark" style="--bs-bg-opacity: .5;z-index:3000" id="postCardModal" data-bs-backdrop="static"
data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

View File

@ -1,41 +1,76 @@
<div> <div>
@isset($post) @isset($post)
@php
$imgBg = array_key_exists('primary_color', DESIGN_PARAMETERS)
? DESIGN_PARAMETERS['primary_color']
: '#000';
@endphp
<style>
.post-card-image {
position: relative;
height: 250px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.post-card-image::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color: {{$imgBg}};
opacity: 0.5;
z-index:0;
}
</style>
<div class="modal fade show d-block bg-dark" style="--bs-bg-opacity: .5;z-index:3000" id="postCardModal" data-bs-backdrop="static" <div class="modal fade show d-block bg-dark" style="--bs-bg-opacity: .5;z-index:3000" id="postCardModal" data-bs-backdrop="static"
data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-fullscreen-lg-down"> <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-body p-0 rounded-3 overflow-hidden border-light shadow">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
wire:click="close"></button>
</div>
<div class="modal-body">
@if ($post->image) @if ($post->image)
<div class="w-100" <div class="w-100 post-card-image d-flex align-items-end p-3 text-light fw-light"
style=" style="
height:250px; background-image:url('{{ $post->image }}');">
background-image:url('{{ $post->image }}'); <div class="z-1">
background-position: center; <h1 class="z-1">{{ $post->name }}</h1>
background-repeat: no-repeat; <div>
background-size: cover; "> Опубиковано {{ $post->created_at->format('d.m.Y') }}
</div> </div>
@endif
<div class="mt-2 d-flex justify-content-between align-items-center">
<h1 class="flex-fill">{{ $post->name }}</h1>
<div class="ms-auto hstack gap-2">
@can('update', $post)
@livewire('post.form', ['post' => $post])
@endcan
@can('delete', $post)
<form action="{{ route('admin.posts.delete', $post) }}" method="POST" onsubmit="return confirm('Вы уверены?')">
@csrf
<button type="submit" class="btn btn-danger"><i class="bi bi-x-lg"></i></button>
</form>
@endcan
</div> </div>
</div> </div>
<p> @else
{!! $post->trixRender('content') !!} <div class="w-100">
</p> <h1 class="">{{ $post->name }}</h1>
</div>
@endif
<div class="position-absolute w-100 end-0 top-0 p-1 d-flex flex-row">
<div class="flex-fill hstack gap-2">
</div>
<button type="button" class="ms-auto btn-close" data-bs-dismiss="modal" aria-label="Close"
wire:click="close" style="width:1.5rem;height:1.5rem;"></button>
</div>
<div class="container px-5">
<p>
{!! $post->trixRender('content') !!}
</p>
<div class="d-flex flex-row gap-3 justify-content-end py-3">
@can('update', $post)
@livewire('post.form', ['post' => $post])
@endcan
@can('delete', $post)
<form action="{{ route('admin.posts.delete', $post) }}" method="POST" onsubmit="return confirm('Вы уверены?')">
@csrf
<button type="submit" class="btn btn-danger"><i class="bi bi-x-lg"></i> Удалить</button>
</form>
@endcan
</div>
</div>
</div> </div>
</div> </div>
</div> </div>