Update
This commit is contained in:
377
oldSite/Plugins/Services/Resources/views/form/layout.blade.php
Normal file
377
oldSite/Plugins/Services/Resources/views/form/layout.blade.php
Normal file
@@ -0,0 +1,377 @@
|
||||
<br>
|
||||
<hr>
|
||||
<h1>{{ trans('admin.LAYOUT') }}</h1>
|
||||
<br>
|
||||
<div class="services-grid">
|
||||
|
||||
|
||||
<div class="holder">
|
||||
<article class="article article01">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="text-holder">
|
||||
<div class="text" data-text="01">
|
||||
<p>CONTENT 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box">
|
||||
|
||||
<div class="upload-box">
|
||||
<div class="resolution">309x461</div>
|
||||
<div class="upload">
|
||||
<div class="upload-btn-wrapper">
|
||||
<i class="fa fa-upload"></i>
|
||||
<input type="file"
|
||||
name="picture_1"
|
||||
class="pictureUploadPreview"
|
||||
data-preview="quickPreviewPicture1">
|
||||
</div> <!-- end .btn -->
|
||||
</div> <!-- end .upload -->
|
||||
</div> <!-- end .upload-box -->
|
||||
|
||||
<div id="quickPreviewPicture1">
|
||||
@if (!empty($table->picture_1))
|
||||
<img src="/{{ $uploadPath }}{{ $table->picture_1 ?? null }}"
|
||||
class="img-fluid">
|
||||
@else
|
||||
<img src="https://via.placeholder.com/309X461" class="img-fluid upload-box">
|
||||
@endif
|
||||
</div> <!-- end #quickPreview -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="img-box">
|
||||
|
||||
<div class="upload-box">
|
||||
<div class="resolution">1132x792</div>
|
||||
<div class="upload">
|
||||
<div class="upload-btn-wrapper">
|
||||
<i class="fa fa-upload"></i>
|
||||
<input type="file"
|
||||
name="picture_2"
|
||||
class="pictureUploadPreview"
|
||||
data-preview="quickPreviewPicture2">
|
||||
</div> <!-- end .btn -->
|
||||
</div> <!-- end .upload -->
|
||||
</div> <!-- end .upload-box -->
|
||||
|
||||
<div id="quickPreviewPicture2">
|
||||
@if (!empty($table->picture_2))
|
||||
<img src="/{{ $uploadPath }}{{ $table->picture_2 ?? null }}"
|
||||
class="img-fluid">
|
||||
@else
|
||||
<img src="https://via.placeholder.com/1132X792" class="img-fluid" alt="image description">
|
||||
@endif
|
||||
</div> <!-- end #quickPreview -->
|
||||
</div> <!-- end .img-box -->
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<hr>
|
||||
|
||||
<article class="article article02">
|
||||
<div class="row align-items-start">
|
||||
<div class="col-md-3 offset-md-3">
|
||||
<div class="text-holder">
|
||||
<div class="text" data-text="02">
|
||||
<p>CONTENT 2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="img-box">
|
||||
|
||||
<div class="upload-box">
|
||||
<div class="resolution">746x746</div>
|
||||
<div class="upload">
|
||||
<div class="upload-btn-wrapper">
|
||||
<i class="fa fa-upload"></i>
|
||||
<input type="file"
|
||||
name="picture_3"
|
||||
class="pictureUploadPreview"
|
||||
data-preview="quickPreviewPicture3">
|
||||
</div> <!-- end .btn -->
|
||||
</div> <!-- end .upload -->
|
||||
</div> <!-- end .upload-box -->
|
||||
|
||||
<div id="quickPreviewPicture3">
|
||||
@if (!empty($table->picture_3))
|
||||
<img src="/{{ $uploadPath }}{{ $table->picture_3 ?? null }}"
|
||||
class="img-fluid">
|
||||
@else
|
||||
<img src="https://via.placeholder.com/746x746" class="img-fluid" alt="image description">
|
||||
@endif
|
||||
</div> <!-- end #quickPreview -->
|
||||
|
||||
</div> <!-- end .img-box -->
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr>
|
||||
|
||||
<article class="article article03">
|
||||
<div class="row">
|
||||
<div class="col-md-3 order-md-2">
|
||||
<div class="text-holder">
|
||||
<div class="text" data-text="03">
|
||||
<p>CONTENT 3</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 img-col">
|
||||
<div class="img-box">
|
||||
|
||||
<div class="upload-box">
|
||||
<div class="resolution">746x909</div>
|
||||
<div class="upload">
|
||||
<div class="upload-btn-wrapper">
|
||||
<i class="fa fa-upload"></i>
|
||||
<input type="file"
|
||||
name="picture_4"
|
||||
class="pictureUploadPreview"
|
||||
data-preview="quickPreviewPicture4">
|
||||
</div> <!-- end .btn -->
|
||||
</div> <!-- end .upload -->
|
||||
</div> <!-- end .upload-box -->
|
||||
|
||||
<div id="quickPreviewPicture4">
|
||||
@if (!empty($table->picture_4))
|
||||
<img src="/{{ $uploadPath }}{{ $table->picture_4 ?? null }}"
|
||||
class="img-fluid">
|
||||
@else
|
||||
<img src="https://via.placeholder.com/746x909" class="img-fluid" alt="image description">
|
||||
@endif
|
||||
</div> <!-- end #quickPreview -->
|
||||
</div> <!-- end .img-box -->
|
||||
</div>
|
||||
<div class="col-md-3 order-md-3">
|
||||
<div class="img-box">
|
||||
|
||||
<div class="upload-box">
|
||||
<div class="resolution">358x358</div>
|
||||
<div class="upload">
|
||||
<div class="upload-btn-wrapper">
|
||||
<i class="fa fa-upload"></i>
|
||||
<input type="file"
|
||||
name="picture_5"
|
||||
class="pictureUploadPreview"
|
||||
data-preview="quickPreviewPicture5">
|
||||
</div> <!-- end .btn -->
|
||||
</div> <!-- end .upload -->
|
||||
</div> <!-- end .upload-box -->
|
||||
<div id="quickPreviewPicture5">
|
||||
@if (!empty($table->picture_5))
|
||||
<img src="/{{ $uploadPath }}{{ $table->picture_5 ?? null }}"
|
||||
class="img-fluid">
|
||||
@else
|
||||
<img src="https://via.placeholder.com/358x358" class="img-fluid" alt="image description">
|
||||
@endif
|
||||
</div> <!-- end #quickPreview -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr>
|
||||
|
||||
<article class="article article04">
|
||||
<div class="row">
|
||||
<div class="col-md-3 order-md-4">
|
||||
<div class="text-holder">
|
||||
<div class="text" data-text="04">
|
||||
<p>CONTENT 4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 img-col">
|
||||
<div class="img-box">
|
||||
|
||||
<div class="upload-box">
|
||||
<div class="resolution">358x358</div>
|
||||
<div class="upload">
|
||||
<div class="upload-btn-wrapper">
|
||||
<i class="fa fa-upload"></i>
|
||||
<input type="file"
|
||||
name="picture_6"
|
||||
class="pictureUploadPreview"
|
||||
data-preview="quickPreviewPicture6">
|
||||
</div> <!-- end .btn -->
|
||||
</div> <!-- end .upload -->
|
||||
</div> <!-- end .upload-box -->
|
||||
|
||||
<div id="quickPreviewPicture6">
|
||||
@if (!empty($table->picture_6))
|
||||
<img src="/{{ $uploadPath }}{{ $table->picture_6 ?? null }}"
|
||||
class="img-fluid">
|
||||
@else
|
||||
<img src="https://via.placeholder.com/358x358" class="img-fluid" alt="image description">
|
||||
@endif
|
||||
</div> <!-- end #quickPreview -->
|
||||
|
||||
</div>
|
||||
<br>
|
||||
<div class="img-box">
|
||||
<div class="upload-box">
|
||||
<div class="resolution">358x358</div>
|
||||
<div class="upload">
|
||||
<div class="upload-btn-wrapper">
|
||||
<i class="fa fa-upload"></i>
|
||||
<input type="file"
|
||||
name="picture_7"
|
||||
class="pictureUploadPreview"
|
||||
data-preview="quickPreviewPicture7">
|
||||
</div> <!-- end .btn -->
|
||||
</div> <!-- end .upload -->
|
||||
</div> <!-- end .upload-box -->
|
||||
|
||||
<div id="quickPreviewPicture7">
|
||||
@if (!empty($table->picture_7))
|
||||
<img src="/{{ $uploadPath }}{{ $table->picture_7 ?? null }}"
|
||||
class="img-fluid">
|
||||
@else
|
||||
<img src="https://via.placeholder.com/358x358" class="img-fluid" alt="image description">
|
||||
@endif
|
||||
</div> <!-- end #quickPreview -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="img-box">
|
||||
|
||||
<div class="upload-box">
|
||||
<div class="resolution">748x765</div>
|
||||
<div class="upload">
|
||||
<div class="upload-btn-wrapper">
|
||||
<i class="fa fa-upload"></i>
|
||||
<input type="file"
|
||||
name="picture_8"
|
||||
class="pictureUploadPreview"
|
||||
data-preview="quickPreviewPicture8">
|
||||
</div> <!-- end .btn -->
|
||||
</div> <!-- end .upload -->
|
||||
</div> <!-- end .upload-box -->
|
||||
|
||||
<div id="quickPreviewPicture8">
|
||||
@if (!empty($table->picture_8))
|
||||
<img src="/{{ $uploadPath }}{{ $table->picture_8 ?? null }}"
|
||||
class="img-fluid">
|
||||
@else
|
||||
<img src="https://via.placeholder.com/748x765" class="img-fluid" alt="image description">
|
||||
@endif
|
||||
</div> <!-- end #quickPreview -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-4 col-xl-3 offset-md-6 offset-lg-8 offset-xl-9">
|
||||
<div class="text-info-box" data-speed="130">
|
||||
<div class="info">
|
||||
CONTENT 5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
|
||||
@section('header-addon')
|
||||
<style>
|
||||
.text-info-box {
|
||||
background: black;
|
||||
color:white;
|
||||
font-size:15px;
|
||||
min-height:150px;
|
||||
display:grid;
|
||||
align-items: center;
|
||||
text-align:center;
|
||||
}
|
||||
.upload-box {
|
||||
display:grid;
|
||||
grid-template-columns: auto 20px;
|
||||
grid-template-rows: 20px;
|
||||
grid-gap:0;
|
||||
color:#999;
|
||||
font-size:10px;
|
||||
margin-bottom:1px;
|
||||
}
|
||||
|
||||
.upload-box > div.resolution {
|
||||
color:#ccc;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.upload-box > div.upload {
|
||||
color:#bbb;
|
||||
max-height:16px;
|
||||
font-size:12px;
|
||||
text-align:right;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.upload-box > div.upload:hover {
|
||||
cursor:pointer;
|
||||
color:#909;
|
||||
}
|
||||
|
||||
.img-box, .text {
|
||||
border:dotted 1px #ccc;
|
||||
padding:3px;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
|
||||
.image-preview > img {
|
||||
object-fit: contain;
|
||||
width:100%;
|
||||
height:200px;
|
||||
}
|
||||
|
||||
.upload-btn-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.upload-btn-wrapper input[type=file] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@append
|
||||
|
||||
@section('footer-addon')
|
||||
<script>
|
||||
$(document).on("change", ".pictureUploadPreview", function(evt) {
|
||||
|
||||
var files = evt.target.files;
|
||||
var f = files[0];
|
||||
var reader = new FileReader();
|
||||
let obj = $(this).data('preview');
|
||||
|
||||
reader.onload = (function(theFile) {
|
||||
return function(e) {
|
||||
|
||||
document.getElementById(obj).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" class="img-fluid" />'].join('');
|
||||
};
|
||||
})(f);
|
||||
|
||||
reader.readAsDataURL(f);
|
||||
});
|
||||
|
||||
</script>
|
||||
@append
|
||||
Reference in New Issue
Block a user