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

Add postcast styling

Browse Source 
Add prettyPhoto
This commit is contained in:
Jorit Tijsen
2024-03-18 17:17:54 +01:00
parent 8ce3a1d7b3
commit 742c126a0a
31 changed files with 1284 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/calendarevent.blade.php
View File

@@ -20,6 +20,7 @@
<div class="post single small_image">
<ul class="post_details clearfix">
<li class="detail date">
<i class="fa-regular fa-clock"></i>
{{Formatter::relativeDate($event->starts, 'W d m y?')}}
@if($event->ends && $event->starts != $event->ends)
t/m {{Formatter::relativeDate($event->ends, 'd m y?')}}
@@ -41,6 +42,7 @@
</div>
<ul class="post_details clearfix">
<li class="detail date">
<i class="fa-regular fa-clock"></i>
{{ Formatter::relativeDate($event->podcast->created) }} uitgezonden
@if($event->podcast->program) in <a href="{{ route('programma') . $event->podcast->program->url }}">{{ $event->podcast->program->name }}</a> @endif
</li>

2
resources/views/home.blade.php
View File

@@ -151,7 +151,7 @@
<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($podcast->created)}}
</span>
</div>
<p>
<p class="clipText clipText-7" title="{{strip_tags($podcast->content)}}">
{!!$podcast->content!!}
</p>
</div>

2
resources/views/layouts/_head.blade.php
View File

@@ -12,7 +12,6 @@
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" type="text/css" href="/css/superfish.css">
<link rel="stylesheet" type="text/css" href="/css/prettyPhoto.css">
<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/menu_styles.css">
@@ -21,6 +20,7 @@
<link rel="stylesheet" type="text/css" href="/css/odometer-theme-default.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="/css/nhgooi.css">-->
<link rel="stylesheet" type="text/css" href="/css/prettyPhoto.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="/css/style.css">

14
resources/views/layouts/master.blade.php
View File

