Regioagenda layout en breadcrumbs

This commit is contained in:
2020-01-18 03:01:24 +01:00
parent a93addfb6d
commit 811fab79d5
13 changed files with 447 additions and 1784 deletions

View File

@@ -19,6 +19,7 @@ class RadioController extends Controller
$schedule[] = [
'starttime' => self::JsonToDateTime($program->start),
'endtime' => self::JsonToDateTime($program->end),
'shift' => (int)$shiftWeeks,
'program' => new \Model\Program($program->program)
];
}

View File

@@ -15,6 +15,18 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
}
}
.page_header_left {
width: auto;
float: none;
clear: both;
}
.page_header_right {
float: right;
clear: both;
margin-top: -2em;
}
.tabs_navigation li a:hover,
.tabs_navigation li a.selected,
.tabs_navigation li.ui-tabs-active a {
@@ -107,6 +119,10 @@ button[disabled]:hover
width: 100%;
}
.post.no_img .post_content {
width: 100%;
}
.action_button
{
position: relative;
@@ -165,67 +181,4 @@ button[disabled]:hover
background-color: #E4E4E4;
}
/*
.action_button span {
display: inline-block;
line-height: 29px;
height: 29px;
font-size: 12px;
font-weight: bold;
}
.action_button :not(.fa) {
padding: 0 10px 0 12px !important;
}
.action_button .fa {
width: 29px;
background-color: #1F3977;
text-align: center;
vertical-align: middle;
color: white;
}
.action_button:hover span, .action_button:hover .fa {
transition: 500ms;
background-color: transparent;
}
*/
/* Responsiveness */
@media (min-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-md-only, .d-lg-only, .d-xl-only {
display: none !important;
}
}
@media (min-width: 768px) {
.d-md-none {
display: none !important;
}
.d-sm-only, .d-lg-only, .d-xl-only {
display: none !important;
}
}
@media (min-width: 992px) {
.d-lg-none {
display: none !important;
}
.d-sm-only, .d-md-only, .d-xl-only {
display: none !important;
}
}
@media (min-width: 1200px) {
.d-xl-none {
display: none !important;
}
.d-sm-only, .d-md-only, .d-lg-only {
display: none !important;
}
}

View File

