коррекция верстки для мобильной версии

This commit is contained in:
developer 2026-04-02 17:07:00 +08:00
parent 10b12c8526
commit ba619cfe2f
12 changed files with 133 additions and 90 deletions

View File

@ -13,7 +13,6 @@ public function mount()
$city = false; $city = false;
if (($company = AdminCompanyOfUser()) || ($company = AgentCompanyOfUser())) if (($company = AdminCompanyOfUser()) || ($company = AgentCompanyOfUser()))
{ {
//print_r($company);
if ($cityManager = CityManager::where('city_id', $company->city->id)->first()) if ($cityManager = CityManager::where('city_id', $company->city->id)->first())
{ {
$this->manager = $cityManager->user; $this->manager = $cityManager->user;

View File

@ -1,26 +1,28 @@
<div class=""> <div class="">
<!-- Button trigger modal --> <!-- Button trigger modal -->
<div class="d-flex justify-content-between"> <div class="d-flex flex-wrap justify-content-between align-self-start gap-2">
@if($room) @if($room)
<div class="text-primary"> <div class="text-primary">
<div class="text-uppercase fw-bold"> <div class="text-uppercase fw-bold">
{{ (($room['type'] == 0) ? $room['room'] . ' комн. ' . mb_strtolower($this->types[$room['type']]) : $this->types[$room['type']]) }} {{ (($room['type'] == 0) ? $room['room'] . ' комн. ' . mb_strtolower($this->types[$room['type']]) : $this->types[$room['type']]) }}
</div> </div>
<div class="d-flex gap-2 fs-6"> <div class="d-flex flex-wrap gap-2 fs-6">
<div class="badge text-bg-secondary">Помещение: {{ $room['name'] }}</div> <div class="badge text-bg-secondary">Помещение: {{ $room['name'] }}</div>
<div class="badge text-bg-secondary">Площадь: {{ $room['area'] }}</div> <div class="badge text-bg-secondary">Площадь: {{ $room['area'] }}</div>
<div class="badge text-bg-secondary">Этаж: {{ $room['level'] }}</div> <div class="badge text-bg-secondary">Этаж: {{ $room['level'] }}</div>
</div> </div>
</div> </div>
@endif @endif
<button type="button" wire:click="start()" class="btn btn-primary" <div>
onclick="plan7SelectorModal = new bootstrap.Modal(document.getElementById('plan7_selector_modal'), {});plan7SelectorModal.show()"> <button type="button" wire:click="start()" class="btn btn-primary"
@if($room) onclick="plan7SelectorModal = new bootstrap.Modal(document.getElementById('plan7_selector_modal'), {});plan7SelectorModal.show()">
Изменить @if($room)
@else Изменить
Выбрать помещение @else
@endif Выбрать помещение
</button> @endif
</button>
</div>
</div> </div>
@ -36,10 +38,12 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
@if($room) @if($room)
<div wire:loading.class="opacity-50" class="d-flex"> <div wire:loading.class="opacity-50" class="d-flex flex-wrap gap-3">
<div class="col-12 col-md-7"> <div class="col-12 col-md-7">
<img src="{{ array_key_exists($room['pla'], $allObjects['pla']) ? $allObjects['pla'][$room['pla']]['pla'] : '...' }}" @if(array_key_exists($room['pla'], $allObjects['pla']))
<img src="{{ $allObjects['pla'][$room['pla']]['pla'] }}"
class="img-fluid rounded-start" alt="..."> class="img-fluid rounded-start" alt="...">
@endif
</div> </div>
<div class="col px-3"> <div class="col px-3">
<h3 class="fw-bold mb-3 text-uppercase text-primary"> <h3 class="fw-bold mb-3 text-uppercase text-primary">
@ -48,25 +52,29 @@ class="img-fluid rounded-start" alt="...">
<div class="d-flex flex-wrap gap-3"> <div class="d-flex flex-wrap gap-3">
<div class="hstack gap-3 w-100"> <div class="hstack gap-3 w-100">
<div class="d-flex flex-column w-50 p-2 bg-light border border-1 rounded-4"> <div class="d-flex flex-column w-50 p-2 bg-light border border-1 rounded-4">
<span class="text-secondary">Помещение</span><span class="fs-3 text-dark">{{ $room['name'] }}</span> <span class="text-secondary">Помещение</span><span
class="fs-3 text-dark">{{ $room['name'] }}</span>
</div> </div>
<div class="d-flex flex-column w-50 p-2 bg-light border border-1 rounded-4"> <div class="d-flex flex-column w-50 p-2 bg-light border border-1 rounded-4">
<span class="text-secondary">Этаж</span><span class="fs-3 text-dark">{{ $room['level'] }}</span> <span class="text-secondary">Этаж</span><span
class="fs-3 text-dark">{{ $room['level'] }}</span>
</div> </div>
</div> </div>
<div class="d-flex flex-column w-100 p-2 bg-light border border-1 rounded-4"> <div class="d-flex flex-column w-100 p-2 bg-light border border-1 rounded-4">
<span class="text-secondary">Площадь</span><span class="fs-3 text-dark">{{ $room['area'] }} м<sup>2</sup></span> <span class="text-secondary">Площадь</span><span
class="fs-3 text-dark">{{ $room['area'] }} м<sup>2</sup></span>
</div> </div>
<div class="d-flex flex-column w-100 p-2 bg-light border border-1 rounded-4"> <div class="d-flex flex-column w-100 p-2 bg-light border border-1 rounded-4">
<span class="text-secondary">Стоимость</span><span class="fs-3 text-dark">{{ ($room['summ']) ? number_format($room['summ'], 0, '', ' ') . ' р.' : '' }}</span> <span class="text-secondary">Стоимость</span><span
class="fs-3 text-dark">{{ ($room['summ']) ? number_format($room['summ'], 0, '', ' ') . ' р.' : '' }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@endif @endif
@if(!$room) @if(!$room)
<div class="hstack gap-2"> <div class="d-flex gap-2 mb-3 flex-column flex-xl-row">
<div class="col-12 col-md-4 p-2 rounded-4 mb-3 bg-light border d-flex gap-2"> <div class="col-12 col-xl-4 p-2 rounded-4 bg-light border hstack gap-2">
<div class="flex-fill"> <div class="flex-fill">
<label>Дом/строение:</label> <label>Дом/строение:</label>
<div> <div>
@ -98,28 +106,34 @@ class="img-fluid rounded-start" alt="...">
@if(array_key_exists('type', $filter)) @if(array_key_exists('type', $filter))
@foreach($summary as $typeSummary) @foreach($summary as $typeSummary)
@if(array_key_exists('type', $typeSummary) && $typeSummary['type'] == $filter['type']) @if(array_key_exists('type', $typeSummary) && $typeSummary['type'] == $filter['type'])
<div class="p-2 rounded-4 mb-3 bg-light border"> <div class="d-flex flex-fill gap-2 flex-column flex-sm-row">
<label>Площадь:</label> <div class="p-2 rounded-4 bg-light border">
<div class="input-group"> <label>Площадь:</label>
<span class="input-group-text">от</span> <div class="input-group">
<input wire:loading.attr="disabled" type="number" wire:model.live.debounce.500ms="filter.min_area" <span class="input-group-text">от</span>
class="form-control" placeholder="{{ $typeSummary['min_area'] }}"> <input wire:loading.attr="disabled" type="number"
<span class="input-group-text">до</span> wire:model.live.debounce.500ms="filter.min_area" class="form-control"
<input wire:loading.attr="disabled" type="number" wire:model.live.debounce.500ms="filter.max_area" placeholder="{{ $typeSummary['min_area'] }}">
class="form-control" placeholder="{{ $typeSummary['max_area'] }}"> <span class="input-group-text">до</span>
<input wire:loading.attr="disabled" type="number"
wire:model.live.debounce.500ms="filter.max_area" class="form-control"
placeholder="{{ $typeSummary['max_area'] }}">
</div>
</div> </div>
</div> <div class="p-2 rounded-4 bg-light border">
<div class="p-2 rounded-4 mb-3 bg-light border"> <label>Стоимость:</label>
<label>Стоимость:</label> <div class="input-group">
<div class="input-group"> <span class="input-group-text">от</span>
<span class="input-group-text">от</span> <input wire:loading.attr="disabled"
<input wire:loading.attr="disabled" wire:model.live.debounce.500ms="filter.min_price" type="number" wire:model.live.debounce.500ms="filter.min_price" type="number"
class="form-control" class="form-control"
placeholder="{{ number_format($typeSummary['min_price'], 0, '', ' ') . ' р.' }}"> placeholder="{{ number_format($typeSummary['min_price'], 0, '', ' ') . ' р.' }}">
<span class="input-group-text">до</span> <span class="input-group-text">до</span>
<input wire:loading.attr="disabled" wire:model.live.debounce.500ms="filter.max_price" type="number" <input wire:loading.attr="disabled"
class="form-control" wire:model.live.debounce.500ms="filter.max_price" type="number"
placeholder="{{ number_format($typeSummary['max_price'], 0, '', ' ') . ' р.' }}"> class="form-control"
placeholder="{{ number_format($typeSummary['max_price'], 0, '', ' ') . ' р.' }}">
</div>
</div> </div>
</div> </div>
<div class="d-none p-2 rounded-4 mb-3 bg-light border"> <div class="d-none p-2 rounded-4 mb-3 bg-light border">
@ -148,7 +162,7 @@ class="form-control"
@endif @endif
<div wire:loading.class="opacity-50" class="d-flex flex-wrap"> <div wire:loading.class="opacity-50" class="d-flex flex-wrap">
@foreach($objs as $obj) @foreach($objs as $obj)
<div class="p-2 col-12 col-md-4"> <div class="p-2 col-12 col-sm-6 col-md-4 plan7-selector__container">
@if($obj['mode'] == 'bs') @if($obj['mode'] == 'bs')
<div class="card" wire:click="setHouse({{ $obj['id'] }})"> <div class="card" wire:click="setHouse({{ $obj['id'] }})">
<div class="card-body"> <div class="card-body">
@ -159,27 +173,27 @@ class="form-control"
</div> </div>
</div> </div>
@elseif($obj['mode'] == 'room') @elseif($obj['mode'] == 'room')
<div wire:click="setRoom({{ $obj['id'] }})" class="card mb-3" style="max-width: 540px;"> <div wire:click="setRoom({{ $obj['id'] }})" class="card plan7-selector__item" style="">
<div class="row g-0"> <div class="row g-0">
<div class="col-md-4 d-none d-md-block">
<img src="{{ array_key_exists($obj['pla'], $allObjects['pla']) ? $allObjects['pla'][$obj['pla']]['pla'] : '...' }}"
class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8"> <div class="col-md-8">
<div class="card-body"> <div class="card-body">
<h5 class="card-title"> <h5 class="card-title">
{{ (($obj['type'] == 0) ? $obj['room'] . ' комн. ' . mb_strtolower($this->types[$obj['type']]) : $this->types[$obj['type']]) }} {{ (($obj['type'] == 0) ? $obj['room'] . ' комн. ' . mb_strtolower($this->types[$obj['type']]) : $this->types[$obj['type']]) }}
</h5> </h5>
<p class="card-text"> <p class="card-text">
<div>Помещение: {{ $obj['name'] }}</div>
<div>Площадь: {{ $obj['area'] }}</div> <div>Площадь: {{ $obj['area'] }}</div>
<div>Помещение: {{ $obj['name'] }}</div>
<div>Этаж: {{ $obj['level'] }}</div> <div>Этаж: {{ $obj['level'] }}</div>
</p> </p>
<p class="card-text"> <h5 class="card-text">
{{ ($obj['summ']) ? number_format($obj['summ'], 0, '', ' ') . ' р.' : '' }} {{ ($obj['summ']) ? number_format($obj['summ'], 0, '', ' ') . ' р.' : '' }}
</p> </h5>
</div> </div>
</div> </div>
<div class="col-md-4 d-none d-sm-flex align-items-center overflow-hidden plan7-selector__image">
<img src="{{ array_key_exists($obj['pla'], $allObjects['pla']) ? $allObjects['pla'][$obj['pla']]['pla'] : '...' }}"
style="" class="img-fluid rounded" alt="...">
</div>
</div> </div>
</div> </div>
@endif @endif
@ -190,8 +204,10 @@ class="img-fluid rounded-start" alt="...">
</div> </div>
@if($room) @if($room)
<div class="modal-footer"> <div class="modal-footer">
<button wire:click="unsetRoom()" wire:loading.attr="disabled" type="button" class="btn btn-secondary">Выбрать другое</button> <button wire:click="unsetRoom()" wire:loading.attr="disabled" type="button"
<button wire:click="done()" wire:loading.attr="disabled" type="button" class="btn btn-primary" data-bs-dismiss="modal">Выбрать и class="btn btn-secondary">Выбрать другое</button>
<button wire:click="done()" wire:loading.attr="disabled" type="button" class="btn btn-primary"
data-bs-dismiss="modal">Выбрать и
закрыть</button> закрыть</button>
</div> </div>
@endif @endif

View File

@ -28,7 +28,7 @@
@endforeach @endforeach
</div> </div>
<div class="ms-auto py-2 hstack gap-2"> <div class="d-none ms-auto py-2 hstack gap-2">
<select class="form-select form-select-lg bg-white" disabled aria-label="Large select example"> <select class="form-select form-select-lg bg-white" disabled aria-label="Large select example">
<option selected>Город: любой</option> <option selected>Город: любой</option>
<option value="1">Иркутск</option> <option value="1">Иркутск</option>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 27 KiB

22
resources/css/plan7.css Normal file
View File

@ -0,0 +1,22 @@
.plan7-selector__container .card {
cursor: pointer;
}
.plan7-selector__container .card:hover {
box-shadow: 0 0 5px #ccc;
background-color: #fff;
transform: scale(1.05);
transition: transform .2s;
}
.plan7-selector__item .plan7-selector__image {
img {
margin: 2px;
filter: grayscale(1);
transition: transform .3s;
}
}
.plan7-selector__item:hover .plan7-selector__image img {
filter: none;
}

View File

@ -0,0 +1,25 @@
.zoomable-container {
backdrop-filter: blur(10px);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.zoomable-container:not(.zoomed):hover {
transform: scale(1.5);
background-color: rgb(33 33 33 / 60%);
background-blend-mode: multiply;
background-repeat: no-repeat;
background-position: center;
}
.zoomable-container.zoomed {
position: fixed;
top: 0;
left: 0;
margin: 0 auto;
}
.zoomable-container.zoomed .zoom-button {
display: none;
}

11
resources/js/zoomable.js Normal file
View File

@ -0,0 +1,11 @@
var images = document.querySelectorAll(".zoomable-container");
Array.prototype.forEach.call(images, function (img) {
img.addEventListener('click', function () {
if (!img.classList.contains('zoomed')) {
img.classList.add('zoomed');
} else {
img.classList.remove('zoomed');
}
});
});

View File

@ -190,33 +190,6 @@ class="bi bi-record-circle-fill align-middle" viewBox="0 0 16 16">
</form> </form>
</div> </div>
</div> </div>
<style>
.zoomable-container {
backdrop-filter: blur(10px);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.zoomable-container:not(.zoomed):hover {
transform: scale(1.5);
background-color: rgb(33 33 33 / 60%);
background-blend-mode: multiply;
background-repeat: no-repeat;
background-position: center;
}
.zoomable-container.zoomed {
position: fixed;
top: 0;
left: 0;
margin: 0 auto;
}
.zoomable-container.zoomed .zoom-button {
display: none;
}
</style>
<script> <script>
var images = document.querySelectorAll(".zoomable-container"); var images = document.querySelectorAll(".zoomable-container");

View File

@ -25,8 +25,8 @@
<i class="bi bi-person-plus"></i> <span class="d-inline d-none d-md-inline">Добавить клиента</span> <i class="bi bi-person-plus"></i> <span class="d-inline d-none d-md-inline">Добавить клиента</span>
</button> </button>
</div> </div>
<div class="d-block d-md-none position-fixed bottom-0 end-0"> <div class="d-block d-md-none position-fixed bottom-0 end-0 me-3">
<button type="button" class="shadow btn btn-secondary p-2 fs-3 rounded-pill" <button type="button" class="shadow btn btn-primary p-2 fs-3 rounded-pill"
style="margin-bottom:90px;width:4rem;height:4rem" data-bs-toggle="modal" style="margin-bottom:90px;width:4rem;height:4rem" data-bs-toggle="modal"
data-bs-target="#createClientModal"> data-bs-target="#createClientModal">
<i class="bi bi-person-plus"></i> <i class="bi bi-person-plus"></i>
@ -51,7 +51,7 @@
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="createClientModal" tabindex="-1" aria-labelledby="createAgentModalLabel" <div class="modal fade" id="createClientModal" tabindex="-1" aria-labelledby="createAgentModalLabel"
aria-hidden="true"> aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-sm-down">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Добавить клиента</h5> <h5 class="modal-title">Добавить клиента</h5>

View File

@ -15,7 +15,7 @@
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet"> <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/multiselect.js', 'resources/css/app.css', 'resources/css/docs.css', 'resources/css/multiselect.css']) @vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/multiselect.js', 'resources/js/zoomable.js', 'resources/css/app.css', 'resources/css/docs.css', 'resources/css/plan7.css', 'resources/css/zoomable.css', 'resources/css/multiselect.css'])
@include('layouts.design') @include('layouts.design')
<script src="https://plan7.ru/catalog/exp/cat.js"></script> <script src="https://plan7.ru/catalog/exp/cat.js"></script>
</head> </head>

View File

@ -2,11 +2,6 @@
@section('content') @section('content')
<script> <script>
setInterval(function() {
if (iframe = document.querySelector("iframe") ) {
console.log(iframe.contentWindow.location.href);
}
}, 5000);
</script> </script>
<div> <div>
@ -61,7 +56,7 @@ class="list-group-item list-group-item-action p-3 bg-white rounded border border
<div class="mt-3"> <div class="mt-3">
<div class="d-flex"> <div class="d-flex">
<div class="fs-5 fw-bold">Новости</div> <div class="fs-5 fw-bold">Новости</div>
<div class="ms-auto p-2">Смотреть все</div> <a class="ms-auto p-2" href="{{ route('posts') }}">Смотреть все</a>
</div> </div>
@livewire('posts.list', [ @livewire('posts.list', [
'count' => 3, 'count' => 3,
@ -132,5 +127,4 @@ class="" alt="...">
</div> </div>
</div> </div>
</div> </div>
@livewire('plan7Selector')
@endsection @endsection

View File

@ -8,7 +8,10 @@ export default defineConfig({
'resources/sass/app.scss', 'resources/sass/app.scss',
'resources/js/app.js', 'resources/js/app.js',
'resources/js/multiselect.js', 'resources/js/multiselect.js',
'resources/js/zoomable.js',
'resources/css/app.css', 'resources/css/app.css',
'resources/css/zoomable.css',
'resources/css/plan7.css',
'resources/css/docs.css', 'resources/css/docs.css',
'resources/css/multiselect.css', 'resources/css/multiselect.css',
'resources/js/phone-format.js', 'resources/js/phone-format.js',