You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.7 KiB
PHTML
69 lines
2.7 KiB
PHTML
2 years ago
|
@extends('layouts.app')
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<div class="d-flex flex-column flex-xl-row bg-white">
|
||
|
|
<div class="left-image-section company-image-section d-none d-xl-block"></div>
|
||
|
|
<div class="page-section company-section">
|
||
|
|
<div class="page-header white-header">
|
||
|
|
<div class="menu-root d-none d-xl-block">{{ $page['title'] }}@if($page['subTitle']) <i class="fa-solid fa-chevron-right"></i> {{ $page['subTitle'] }}@endif</div>
|
||
|
|
<div class="header-title d-none d-xl-block">@if($page['subTitle']){{ $page['subTitle'] }}@else{{ $page['title']}}@endif</div>
|
||
|
|
<div class="header-mobile-logo d-block d-xl-none m-0 padding-b-2"><img src="/images/word-logo-white.png" class="img-fluid"></div>
|
||
|
|
</div>
|
||
|
|
<div class="page-body">
|
||
|
|
<div class="list-section">
|
||
|
|
@if($data)
|
||
|
|
<section class="company-column">
|
||
|
|
@foreach($data as $i => $row)
|
||
|
|
@if($i > 0 && $i % 2 == 0)
|
||
|
|
</section>
|
||
|
|
<section class="company-column">
|
||
|
|
@endif
|
||
|
|
<div class="company-item">
|
||
|
|
<a href="@if($row->link){{ $row->link }}@else{{ '#' }}@endif" target="_blank">
|
||
|
|
<img src="@if($row->image){{ route('image', [$row->image], false) }}@else{{ '/images/no-img.png' }}@endif" class="img-fluid"/>
|
||
|
|
<div class="company-title">{{ $row->title }}</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
@endforeach
|
||
|
|
</section>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@push('scripts')
|
||
|
|
<script type="text/javascript">
|
||
|
|
const bodyContainer = document.querySelector('body');
|
||
|
|
const scrollContainer = document.querySelector('.list-section');
|
||
|
|
|
||
|
|
var ww = window.innerWidth;
|
||
|
|
var scrollEventHandler = function(evt){
|
||
|
|
var maxWidth = scrollContainer.scrollWidth - $('.list-section').innerWidth();
|
||
|
|
evt.preventDefault();
|
||
|
|
scrollContainer.scrollLeft += evt.deltaY;
|
||
|
|
var scrolled = (scrollContainer.scrollLeft / maxWidth) * 100;
|
||
|
|
document.getElementById("myBar").style.width = scrolled + "%";
|
||
|
|
if(scrollContainer.scrollLeft == maxWidth){
|
||
|
|
// console.log('scrollEnd');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
initEvent(ww);
|
||
|
|
|
||
|
|
$(window).resize(function () {
|
||
|
|
ww = window.innerWidth;
|
||
|
|
initEvent(ww);
|
||
|
|
});
|
||
|
|
|
||
|
|
function initEvent(ww){
|
||
|
|
if(ww >= 1200){
|
||
|
|
bodyContainer.addEventListener('wheel',scrollEventHandler, {passive: false});
|
||
|
|
}else{
|
||
|
|
bodyContainer.removeEventListener('wheel',scrollEventHandler, {passive: false});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
@endpush
|