@@ -1,65 +1,113 @@
@extends('layouts/full')
@extends('layouts/sidebar')
@section('title')
Regioagenda | {{$event->title}}
{{$event->title}}
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Regio-agenda" href="{{url('agenda')}}">Regio-agenda</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>Details</li>
</ul>
@endsection
@section('content')
@parent
<article class="article-content" itemscope itemtype="http://schema.org/Article">
<div class="article-header">
<div class="article-meta clearfix">
<span class="event-pubdate"
<span class="event-pubdate" data-short-date="{{Formatter::fullDate($event->starts, 'w d m y')}}, {{$event->starts->format("H:i")}}" datetime="{{$event->starts->format('c')}}">
{{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
</span>
</div>
@php($imgBase = 'https://nhgooi.nl')
</div>
<h1 class="article-title" itemprop="headline">{{$event->title}}</h1>
@if($event->images && count($event->images) > 0)
@if(!$event->images[0]->title) @php($event->images[0]->title = $event->title) @endif
<div class="mediabox">
<div class="big-images owl-carousel">
<div>
<div class="mediabox-image">
<img src="{{$event->images[0]->url}}" alt="{{strip_tags($event->images[0]->title)}}" title="{{strip_tags($event->images[0]->title)}}"/>
<span class="mediabox-image-title">{{$event->images[0]->title}}</span>
</div>
</div>
</div>
<div class="thumbs owl-carousel">
@if(count($event->images) > 1) @foreach($event->images as $image)
<div>
<img src="{{$image->url}}" alt="{{strip_tags($image->title)}}" title="{{strip_tags($image->title)}}" itemprop="image"/>
</div>
@endforeach @endif
</div>
</div>
</div>
<div class="row">
<div class="post single small_image">
<ul class="post_details clearfix">
@if($event->region && $event->region != "Regio")
<li class="detail category">Regio {{$event->region}}</a></li>
@endif
<p class="intro">
<span><b>{{$event->region}}</b> - </span> {!!$event->content!!}
</p>
<li class="detail 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>
@if($event->podcast)
<div class="left_content">
<h2>Fragment</h2>
<p>{{ Formatter::relativeDate($event->podcast->created) }} uitgezonden @if($event->podcast->program) in <a href="{{ url('radio/programma' . $event->podcast->program->url ) }}">{{ $event->podcast->program->name }}</a> @endif </p>
<p>
@include('widgets/mediaplayer')
<div class="announcement">
<div>
<audio controls>
<source src="{{ $url = url( $apiUrl . 'podcast/download/' . $event->podcast->url . "?auth=" . $event->podcast->auth )}}" type="audio/mpeg" />
</audio>
</p>
<p><a href="{{ url('/radio/gemist/fragment/' . $event->podcast->url) }}" class="btn btn-default">Meer over dit fragment</a></p>
</div>
<ul class="post_details clearfix">
<li class="detail date">
{{ Formatter::relativeDate($event->podcast->created) }} uitgezonden
@if($event->podcast->program) in <a href="{{ url('radio/programma' . $event->podcast->program->url ) }}">{{ $event->podcast->program->name }}</a> @endif
</li>
<li class="detail category">
<a href="{{ url('/radio/gemist/fragment/' . $event->podcast->url) }}">
<span class="fa "></span>
<span>Meer over dit fragment</span>
</a>
</li>
</ul>
</div>
@endif
<div class="post_content page_margin_top clearfix">
<div class="content_box">
@if($event->images)
@if(count($event->images) == 1)
<div class="post_image_box">
<a href="{{$imgBase . $event->images[0]->url}}" class="post_image prettyPhoto" title="{{$event->images[0]->title}}">
<img src='{{$imgBase . $event->images[0]->url}}' alt='{{$event->images[0]->title}}'>
</a>
<div class="sentence">
<span class="text">{{$event->images[0]->title}}</span>
@if(isset($event->images[0]->author))
<span class="author">{{$event->images[0]->author}}</span>
@endif
</div>
</div>
@else
<div class="horizontal_carousel_container thin page_margin_top gallery_control">
<ul class="horizontal_carousel control-for-post-gallery visible-5 autoplay-0 scroll-1 navigation-1 easing-easeInOutQuint duration-750">
@foreach($event->images as $image)
<li>
<a href="#"><img src='{{$imgBase . $image->url}}'></a>
</li>
@endforeach
</ul>
</div>
<div id="control-by-post-gallery" class="horizontal_carousel_container big margin_top_10">
<ul id="post-gallery" class="horizontal_carousel visible-1 autoplay-0 scroll-1 navigation-1 easing-easeInOutQuint duration-750">
@foreach($event->images as $image)
<li>
<a href="{{$imgBase . $image->url}}" data-rel="gallery" title="{{$image->title}}">
<span class="icon fullscreen animated"></span>
<img src='{{$imgBase . $image->url}}' alt='{{$image->title}}'>
</a>
</li>
</ul>
@endforeach
</div>
@endif
@endif
@if(is_array($event->content))
@include('partial/nh_story', ['content' => $event->content]);
@else
<div class="text">
<p>{!!$event->content!!}</p>
</div>
@endif
@include('widgets/share')
</div>
</div>
</div>
</div>
@endsection

View File

@@ -1,4 +1,4 @@
@extends('layouts/full')
@extends('layouts/sidebar')
@section('title')
Regioagenda
@@ -13,59 +13,97 @@
<nav>
<ul class="pager">
<li class="previous-month"><a href="#">&larr; Eerder</a></li>
<li class="current-month"><a href="#">Komende week</a></li>
<li class="everything"><a href="#">Toon alles</a></li>
<li class="next-month"><a href="#">Later &rarr;</a></li>
<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="month" data-month="0">
<h2>Komende week</h2>
<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($imgBase = 'https://nhgooi.nl')
@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>
<div class="row">
<div class="month" data-month="{{++$month}}">
<h2>{{$heading ? "De agenda van" : "De rest van"}} {{Formatter::fullDate($event->starts, 'm y?')}}</h2>
<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
<div class='row details' data-index="{{$month}}">
@php($image = isset($event->images) && count($event->images) ? $event->images[0] : null)
<div class='col-lg-3 @if(!$image) hidden-sm hidden-xs @endif'>
<div class="news-item news-item-small wow fadeInDown">
<div class="thumb">
<a href="{{$event->url}}" rel="bookmark" title="{{$event->title}}">
<img style="width: 100%;" src="{{ $image ? url( $image->url ) : url( 'images/noimage.png') }}" alt="{{$image ? $image->title : $event->title}}" title="{{$image ? $image->title : $event->title}}"/>
</a>
</div><!--/.thumb-->
</div><!--/.wow-->
</div><!--/.col-->
<div class='col-lg-9'>
<h2><a href="{{$event->url}}">{{$event->title}}</a></h2>
<div class="event-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
</div>
<b>{{$event->region}}.</b> {!!Formatter::excerpt($event->content, 250)!!}
<p><a href="{{$event->url}}" class="btn btn-info">Lees verder</a>
</div><!--/.col-->
</div><!--/.row-->
@endforeach
</div>
@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>
</div>
</li>
@endforeach
</ul>
</div>
</div>{{--row--}}
<nav>
<ul class="pager">
<li class="previous-month"><a href="#">&larr; Eerder</a></li>
<li class="current-month"><a href="#">Komende week</a></li>
<li class="everything"><a href="#">Toon alles</a></li>
<li class="next-month"><a href="#">Later &rarr;</a></li>
<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>
@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}};
@@ -120,4 +158,4 @@
</script>
@endif
@endsection
@endpush

