Add postcast styling
Add prettyPhoto
This commit is contained in:
Jorit Tijsen
9
resources/assets/js/functions/prettyPhoto.js
vendored
Normal file
9
resources/assets/js/functions/prettyPhoto.js
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
$(function () {
|
||||
console.log($(".prettyPhoto[rel^='prettyPhoto']"));
|
||||
$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({
|
||||
show_title: false,
|
||||
slideshow: 3000,
|
||||
overlay_gallery: true,
|
||||
social_tools: ''
|
||||
});
|
||||
});
|
||||
1
resources/assets/sass/base/_base.scss
vendored
1
resources/assets/sass/base/_base.scss
vendored
@@ -2,6 +2,7 @@
|
||||
@use "clearfix";
|
||||
@use "container";
|
||||
@use "../components/button";
|
||||
@use "../components/pretty_photo";
|
||||
|
||||
@use "../layout";
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
.featured {
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
max-height: 218px;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
|
||||
12
resources/assets/sass/components/_podcast_item.scss
vendored
Normal file
12
resources/assets/sass/components/_podcast_item.scss
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
.announcement {
|
||||
padding: 30px;
|
||||
border-radius: 3px;
|
||||
background-color: #f0f0f0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.action_button.btn {
|
||||
width: fit-content;
|
||||
color: #fff;
|
||||
float: left;
|
||||
margin: 10px 20px 0 0;
|
||||
}
|
||||
2
resources/assets/sass/components/_post.scss
vendored
2
resources/assets/sass/components/_post.scss
vendored
@@ -9,7 +9,7 @@
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.bread_crumb {
|
||||
&:not(.breadcrumb_no_border) .bread_crumb {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
34
resources/assets/sass/components/pretty_photo.scss
vendored
Normal file
34
resources/assets/sass/components/pretty_photo.scss
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
div.pp_default .pp_content_container .pp_left,
|
||||
div.pp_default .pp_content_container .pp_right,
|
||||
div.pp_default .pp_top .pp_left,
|
||||
div.pp_default .pp_top .pp_middle,
|
||||
div.pp_default .pp_top .pp_right,
|
||||
div.pp_default .pp_bottom .pp_left,
|
||||
div.pp_default .pp_bottom .pp_middle,
|
||||
div.pp_default .pp_bottom .pp_right
|
||||
{
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
div.pp_default .pp_content, div.light_rounded .pp_content
|
||||
{
|
||||
padding: 10px;
|
||||
}
|
||||
div.pp_default .pp_description
|
||||
{
|
||||
font-family: Nunito, serif;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
line-height: 3.17;
|
||||
color: #585858;
|
||||
}
|
||||
div.pp_default .pp_close
|
||||
{
|
||||
margin-top: 8px;
|
||||
background: url("/images/icons/other/close.png") 0 0 no-repeat;
|
||||
}
|
||||
div.pp_default .pp_close:hover
|
||||
{
|
||||
opacity: 1;
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
1
resources/assets/sass/layout/_index.scss
vendored
1
resources/assets/sass/layout/_index.scss
vendored
@@ -4,4 +4,5 @@
|
||||
@forward 'post';
|
||||
@forward 'gids';
|
||||
@forward 'program';
|
||||
@forward 'podcast';
|
||||
@forward 'footer';
|
||||
|
||||
1
resources/assets/sass/layout/_podcast.scss
vendored
Normal file
1
resources/assets/sass/layout/_podcast.scss
vendored
Normal file
@@ -0,0 +1 @@
|
||||
@use "../components/podcast_item";
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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-->
|
||||
|
||||
@@ -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">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="mailto:contact@pressroom.com" class="social_icon mail">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="#" class="social_icon skype">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="#" class="social_icon instagram">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="" href="#" class="social_icon pinterest">
|
||||
|
||||
</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
|
||||
|
||||
@@ -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"> </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
|
||||
|
||||
Reference in New Issue
Block a user