NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Style the job pages

Browse Source 
Style the image page
Small fixes
This commit is contained in:
Jorit Tijsen
2024-03-22 15:44:34 +01:00
parent 1d94e7da7f
commit 6041398e10
23 changed files with 608 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
resources/views/imageslist.blade.php
View File

@@ -1,74 +1,81 @@
@extends('layouts/full')
@section('title')
@if($title) {{$title}} - Beelden @else Beelden @endif
@section('title')
@if($title)
{{$title}} - Beelden
@else
Beelden
@endif
@endsection
@section('breadcrumb')
@if($title)
<ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; ">
<li><a title="Beelden" href="{{route('beelden')}}">Beelden</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>{{$title}}</li>
</ul>
@endif
@if($title)
<ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; ">
<li><a title="Beelden" href="{{route('beelden')}}">Beelden</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>{{$title}}</li>
</ul>
@endif
@endsection
@section('content')
<p class='bouwmee'>Ook jouw foto op deze pagina? <a href="mailto:beelden@nhgooi.nl">Mail naar beelden@nhgooi.nl!</a></p>
<div class="page_body margin_bottom">
<p class='bouwmee'>Ook jouw foto op deze pagina? <a href="mailto:beelden@nhgooi.nl">Mail naar
beelden@nhgooi.nl!</a></p>
<div id="items">
@include('partial/imageslist_small', ['images' => $images])
</div>
<div id="items">
@include('partial/imageslist_small', ['images' => $images])
</div>
@if(count($images) >= 15)
<div>
<button class="more page_margin_top" type="button" id='meer-beelden'>
<span class="fa-2x fas fa-spinner fa-spin" id="loading"></span>
LAAD MEER BEELDEN
</button>
</div>
@endif
@if(count($images) >= 15)
<div>
<button class="more page_margin_top" type="button" id='meer-beelden'>
<span class="fa-2x fas fa-spinner fa-spin" id="loading"></span>
LAAD MEER BEELDEN
</button>
</div>
@endif
</div>
@endsection
@push('scripts')
<script>
var nextPage = 2;
var isLoading = 0;
var $isLoading = $('#loading').hide();
<script>
var nextPage = 2;
var isLoading = 0;
var $isLoading = $('#loading').hide();
$('#meer-beelden').click(function(e) {
e.preventDefault();
if(!isLoading) {
// Set flag and update UI
isLoading = 1;
$isLoading.show();
var $button = $(this).attr("disabled", "disabled");
// Fire request for the next page
$.ajax({ url: document.location.pathname + '?pagina=' + nextPage })
.always(function() {
// Whether success or failure, update the UI again
isLoading = 0;
$isLoading.hide();
$button.removeAttr("disabled");
})
.done(function(data) {
if(!data) {
// When no data was returned, disable the button permanently
page = -1;
$('#items').append("<hr /><p>Er zijn geen beelden (meer).</p>");
$button.remove();
return;
}
$('#meer-beelden').click(function (e) {
e.preventDefault();
if (!isLoading) {
// Set flag and update UI
isLoading = 1;
$isLoading.show();
var $button = $(this).attr("disabled", "disabled");
$('#items').append(data);
++nextPage;
});
}
});
</script>
// Fire request for the next page
$.ajax({url: document.location.pathname + '?pagina=' + nextPage})
.always(function () {
// Whether success or failure, update the UI again
isLoading = 0;
$isLoading.hide();
$button.removeAttr("disabled");
})
.done(function (data) {
if (!data) {
// When no data was returned, disable the button permanently
page = -1;
$('#items').append("<hr /><p>Er zijn geen beelden (meer).</p>");
$button.remove();
return;
}
$('#items').append(data);
++nextPage;
});
}
});
</script>
@endpush