View File

@@ -1,8 +1,16 @@
@extends('layouts/master')
@section('content')
@section('page')
<div class="clearfix" style="height: 15px;"></div>
<div class="page_header clearfix page_margin_top">
<div class="page_header_left clearfix page_margin_top">
<h1 class="page_title">@yield('title')</h1>
</div>
<div class="page_header_right">
@yield('breadcrumb')
</div>
</div>
<div class="page_layout clearfix">
@yield('content')
</div>
@endsection

View File

@@ -3,8 +3,13 @@
@section('page')
<div class="clearfix" style="height: 15px;"></div>
<div class="page_header clearfix page_margin_top">
<div class="page_header left">
<h1 class="page_title">@yield('title')</h1>
</div>
<div class="page_header_right">
@yield('breadcrumb')
</div>
</div>
<div class="page_layout clearfix">
<div class="row page_margin_top">
<div class="column column_2_3">

View File

@@ -4,6 +4,16 @@
{{$news->title}}
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Nieuws" href="{{url('nieuws')}}">Nieuws</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li><a title="{{$news->region->title}}" href="{{url('nieuws/regio/' . $news->region->slug)}}">{{$news->region->title}}</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>Details</li>
</ul>
@endsection
@section('content')
@php($imgBase = 'https://nhgooi.nl')
@@ -113,7 +123,7 @@
<div class="row page_margin_top">
<ul class="taxonomies tags left clearfix">
@if($news->keywords = ['test'])
@if($news->keywords)
@foreach($news->keywords as $keyword)
<li>
<a href="{{url('nieuws/onderwerp/' . $keyword)}}" title="Zoek meer nieuws met het onderwerp {{$keyword}}">{{$keyword}}</a>

View File

