Added dummy data to calendar events
Styled calendar pages
This commit is contained in:
Jorit Tijsen
@@ -1,10 +1,14 @@
|
||||
@extends('layouts/full')
|
||||
@extends('layouts/sidebar')
|
||||
|
||||
@section('title')
|
||||
{{$event->title}}
|
||||
@endsection
|
||||
|
||||
@section('breadcrumb')
|
||||
@section('page_class')
|
||||
news_post post_container breadcrumb_no_border
|
||||
@endsection
|
||||
|
||||
@section('breadcrumb_top')
|
||||
<ul class="bread_crumb">
|
||||
<li><a title="Home" href="/">Home</a></li>
|
||||
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
|
||||
@@ -16,9 +20,12 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="row">
|
||||
<div class="post_body">
|
||||
<div class="post single small_image">
|
||||
<ul class="post_details clearfix">
|
||||
@if($event->region)
|
||||
<li class="detail category"><i class="fa-solid fa-location-dot"></i> Regio <a title="{{$event->region}}">{{$event->region}}</a></li>
|
||||
@endif
|
||||
<li class="detail date">
|
||||
<i class="fa-regular fa-clock"></i>
|
||||
{{Formatter::relativeDate($event->starts, 'W d m y?')}}
|
||||
@@ -26,9 +33,6 @@
|
||||
t/m {{Formatter::relativeDate($event->ends, 'd m y?')}}
|
||||
@endif
|
||||
</li>
|
||||
@if($event->region && $event->region != "Regio")
|
||||
<li class="detail category">Regio {{$event->region}}</a></li>
|
||||
@endif
|
||||
</ul>
|
||||
|
||||
|
||||
@@ -56,7 +60,7 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="post_content page_margin_top clearfix">
|
||||
<div class="post_content clearfix" style="margin-top: 20px;">
|
||||
<div class="content_box">
|
||||
@if($event->images)
|
||||
@if(count($event->images) == 1)
|
||||
|
||||
@@ -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="#">← 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 →</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="#">← 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 →</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
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
@extends('layouts/master')
|
||||
|
||||
@section('content_class')box
|
||||
@endsection
|
||||
|
||||
@section('page')
|
||||
<div class="@yield('container_class')">
|
||||
<div class="row @yield('page_class')">
|
||||
<div class="col-12">
|
||||
@yield('breadcrumb_top')
|
||||
</div>
|
||||
<div class="col-12 col-md content_container">
|
||||
<div class="box full-width md_margin_top">
|
||||
<div class="full-width md_margin_top @yield('content_class')">
|
||||
@yield('breadcrumb')
|
||||
@yield('tags')
|
||||
<h1 class="page_title">@yield('title')</h1>
|
||||
|
||||
Reference in New Issue
Block a user