@@ -5,7 +5,7 @@
<html>
@include('layouts._head')
<body>
<button style="position: fixed; top: 0; left: 0;display: none" onclick="refreshCSS()">Refresh</button>
<button style="position: fixed; top: 0; left: 0;display: none;" onclick="refreshCSS()">Refresh</button>
<!-- Google Tag Manager (noscript) -->
<noscript>
@@ -142,12 +142,12 @@
<script type="text/javascript" src="/js/jquery.sliderControl.js"></script>
<script type="text/javascript" src="/js/jquery.timeago.js"></script>
<script type="text/javascript" src="/js/jquery.hint.js"></script>
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
<script type="text/javascript" src="/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
<script type="text/javascript" src="/js/odometer.min.js"></script>-->
<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="/js/functions.js"></script>
<script type="text/javascript">
$(window).resize(function () {
@@ -155,11 +155,11 @@
// menu_position = $(".menu_container").offset().top;
});
$(window).scroll(function () {
var topOfWindow = $(window).scrollTop();
if (topOfWindow > menu_position) $(".scroll_top_floater").fadeIn();
else $(".scroll_top_floater").fadeOut();
});
// $(window).scroll(function () {
// var topOfWindow = $(window).scrollTop();
// if (topOfWindow > menu_position) $(".scroll_top_floater").fadeIn();
// else $(".scroll_top_floater").fadeOut();
// });
$(".scroll_top_floater").hide();
function openPlayerInNewScreen() {

2
resources/views/listen.blade.php
View File

@@ -148,9 +148,7 @@
title: $(".now-playing-header .title"),
artist: $(".now-playing-header .artist"),
};
console.log($nowPlaying);
$(document).on('onAirUpdated', function (evt, data) {
console.log(data);
var title = data.current ? data.current.title : '';
var artist = data.current ? data.current.artist : '';
if (data.inProgram) {

1
resources/views/newsitem.blade.php
View File

@@ -61,6 +61,7 @@
</div>
<ul class="post_details clearfix">
<li class="detail date">
<i class="fa-regular fa-clock"></i>
{{ Formatter::relativeDate($news->podcast->created) }} uitgezonden
@if($news->podcast->program) in <a href="{{ route('programma') . $news->podcast->program->url }}">{{ $news->podcast->program->name }}</a> @endif
</li>

9
resources/views/partial/blogitems.blade.php
View File

@@ -2,12 +2,13 @@
<div class="row">
<div class="post single small_image">
<ul class="post_details clearfix">
<li class="detail date">
<li class="detail date">
<i class="fa-regular fa-clock"></i>
{{Formatter::relativeDate($item->published)}} om {{$item->published->format("H:i")}}
@if($item->edited && ($item->edited->format("d m H i") != $item->published->format("d m H i")))
| <em>bijgewerkt</em>:
@if($item->edited->format("d m") != $item->published->format("d m"))
{{strtolower(Formatter::relativeDate($item->edited))}}
{{strtolower(Formatter::relativeDate($item->edited))}}
@endif
om {{$item->edited->format("H:i")}} uur
@endif
@@ -59,7 +60,7 @@
<p>{!!$item->content!!}</p>
</div>
@endif
@if($item->video)
@include('widgets/mediaplayer')
@php(createVideoElement($item->video))
@@ -77,7 +78,7 @@
<div class="announcement">
<div>
<audio controls>
<source src="{{ $url = url( $apiUrl . "podcast/download" . $item->podcast->url . "?auth=" . $item->podcast->auth )}}" type="audio/mpeg" />
<source src="{{ $url = url( $apiUrl . "podcast/download" . $item->podcast->url . "?auth=" . $item->podcast->auth )}}" type="audio/mpeg" />
</audio>
</div>
</div>

64
resources/views/partial/podcastdirectitems.blade.php
View File

@@ -1,32 +1,38 @@
<ul class='blog row grid'>
@foreach($podcasts as $podcast)
<?php
$url = route('gemist.fragment') . $podcast->url;
$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
?>
<li class="post card column column_1_1">
<div class="post_content">
<h2><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a></h2>
<ul class="post_details">
<li class="date">
{{ Formatter::relativeDate($podcast->created) }}
</li>
</ul>
<div class="clearfix"></div>
@if($podcast->image)
<a href="{{$url}}" title="{{$podcast->title}}" class="fixed-height">
<img src='{{$imgBase . $podcast->image->url}}' alt='{{$podcast->image->title}}'>
</a>
@endif
<p>{!! $podcast->content !!}</p>
<a class="action_button player" href="{{$popoutUrl}}">
<span class="fa fa-external-link-alt"></span>
<span>Luister in nieuw venster</span>
</a>
<span class="clearfix"></span>
</div>
</li>
<ul class='blog row'>
@foreach($podcasts as $podcast)
<?php
$url = route('gemist.fragment') . $podcast->url;
$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
?>
<li class="box featured">
<div class="row">
<div class="col-6">
<a href="{{$url}}" title="{{$podcast->title}}">
<img src="{{$podcast->image && $podcast->image->url ? $imgBase . $podcast->image->url : '/images/noimage.png'}}"/>
</a>
</div>
<div class="col-6">
<h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a></h2>
<div class="sub_title">
@if ($podcast->program)
<a class="program_name" href="{{ route('programma') . $podcast->program->url }}"
title="{{$podcast->program->name}}">{{$podcast->program->name}}</a>
@endif
<span class="post_date" title="{{Formatter::relativeDate($podcast->created)}}">
<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($podcast->created)}}
</span>
</div>
<p class="clipText clipText-7" title="{{strip_tags($podcast->content)}}">
{!!$podcast->content!!}
</p>
<a class="action_button btn player" href="{{$popoutUrl}}">
<span class="fa fa-external-link-alt"></span>
<span>Luister in nieuw venster</span>
</a>
</div>
</div>
</li>
@endforeach
@endforeach
</ul><!--/.row-->

209
resources/views/podcastitem.blade.php
View File

@@ -4,12 +4,16 @@
@section('title')
@if ($podcast)
{{$podcast->title}}
Fragment gemist
@else
Fragment {{$title}} niet gevonden
@endif
@endsection
@section('page_class')
post_container breadcrumb_no_border
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Home" href="/">Home</a></li>
@@ -77,157 +81,94 @@
@endpush
@section('content')
@parent
@if ($podcast)
<?php
$audioUrl = url($apiUrl . 'podcast/download' . $podcast->url . "?auth=" . $podcast->auth);
$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
?>
<div class="row page_margin_top">
<div class="column column_2_3">
<div class="row">
<div class="post single small_image">
<h1>Fragment gemist</h1>
<ul class="post_details clearfix">
<li class="detail date">{{ Formatter::relativeDate($podcast->created) }}</li>
@if($podcast->program)
<li class="detail"><a
href="{{ route('programma') . $podcast->program->url }}">{{ $podcast->program->name }}</a>
<div class="">
<div class="row news_post">
<div class="col-12 col-md content_container">
<div class="box full-width post single small_image">
<h1 class="page_title">{{$podcast->title}}</h1>
<div class="post_body">
<ul class="post_details clearfix">
<li class="detail date">
<i class="fa-regular fa-clock"></i>
{{ Formatter::relativeDate($podcast->created) }}
</li>
@endif
</ul>
@if($podcast->program)
<li class="detail author">
<a href="{{ route('programma') . $podcast->program->url }}">{{ $podcast->program->name }}</a>
</li>
@endif
</ul>
<div class="announcement">
<audio controls autoplay="true">
<source src="{{$audioUrl}}" type="audio/mpeg"/>
</audio>
<div class="clearfix">
<a class="action_button" href="{{$audioUrl}}" title="Download dit fragment als MP3">
<span class="fa fa-download"></span>
<span>Download fragment</span>
</a>
<a class="action_button player" href="{{$popoutUrl}}">
<span class="fa fa-external-link-alt"></span>
<span>Luister in nieuw venster</span>
</a>
</div>
</div>
<div class="content_box clearfix section_margin_top">
@if($podcast->image)
<div class="post_image_box">
<a href="{{$imgBase . $podcast->image->url}}" class="post_image prettyPhoto"
rel="prettyPhoto" title="{{$podcast->image->title}}">
<img src="{{$imgBase . $podcast->image->url}}"
title="{{$podcast->image->title}}" style="display: block;"/>
<div class="announcement">
<audio controls autoplay="true">
<source src="{{$audioUrl}}" type="audio/mpeg"/>
</audio>
<div class="clearfix">
<a class="action_button btn" href="{{$audioUrl}}" title="Download dit fragment als MP3">
<span>Download fragment</span>
</a>
<a class="action_button btn player" href="{{$popoutUrl}}">
<span>Luister in nieuw venster</span>
</a>
<div class="sentence">
<span class="text">{{$podcast->image->title}}</span>
</div>
</div>
@endif
<div class="post_content page_margin_top_section ">
<h3>{!!$podcast->content!!}</h3>
</div>
<div class="content_box clearfix section_margin_top">
@if($podcast->image)
<div class="post_image_box">
<a href="{{$imgBase . $podcast->image->url}}" class="post_image prettyPhoto"
rel="prettyPhoto" title="{{$podcast->image->title}}">
<img src="{{$imgBase . $podcast->image->url}}"
title="{{$podcast->image->title}}" style="display: block;"/>
</a>
<div class="sentence">
<span class="text">{{$podcast->image->title}}</span>
</div>
</div>
@endif
<div class="post_content page_margin_top_section ">
<h3 class="excerpt">{!!$podcast->content!!}</h3>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!--
<div class="row page_margin_top">
<div class="share_box clearfix">
<label>Share:</label>
<ul class="social_icons clearfix">
<li>
<a target="_blank" title="" href="http://facebook.com/QuanticaLabs" class="social_icon facebook">
&nbsp;
</a>
</li>
<li>
<a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter">
&nbsp;
</a>
</li>
<li>
<a title="" href="mailto:contact@pressroom.com" class="social_icon mail">
&nbsp;
</a>
</li>
<li>
<a title="" href="#" class="social_icon skype">
&nbsp;
</a>
</li>
<li>
<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato">
&nbsp;
</a>
</li>
<li>
<a title="" href="#" class="social_icon instagram">
&nbsp;
</a>
</li>
<li>
<a title="" href="#" class="social_icon pinterest">
&nbsp;
</a>
</li>
</ul>
</div>
</div>
-->
</div>
<div class="column column_1_3">
<div class="col-12 col-md-auto sidebar">
@if ((isset($podcasts)))
<div data-tabs>
<div class="tabs">
<h4 data-tab-content-id="tab_more_fragmenten"
class="box_header extra_small flex-grow-1 active"><span>Meer fragmenten</span>
</h4>
</div>
<div id="tab_more_fragmenten" class="box tab_content podcast_items active">
@include('partial/podcastitems', ['id' => 'items-podcasts', 'showTime' => false, 'showImage' => false, 'podcasts' => $podcasts])
<a class="btn auto_width" id="meer-nieuws-more-podcast" href="#"
data-loadmorenews='{"container":["#items-podcasts"]}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Meer fragmenten
</a>
</div>
</div>
@endif
@if(count($related) > 1)
<h4 class="box_header page_margin_top_section">Meer uit deze uitzending</h4>
<div class="vertical_carousel_container clearfix">
<ul class="blog podcasts vertical_carousel" id="related_items">
@foreach($related as $relatedItem)
@if($relatedItem->id == $podcast->id)
@continue
@endif
<li class="post">
<div class="post_content">
<h5>
<a href="{{ route('gemist.fragment') . $relatedItem->url }}"
title="{{$relatedItem->title}}">
<span class="fa fa-chevron-circle-right"></span>
{{$relatedItem->titleWithoutProgram()}}
</a>
</h5>
<p class="post_details simple" title="{{$relatedItem->content}}">
{{Formatter::excerpt($relatedItem->content, 80)}}
</p>
</div>
</li>
@endforeach
</ul>
<div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
- Advertentie -
</div>
<a href="{{route('gemist.programma') . $podcast->program->url}}"
class="more">Meer {{$podcast->program->name}}</a>
@endif
<h4 class="box_header page_margin_top_section">Meer fragmenten</h4>
<nav>
<ul class="blog podcasts">
<li class="post">
<a href="{{route('gemist')}}" class="read_more">
<span class="arrow"></span>
<span>Alle recente fragmenten</span>
</a>
</li>
</ul>
</nav>
</div>
<div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
</div>
</div>
@endif
@endsection

198
resources/views/podcastseries.blade.php
View File

@@ -1,139 +1,91 @@
@extends('layouts/full')
@section('title')
Fragment gemist
Fragment gemist
@endsection
@section('page_class')
post_container breadcrumb_no_border
@endsection
@section('breadcrumb')
<ul class="bread_crumb ">
<li><a title="Home" href="/">Home</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li><a title="Fragment gemist" href="{{route('gemist')}}">Fragment gemist</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
@if(isset($program))
<li><a title="{{$program->name}}"
href="{{route('gemist.programma') . $program->url}}">{{$program->name}}</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
@endif
<li>Fragmenten</li>
</ul>
@endsection
@section('content')
<div class="">
<div class="row news_post post_container">
<div class="col-12">
<ul class="bread_crumb">
<li><a title="Programma gemist" href="{{route('gemist.programma')}}">Programma gemist</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>{{$program->name}}</li>
</ul>
<div id="gemist_tabs" class="no_scroll clearfix">
<div class="tabs fit_content">
<h4 class="box_header active">
<a href="{{route('gemist.programma')}}" title="Programma gemist">
<span>Programma gemist</span>
</a>
</h4>
<h4 class="box_header">
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
<span>Fragment gemist</span>
</a>
</h4>
</div>
</div>
</div>
<div class="col-12 col-md content_container">
<div class="box full-width">
</div>
</div>
<div class="col-12 col-md-auto sidebar">
@if ((isset($podcasts) && $podcasts))
<div data-tabs>
<div class="tabs">
@if (isset($podcasts) && $podcasts)
<h4 data-tab-content-id="tab_most_read"
class="box_header extra_small flex-grow-1 active"><span>Meest gelezen</span>
</h4>
<div class="">
<div class="row news_post">
<div class="col-12 col-md content_container" style="padding-top:80px">
@if(isset($program))
<div class="box full-width post single">
<h1 class="page_title">{{$program->name}}</h1>
<div class="post_body">
<div class="content_box clearfix section_margin_top">
<div class="post_content page_margin_top_section ">
<div class="excerpt">{!!$program->description!!}</div>
</div>
</div>
</div>
</div>
@endif
</div>
@if (isset($podcasts) && $podcasts)
<div id="tab_most_read" class="box tab_content active">
@include('partial/newslist_small', ['id' => 'items-podcasts', 'news' => $podcasts])
<a class="btn auto_width" id="meer-nieuws-most-read" href="#"
data-loadmorenews='{"container":["#items-podcasts"]}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Klik hier voor meer nieuws
</a>
</div>
@endif
@if($podcasts)
<div class="page_layout clearfix">
<div class="grid" id="items">
@include('partial/podcastdirectitems', ['podcasts' => array_slice($podcasts, 0, 2)])
</div><!--/.row-->
</div>
@else
<div class="box full-width">
<p class="page_body">Er zijn geen fragmenten beschikbaar.</p>
</div>
@endif
</div>
@endif
<div class="col-12 col-md-auto sidebar">
<div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
- Advertentie -
</div>
<div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
</div>
@if (isset($podcasts) && count($podcasts) > 2)
<div data-tabs>
<div class="tabs">
<h4 data-tab-content-id="tab_more_fragmenten"
class="box_header extra_small flex-grow-1 active"><span>Meer fragmenten</span>
</h4>
</div>
<div id="tab_more_fragmenten" class="box tab_content podcast_items active">
@include('partial/podcastitems', ['id' => 'items-podcasts', 'showTime' => false, 'showImage' => false, 'podcasts' => array_slice($podcasts, 2)])
<a class="btn auto_width" id="meer-nieuws-more-podcast" href="#"
data-loadmorenews='{"container":["#items-podcasts"]}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Meer fragmenten
</a>
</div>
</div>
@endif
<div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
- Advertentie -
</div>
<div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
</div>
</div>
</div>
</div>
@if(isset($program))
<h2>{{$program->name}}</h2>
<p class="intro">
{!! $program->description !!}
</p>
@endif
@if($podcasts)
<div class="page_layout clearfix">
<div class="row grid" id="items">
@include('partial.podcastdirectitems', ['podcasts' => $podcasts])
</div><!--/.row-->
</div>
<div id="loading" style="display: none">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<b>Meer podcasts aan het ophalen...</b>
</div>
</div>
</div>
@push('scripts')
<script>
/*
var page = 1;
var isLoading = 0;
var $items = $('#items');
var $isLoading = $('#loading');
$(function() {
$(window).scroll(function () {
var $this = $(this);
var tweak = 10;
if(!isLoading && (page > 0) && ($this.scrollTop() >= $items.height() - $this.height() - tweak))
{
isLoading = 1;
$isLoading.show();
$.ajax({ url: document.location.pathname + '?pagina=' + (++page) })
.always(function() { isLoading = 0; $isLoading.hide(); })
.done(function(data) {
if(!data) {
if(page > 1) $items.append("<hr /><p>Er zijn geen podcasts (meer).</p>");
page = -1;
return;
}
$newPage = $("<div />").append(data);
$items.append($newPage);
$newPage.find("audio, video").mediaelementplayer({ stretching: 'responsive' });
});
}
});
});
*/
</script>
@endpush
@else
<p>Er zijn geen fragmenten beschikbaar.</p>
@endif
@endsection
@push('styles')
<style>
#gemist_tabs li {
width: 50%;
}
</style>
<style>
#gemist_tabs li {
width: 50%;
}
</style>
@endpush