@@ -1,88 +1,4 @@
<?php
$pixelsPerHour = 60;
$border = 1;
$margin = 1;
?>
<style>
.schedule {
color: black;
width: 100%;
display: flex;
}
.schedule .date-header {
height: 3em;
text-align: center;
font-size: 120%;
vertical-align: bottom;
}
.schedule .time-header {
height: {{$pixelsPerHour / 2}}px;
}
.schedule .timeslots {
width: 80px;
min-width: 80px;
}
.schedule .date-column {
flex: 1;
}
.schedule a.program {
display: block;
color: black;
text-decoration: none;
margin: {{$margin}}px;
border: solid {{$border}}px #03A6E0;
border-radius: 2px;
overflow: hidden;
}
.schedule a.program:hover {
color: white;
background-color: #71c1de;
}
.schedule .program.current {
background-color: #71c1de;
color: white;
}
.schedule .program.non-stop {
color: #6c757d;
}
.schedule .program.special {
color: #03A6E0;
}
.schedule .program .current-marker {
margin-top: 5px;
text-align: center;
}
.schedule .program .current-marker span {
padding: 3px;
color: white;
text-align: center;
background-color: #03A6E0;
border-radius: 3px;
}
.schedule .program .program-title {
padding: 5px;
color: white;
font-weight: bold;
background-color: #03A6E0;
}
.schedule .program .program-content {
margin: 3px;
}
</style>
<div class="schedule">
<div class="timeslots">
@@ -94,138 +10,45 @@
@php($date = null)
@php($hour = 0)
@php($now = new \DateTime("now"))
@foreach($schedule as $item)
@if(($formattedDate = Formatter::fullDate($item['starttime'], 'W d m')) != $date)
@if($date != null)
</div>
@endif
<div class="date-column">
<div class="date-header">{{$formattedDate}}</div>
@php($date = $formattedDate)
@endif
@php($diff = $item['endtime']->diff($item['starttime']))
@php($duration = $diff->d * 24 + $diff->h + $diff->m / 60)
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
@php($class = ($item['program']->priority < 2 ? ' special' : '')
. ($item['program']->nonstop || $item['program']->rerun ? ' non-stop' : '')
. ($isCurrent ? ' current' : ''))
@php($starttime = $item['starttime'])
<a href="{{url('/radio/programma' . $item['program']->url)}}" class="program{{$class}}" style="height: {{$duration * $pixelsPerHour - 2 * $border - $margin}}px;">
@while($duration > 0)
@if(($formattedDate = Formatter::fullDate($starttime, 'W d/M')) != $date)
@if($date != null)
</div>
@endif
<div class="date-column">
<div class="date-header">{{$formattedDate}}</div>
@php($date = $formattedDate)
@php($hour = 0)
@endif
@php($durationToday = ($hour + $duration <= 24) ? $duration : (24 - $hour))
<a href="{{url('/radio/programma' . $item['program']->url)}}" class="program{{$class}}" style="height: {{$durationToday * $pixelsPerHour - 2 * $border - $margin}}px;">
<div class="program-title">{{$item['program']->name}}</div>
@if($isCurrent) <div class="current-marker"><span>Nu op NH Gooi</span></div> @endif
<div class="program-content">
{{Formatter::excerpt(strip_tags($item['program']->description), 150)}}
<div class="program-times">{{$item['starttime']->format('H:i')}} &ndash; {{$item['endtime']->format('H:i')}} uur.</div>
<div>{{Formatter::excerpt($item['program']->description, 150)}}</div>
</div>
</a>
@php($hour += $durationToday)
@php($duration -= $durationToday)
@if($duration > 0)
@php($starttime->add(new \DateInterval('P1D'))->setTime(0, 0, 0))
@endif
@endwhile
@endforeach
</div>
</div>
<hr />
<?php
$dates = array();
$byStartTime = array();
foreach($schedule as $item):
$date = $item['starttime'];
$time = $item['starttime']->format('H:i');
$item['enddate'] = Formatter::fullDate($item['endtime'], 'W d m');
while(true) {
$formattedDate = Formatter::fullDate($date, 'W d m');
$dates[$formattedDate] = null;
if(array_key_exists($time, $byStartTime)) {
$byStartTime[$time][$formattedDate] = $item;
} else {
$byStartTime[$time] = array($formattedDate => $item);
}
if($formattedDate == $item['enddate']) { break; }
$date->add(new DateInterval('P1D'));
$time = '00:00';
}
endforeach;
$dates = array_keys($dates);
$now = new \DateTime("now");
?>
<table class="tt_timetable">
<thead>
<tr class="row_gray" style="background-color: #F0F0F0 !important;">
<th></th>
@for($d = 0; $d < 7; ++$d)
<th>{{$dates[$d]}}</th>
@endfor
</tr>
</thead>
<tbody>
@for($h = 0; $h < 24; $h += 0.5)
<tr class="{{$h == (int)$h ? "" : "row_gray"}}">
<td class="tt_hours_column">
{{$time = gmdate("H:i", $h * 3600)}} uur
</td>
@for($d = 0; $d < 7; ++$d)
@php($date = $dates[$d])
@if(isset($byStartTime[$time][$date]))
<?php
$item = $byStartTime[$time][$date];
$duration = ($date == $item['enddate'])
? ($item['endtime']->format('H') - $h)
: (24 - $h);
$slots = 2 * $duration;
?>
<td class="event" rowspan="{{$slots}}">
<div class="event_container tt_tooltip" style="height: {{$slots * 20}}px;">
<a class="event_header" href="#" title="{{$item['program']->name}}">{{$item['program']->name}}</a>
<div>{!!Formatter::excerpt($item['program']->description, 200)!!}</div>
<!-- <div class="tt_tooltip_text" style="width: 400px; height: 300px; top: -116px; left: 0px;">
<div class="tt_tooltip_content">
<b>{{$item['program']->name}}</b> <br/>
{!!Formatter::excerpt($item['program']->description, 200)!!}
</div>
<div class="tt_tooltip_arrow"></div>
</div> -->
</div>
</td>
@endif
@endfor
</tr>
@endfor
</tbody>
</table>
<div class="responsive">
@php($date = null)
@foreach($schedule as $item)
@if(($formattedDate = Formatter::fullDate($item['starttime'], 'W d m')) != $date)
@php($date = $formattedDate)
@if($date != null) </ul> @endif
<h5>{{$formattedDate}}</h2>
<ul class="tt_items_list thin page_margin_top timetable_clearfix">
@endif
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
@php($class =( $item['program']->priority < 2 ? 'bg-primary'
:( $item['program']->nonstop || $item['program']->rerun ? 'text-muted'
:( $isCurrent ? 'bg-info active text-primary'
:( ''
)))))
<li class="timetable_clearfix">
<div class="event_container">
<a href="#" title="{{$item['program']->name}}" class="event_header">{{$item['program']->name}} </a>
@if($isCurrent) <span class="bg-primary current-marker">Nu op NH Gooi</span> @endif
<p>
<p>{{Formatter::excerpt(strip_tags($item['program']->description), 200)}}</p>
</td>
</tr>
@endforeach
</ul>

