Most pages are now styled.
Small changes to existing pages. Changes to base layout style.
This commit is contained in:
Jorit Tijsen
@@ -1,124 +1,144 @@
|
||||
@extends('layouts/sidebar')
|
||||
|
||||
@section('title')
|
||||
@if($title) {{$title}} - Nieuws @endif
|
||||
@section('title')
|
||||
@if($title)
|
||||
{{$title}} - Nieuws
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@section('page_class')
|
||||
news_post post_container
|
||||
@endsection
|
||||
@section('container_class')
|
||||
grey_background
|
||||
@endsection
|
||||
|
||||
@section('breadcrumb')
|
||||
@if($title)
|
||||
<ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; ">
|
||||
<li><a title="Nieuws" href="{{route('nieuws')}}">Nieuws</a></li>
|
||||
<li class="separator icon_small_arrow right_gray"> </li>
|
||||
<li>{{$title}}</li>
|
||||
</ul>
|
||||
@endif
|
||||
@if($title)
|
||||
<ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; ">
|
||||
<li><a title="Home" href="/">Home</a></li>
|
||||
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
|
||||
<li><a title="Nieuws" href="{{route('nieuws')}}">Nieuws</a></li>
|
||||
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
|
||||
<li>{{$title}}</li>
|
||||
</ul>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
{{-- Nieuws komt met 15 berichten per pagina. Deel op in 3 x 2-breed + 3 x 3-breed --}}
|
||||
@foreach(array_slice($news, 0, 6) as $item)
|
||||
@if($loop->index % 2 == 0)
|
||||
<div class="row">
|
||||
@endif
|
||||
<div class="column column_1_2">
|
||||
<ul class="blog">
|
||||
<li class="post">
|
||||
<a href="{{url($item->url)}}" title="{{$item->title}}">
|
||||
@if($item->video)
|
||||
<span class="icon video"></span>
|
||||
@elseif($item->images && count($item->images) > 1)
|
||||
<span class="icon gallery"></span>
|
||||
@endif
|
||||
<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='img'>
|
||||
</a>
|
||||
<h2><a href="{{url($item->url)}}" title="{{strip_tags($item->title)}}">{!!$item->title!!}</a></h2>
|
||||
<ul class="post_details">
|
||||
@if($item->region)
|
||||
<li class="category">
|
||||
<a title="Regio: {{$item->region->title}}" href="{{route('nieuws.regio', ['region' => $item->region->slug])}}">{{$item->region->title}}</a>
|
||||
</li>
|
||||
@endif
|
||||
@if($item->theme)
|
||||
<li class="category">
|
||||
<a title="Thema: {{$item->theme->title}}" href="{{route('nieuws.thema', ['theme' => $item->theme->slug])}}">{{$item->theme->title}}</a>
|
||||
</li>
|
||||
@endif
|
||||
36 @if($item->edited && ($item->edited != $item->published))
|
||||
<li class="date edited">
|
||||
Bijgewerkt:
|
||||
@if($item->edited->format('d m') != $item->published->format('d m'))
|
||||
{{Formatter::relativeDate($item->edited)}} om
|
||||
@endif
|
||||
{{$item->edited->format('H:i')}} uur
|
||||
</li>
|
||||
@else
|
||||
<li class="date">
|
||||
{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}} uur
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
<p>{!!Formatter::excerpt($item->content, 150)!!}</p>
|
||||
<a class="read_more" href="{{url($item->url)}}" title="Lees verder"><span class="arrow"></span><span>Lees verder...</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@if($loop->index % 2 == 1)
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
<div class="post_body">
|
||||
{{-- Nieuws komt met 15 berichten per pagina. Deel op in 3 x 2-breed + 3 x 3-breed --}}
|
||||
@foreach(array_slice($news, 0, 6) as $item)
|
||||
@if($loop->index % 2 == 0)
|
||||
<div class="row">
|
||||
@endif
|
||||
<div class="column column_1_2">
|
||||
<ul class="blog">
|
||||
<li class="post">
|
||||
<a href="{{url($item->url)}}" title="{{$item->title}}">
|
||||
@if($item->video)
|
||||
<span class="icon video"></span>
|
||||
@elseif($item->images && count($item->images) > 1)
|
||||
<span class="icon gallery"></span>
|
||||
@endif
|
||||
<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}'
|
||||
alt='img'>
|
||||
</a>
|
||||
<h2 class="post_title"><a href="{{url($item->url)}}"
|
||||
title="{{strip_tags($item->title)}}">{!!$item->title!!}</a>
|
||||
</h2>
|
||||
<ul class="post_details clearfix">
|
||||
@if($item->region)
|
||||
<li class="detail category"><i class="fa-solid fa-location-dot"></i> Regio <a
|
||||
href="{{route('nieuws.regio', $item->region->slug)}}"
|
||||
title="{{$item->region->title}}">{{$item->region->title}}</a></li>
|
||||
@endif
|
||||
@if($item->theme)
|
||||
<li class="detail category"><i class="fa-solid fa-tag fa-rotate-90"></i> Thema
|
||||
<a href="{{route('nieuws.thema', $item->theme->slug)}}"
|
||||
title="{{$item->theme->title}}">{{$item->theme->title}}</a></li>
|
||||
@endif
|
||||
@if($item->edited && ($item->edited != $item->published))
|
||||
<li class="date edited">
|
||||
<i class="fa-regular fa-clock"></i>
|
||||
Bijgewerkt:
|
||||
@if($item->edited->format('d m') != $item->published->format('d m'))
|
||||
{{Formatter::relativeDate($item->edited)}} om
|
||||
@endif
|
||||
{{$item->edited->format('H:i')}} uur
|
||||
</li>
|
||||
@else
|
||||
<li class="date">
|
||||
<i class="fa-regular fa-clock"></i>
|
||||
{{Formatter::relativeDate($item->published)}}
|
||||
om {{$item->published->format('H:i')}} uur
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
<p>{!!Formatter::excerpt($item->content, 150)!!}</p>
|
||||
<a class="read_more" href="{{url($item->url)}}" title="Lees verder"><span
|
||||
class="arrow"></span><span>Lees verder...</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@if($loop->index % 2 == 1)
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<div id="items">
|
||||
@include('partial/newslist_small', ['news' => array_slice($news, 6, count($news))])
|
||||
</div>
|
||||
<div id="items">
|
||||
@include('partial/newslist_small', ['id' => 'items-more-news', 'news' => array_slice($news, 6, count($news))])
|
||||
</div>
|
||||
|
||||
@if(count($news) >= 15)
|
||||
<div>
|
||||
<button class="more page_margin_top" type="button" id='meer-nieuws'>
|
||||
<span class="fa-2x fas fa-spinner fa-spin" id="loading"></span>
|
||||
LAAD MEER NIEUWSBERICHTEN
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
@if(count($news) >= 15)
|
||||
<div>
|
||||
<a class="btn auto_width" id="meer-nieuws" href="#"
|
||||
data-loadmorenews='{"container":["#items-more-news"]}'>
|
||||
<span class="fas fa-spinner fa-spin" id="loading"></span>
|
||||
LAAD MEER NIEUWSBERICHTEN
|
||||
</a>
|
||||
</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-nieuws').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 nieuwsberichten (meer).</p>");
|
||||
$button.remove();
|
||||
return;
|
||||
}
|
||||
$('#meer-nieuws').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 nieuwsberichten (meer).</p>");
|
||||
$button.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
$('#items').append(data);
|
||||
++nextPage;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
|
||||
Reference in New Issue
Block a user