crete zoomable for images in contarcts deteil page
This commit is contained in:
Thekindbull
parent
96362d7ed4
commit
c20da10d1d
@ -62,13 +62,19 @@ private function appendMode(&$query)
|
||||
ContractStatus::SUCCESS,
|
||||
]);
|
||||
}
|
||||
if ($this->mode == 'finished')
|
||||
if ($this->mode == 'successed')
|
||||
{
|
||||
$query->whereIn('status', [
|
||||
ContractStatus::DECLINE,
|
||||
ContractStatus::SUCCESS,
|
||||
ContractStatus::TREATY
|
||||
]);
|
||||
}
|
||||
if ($this->mode == 'declined')
|
||||
{
|
||||
$query->whereIn('status', [
|
||||
ContractStatus::DECLINE
|
||||
]);
|
||||
}
|
||||
}
|
||||
private function appendFilter(&$query)
|
||||
{
|
||||
|
||||
@ -11,9 +11,13 @@
|
||||
onclick="this.form.submit()" {{ $mode == 'active' ? 'checked' : '' }}>
|
||||
<label class="btn p-2 fs-5" for="mode_active">Активные</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="mode" value="finished" id="mode_finished"
|
||||
autocomplete="off" onclick="this.form.submit()" {{ $mode == 'finished' ? 'checked' : '' }}>
|
||||
<label class="btn p-2 fs-5" for="mode_finished">Оконченные</label>
|
||||
<input type="radio" class="btn-check" name="mode" value="successed" id="mode_successed"
|
||||
autocomplete="off" onclick="this.form.submit()" {{ $mode == 'successed' ? 'checked' : '' }}>
|
||||
<label class="btn p-2 fs-5" for="mode_successed">Успешные</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="mode" value="declined" id="mode_declined"
|
||||
autocomplete="off" onclick="this.form.submit()" {{ $mode == 'declined' ? 'checked' : '' }}>
|
||||
<label class="btn p-2 fs-5" for="mode_declined">Отмененные</label>
|
||||
</div>
|
||||
<div class="ms-auto hstack gap-2">
|
||||
<button type="button" class="lh-1 btn bg-white p-3 fw-bold border rounded-3 border-1"
|
||||
|
||||
@ -37,20 +37,20 @@ class="bi bi-arrow-right" viewBox="0 0 16 16">
|
||||
</div>
|
||||
<div class="col-3 text-end">
|
||||
<!--<a href="" class="btn border-1 border-secondary-subtle text-secondary rounded-4 p-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
|
||||
class="bi bi-trash3" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
|
||||
</svg>
|
||||
</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
|
||||
class="bi bi-trash3" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="" class="btn border-1 border-secondary-subtle text-secondary rounded-4 p-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
|
||||
class="bi bi-pen" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z" />
|
||||
</svg>
|
||||
</a>-->
|
||||
<a href="" class="btn border-1 border-secondary-subtle text-secondary rounded-4 p-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
|
||||
class="bi bi-pen" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z" />
|
||||
</svg>
|
||||
</a>-->
|
||||
</div>
|
||||
</div>
|
||||
<!--Основная часть-->
|
||||
@ -107,11 +107,23 @@ class="bi bi-pen" viewBox="0 0 16 16">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-lg-4 p-3">
|
||||
<div class="rounded-4 h-100 w-100" style="background-color:#ebeef5"
|
||||
data-base64="{{ $contract->base64_image }}">
|
||||
<div class="rounded-4 ratio ratio-1x1 rounded overflow-hidden" style="background-color:#ebeef5"
|
||||
data-base64="">
|
||||
@if ($contract->base64_image)
|
||||
<img style='display:block;' class="h-100 w-100" id='base64image'
|
||||
src='data:image/jpeg;base64, {{ $contract->base64_image }}' />
|
||||
<div class="w-100 h-100 d-flex align-items-center overflow-hidden zoomable-container"
|
||||
style='background-image:url("data:image/jpeg;base64, {{ $contract->base64_image }}");'>
|
||||
<div class="text-center mx-auto zoom-button">
|
||||
<svg class="text-white" xmlns="http://www.w3.org/2000/svg" width="70" height="70"
|
||||
fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0" />
|
||||
<path
|
||||
d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z" />
|
||||
<path fill-rule="evenodd"
|
||||
d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@ -144,4 +156,48 @@ class="bi bi-record-circle-fill align-middle" viewBox="0 0 16 16">
|
||||
@endif
|
||||
</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>
|
||||
var images = document.querySelectorAll(".zoomable-container");
|
||||
Array.prototype.forEach.call(images, function(img) {
|
||||
// Do stuff here
|
||||
|
||||
img.addEventListener('click', function() {
|
||||
console.log(img.classList.contains('zoomed'));
|
||||
if (!img.classList.contains('zoomed')) {
|
||||
img.classList.add('zoomed');
|
||||
} else {
|
||||
img.classList.remove('zoomed');
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Loading…
Reference in New Issue
Block a user