View File

@@ -3,7 +3,19 @@
@include('widgets/mediaplayer')
@section('title')
Fragment gemist | {{$podcast->title}}
{{$podcast->title}}
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Fragment gemist" href="{{url('radio/gemist')}}">Fragment gemist</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
@if($podcast->program)
<li><a title="{{$podcast->program->name}}" href="{{url('radio/gemist/programma' . $podcast->program->url)}}">{{$podcast->program->name}}</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
@endif
<li>Fragment</li>
</ul>
@endsection
@push('scripts')
@@ -69,7 +81,6 @@ $(".vertical_carousel").each(function() {
<div class="row">
<div class="post single">
<h1>Fragment gemist</h1>
<h2 class="post_title">{{$podcast->title}}</h2>
<ul class="post_details clearfix">
@if($podcast->program)
<li class="detail"><a href="{{ url('programma' . $podcast->program->url ) }}">{{ $podcast->program->name }}</a></li>

View File

@@ -4,6 +4,16 @@
Fragment gemist
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
@if(isset($program))
<li><a title="Fragment gemist" href="{{url('radio/gemist')}}">Fragment gemist</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>{{$program->name}}</li>
@endif
</ul>
@endsection
@section('content')
@parent

View File

@@ -1,22 +1,26 @@
@extends('layouts/full')
@section('title')
Radio | {{$program->name}}
{{$program->name}}
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Radioprogrammering" href="{{url('radio/gids')}}">Radioprogrammering</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>Programma-informatie</li>
</ul>
@endsection
@section('content')
@parent
@php($now = new \DateTimeImmutable())
<div class="page_layout page_margin_top clearfix">
<div class="row page_margin_top">
<div class="column column_2_3">
<div class="row">
<div class="post single">
<h1>{{$program->name}}</h1>
<p>{!!$program->description!!}</p>
</div>
</div>
</div>
<div class="column column_1_3">
<div id="komende_uitzendingen">
<h4 class="box_header page_margin_top_section">Komende week</h4>

File diff suppressed because it is too large Load Diff