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

Added dummy data to calendar events

Browse Source 
Styled calendar pages
This commit is contained in:
Jorit Tijsen
2024-04-24 16:57:02 +02:00
parent 239bff06ce
commit 6220a405a3
8 changed files with 206 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
resources/views/calendarlist.blade.php
View File

@@ -1,9 +1,19 @@
@extends('layouts/full')
@extends('layouts/sidebar')
@section('title')
Regioagenda
@endsection
@section('page_class')
news_post post_container breadcrumb_no_border
@endsection
@section('container_class')
grey_background
@endsection
@section('content_class')
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Home" href="/">Home</a></li>
@@ -23,176 +33,77 @@
@section('content')
@parent
<div class="page_body">
<nav>
<ul class="pager">
<li class="action_button previous-month"><a href="#">&larr; Eerder</a></li>
<li class="action_button current-month"><a href="#">Komende week</a></li>
<li class="action_button everything"><a href="#">Toon alles</a></li>
<li class="action_button next-month"><a href="#">Later &rarr;</a></li>
</ul>
</nav>
<div class="row">
<div class="month" data-month="0">
<h4 class="box_header page_margin_top_section">Komende week</h4>
<ul class="blog big">
@php($nextWeek = new DateTimeImmutable('midnight +7 days'))
@php($heading = null)
@php($month = 0)
@foreach($events as $event)
@if($event->starts >= ($heading ? $heading : $nextWeek))
</ul>
</div>
<div data-tabs class="page_body">
<div class="tabs">
<h4 data-tab-content-id="tab_previous" class="box_header small flex-grow-1"><span>Eerder</span></h4>
<h4 data-tab-content-id="tab_current_week" class="box_header small flex-grow-1 active"><span>Komende week</span></h4>
<h4 data-tab-content-id="tab_everything" class="box_header small flex-grow-1"><span>Toon alles</span></h4>
<h4 data-tab-content-id="tab_next" class="box_header small"><span>Later</span></h4>
</div>
<div class="row">
<div class="month" data-month="{{++$month}}">
<h4 class="box_header page_margin_top_section">{{$heading ? "De agenda van" : "De rest van"}} {{Formatter::fullDate($event->starts, 'm y?')}}</h4>
<ul class="blog big">
@php($heading = new DateTimeImmutable('first day of next month ' . $event->starts->format('Y-m-d')))
@endif
@php($image = isset($event->images) && count($event->images) ? $event->images[0] : null)
<li class="post {{$image ? "" : "no_img"}}">
@if($image)
<a href="{{$event->url}}" title="{{$event->title}}">
<img src='{{$imgBase . $image->url}}' alt="{{$image->title}}">
</a>
@endif
<div class="post_content">
<h2><a href="{{$event->url}}" title="{{$event->title}}">{{$event->title}}</a></h2>
<ul class="post_details">
<li class="category"><span href="#"
title="{{$event->region}}">{{$event->region}}</span></li>
<li class="date">
{{Formatter::relativeDate($event->starts, 'W d m y?')}}
@if($event->ends && $event->starts != $event->ends)
t/m {{Formatter::relativeDate($event->ends, 'd m y?')}}
@endif
</li>
</ul>
<p>{!!Formatter::excerpt($event->content, 250)!!}</p>
<a class="read_more" href="{{$event->url}}" title="Lees verder"><span
class="arrow"></span><span>Lees verder</span></a>
@php($tabs = [
[
'id' => 'tab_previous',
'start' => new DateTime('1-1-1990'),
'end' => new DateTime('sunday previous week'),
],
[
'id' => 'tab_current_week',
'start' => new DateTime('monday this week'),
'end' => new DateTime('sunday this week'),
],
[
'id' => 'tab_everything',
'start' => new DateTime('1-1-1990'),
'end' => new DateTime('31-12-3000'),
],
[
'id' => 'tab_next',
'start' => new DateTime('monday next week'),
'end' => new DateTime('31-12-3000'),
]
])
@foreach($tabs as $tab)
<div style="padding: 0" class="tab_content{{$tab['id'] == 'tab_current_week' ? ' active' : ''}}" id="{{$tab['id']}}">
@php($count = 0)
@foreach($events as $event)
@if($event->starts >= $tab['start'] && $event->ends <= $tab['end'])
@php($count++)
<?php $url = route('agenda.details', ['id' => $event->id, 'title' => $event->title]); ?>
<div class="box featured">
<div class="row">
<div class="col-12 col-md-6">
<a href="{{$url}}" title="{{$event->title}}">
<img src="{{$event->images && $event->images[0] && $event->images[0]->url ? $imgBase . $event->images[0]->url : '/images/noimage.png'}}"/>
</a>
</div>
<div class="col-12 col-md-6">
<h2 class="post_title"><a href="{{$url}}" title="{{$event->title}}">{!!$event->title!!}</a></h2>
<div class="sub_title" style="flex-wrap: wrap">
<ul class="post_tags" style="width: 100%; margin: 0 0 8px 0;height: 25px;">
<li><a style="padding: 3px 8px 3px" title="{{$event->region}}">{{$event->region}}</a></li>
</ul>
<span class="post_date" style="line-height: 1.17; height: 14px;" title="{{Formatter::relativeDate($event->starts, 'W d m y?')}}">
<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($event->starts, 'W d m y?')}}
@if($event->ends && $event->starts != $event->ends)
t/m {{strtolower(Formatter::relativeDate($event->ends, 'W d m y?'))}}
@endif
</span>
</div>
<p class="clipText clipText-7" title="{{Formatter::excerpt($event->content, 150)}}">
{!!Formatter::excerpt($event->content, 150)!!}
</p>
<a class="btn fit_content" href="{{$url}}">Lees verder</a>
</div>
</div>
</div>
</li>
@endforeach
</ul>
@endif
@endforeach
@if($count == 0)
<p>Er zijn geen items gevonden. Iets te melden? Mail het naar <a href="mailto:info@nhgooi.nl">info@nhgooi.nl</a>.</p>
@endif
</div>
</div>{{--row--}}
<nav>
<ul class="pager">
<li class="action_button previous-month"><a href="#">&larr; Eerder</a></li>
<li class="action_button current-month"><a href="#">Komende week</a></li>
<li class="action_button everything"><a href="#">Toon alles</a></li>
<li class="action_button next-month"><a href="#">Later &rarr;</a></li>
</ul>
</nav>
@endforeach
</div>
@endsection
@push('styles')
<style>
.pager {
display: flex;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
.pager .action_button {
flex: 1;
}
.pager .current-month,
.pager .everything {
text-align: center;
}
.pager .next-month {
text-align: right;
}
</style>
@endpush
@push('scripts')
<script type="text/javascript">
var month = 0;
var months = {{$month}};
var $current = null;
function gotoPage(month) {
$new = (month === null) ? $(".month") : $(".month[data-month=" + month + "]");
if ($current == null) {
$(".month").hide("fast");
$new.fadeIn("fast");
} else {
($container = $("#contentSection")).css('height', $container.height() + "px").css('overflow', 'hidden');
animations = $current.length;
$current.fadeOut("fast", function () {
$new.fadeIn("fast", function () {
if (--animations > 0) {
return;
}
curHeight = $container.height();
autoHeight = $container.css('height', 'auto').height();
$container.height(curHeight).animate({height: autoHeight}, 250, function () {
$container.css('height', 'auto');
});
});
});
}
$current = $new;
window.location.hash = (month === null) ? "alles" : ("page-" + month);
$previous = $(".pager .previous-month, .pager .current-month");
if (month == 0) {
$previous.addClass('disabled');
} else {
$previous.removeClass('disabled');
}
$next = $(".pager .next-month");
if (month == months) {
$next.addClass('disabled');
} else {
$next.removeClass('disabled');
}
}
$(".pager .previous-month").click(function (e) {
if (month > 0) gotoPage(--month);
e.preventDefault();
});
$(".pager .current-month").click(function (e) {
if (month != 0) gotoPage(month = 0);
e.preventDefault();
});
$(".pager .next-month").click(function (e) {
if (month < months) gotoPage(++month);
e.preventDefault();
});
$(".pager .everything").click(function (e) {
gotoPage(null);
e.preventDefault();
});
gotoPage(0);
window.onhashchange = function () {
if (window.location.hash == "#alles") {
gotoPage(null);
} else {
newMonth = window.location.hash.substr(6);
if (newMonth != month) {
gotoPage(newMonth);
}
}
}
</script>
@endpush
@endif