Styled pages missed program and fragment missed

resources/views/layouts/master.blade.php

@@ -152,7 +152,7 @@
 <script type="text/javascript">
   $(window).resize(function () {
     // Fix sticky for mobile menu indicator
-    menu_position = $(".menu_container").offset().top;
+    // menu_position = $(".menu_container").offset().top;
   });
 
   $(window).scroll(function () {

resources/views/listen.blade.php

@@ -123,6 +123,9 @@
                 .now-playing-header {
                     width: 100%;
                 }
+                .action_button {
+                    margin-right: 20px;
+                }
             </style>
         @endpush
 

resources/views/partial/podcastitems.blade.php

@@ -1,9 +1,31 @@
-<ul>
-@foreach($podcasts as $podcast)
+<?php
+$li = array_merge([
+    'class' => '',
+    'style' => ''
+], $li ?? []);
+$content = array_merge([
+    'class' => '',
+    'style' => '',
+], $content ?? []);
+$ul = array_merge([
+    'class' => ''
+], $ul ?? []);
+$body = array_merge([
+    'show' => false,
+    'class' => ''
+], $body ?? []);
+$actionButton = array_merge([
+    'class' => ''
+], $actionButton ?? []);
+?>
+<ul id="{{$id ?? ''}}" class="{{$ul['class']}}">
+    @foreach($podcasts as $podcast)
             <?php $url = route('gemist.fragment') . $podcast->url; ?>
-        <li class="post">
-            <div class="post_content">
-                <h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a></h2>
+        <li style="{{$li['style']}}" class="post {{$li['class']}}">
+            <div style="{{$content['style']}}" class="post_content {{$content['class']}}">
+                <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 }}"
@@ -20,6 +42,16 @@
                         <img src='{{$imgBase . $podcast->image->url}}' alt='{{$podcast->image->title}}'>
                     </a>
                 @endif
+                @if($body['show'])
+                    <p class="post_body {{$body['class']}}">
+                        {!!$podcast->content!!}
+                    </p>
+                @endif
+                @if(isset($showAction) && $showAction)
+                    <div class="action_button {{$actionButton['class']}}">
+                        <a class="btn" href="{{$url}}">Luister fragment</a>
+                    </div>
+                @endif
             </div>
         </li>
 

resources/views/partial/programitems.blade.php

@@ -0,0 +1,67 @@
+<?php
+$li = array_merge([
+    'class' => '',
+    'style' => ''
+], $li ?? []);
+$content = array_merge([
+    'class' => '',
+    'style' => '',
+], $content ?? []);
+$ul = array_merge([
+    'class' => ''
+], $ul ?? []);
+$body = array_merge([
+    'show' => false,
+    'class' => ''
+], $body ?? []);
+$actionButton = array_merge([
+    'class' => ''
+], $actionButton ?? []);
+?>
+<ul id="{{$id ?? ''}}" class="{{$ul['class']}}">
+    @foreach($programs as $program)
+            <?php $url = route('programma') . $program->program->url; ?>
+            <?php $endStartDiff = $program->end->diff($program->start);
+            $duration = 24 * $endStartDiff->d + $endStartDiff->h; ?>
+        <li style="{{$li['style']}}" class="post {{$li['class']}}">
+            <div style="{{$content['style']}}" class="post_content {{$content['class']}}">
+                <h2 class="post_title">
+                    <a href="{{$url}}" title="{{$program->program->name}}">{!!$program->program->name!!}</a>
+                </h2>
+                @if($program->current)
+                    <a href="{{route('luister.live')}}" class="onair action_button player"><span class="fa"></span>
+                        <span>Nu live!</span>
+                    </a>
+                @else
+                    <div class="sub_title">
+                        <?php $time = Formatter::relativeDate($program->start) . (isset($showTime) && $showTime ? ' om ' . $program->start->format('H:i') : ''); ?>
+                        <span class="post_date" title="{{$time}}">
+					        <i class="fa-regular fa-clock"></i> {{$time}}
+				        </span>
+                    </div>
+
+                @endif
+                @if(isset($showAction) && $showAction)
+                    <div class="row action_button" style="margin-top: 20px;">
+                        @if(!$program->current)
+                            <div class="col">
+                                <a href="{{route('luister.programma') . '/' . $program->start->format('Y/m/d/H') . '/' . $duration}}"
+                                   class="player btn" style="padding: 10px 0;width: 100%;">Luister terug</a>
+                            </div>
+                        @endif
+                        <div class="col">
+                            <a href="{{route('programma') . $program->program->url}}" class="btn"
+                               style="padding: 10px 0;width: 100%;">Meer informatie</a>
+                        </div>
+                    </div>
+                @endif
+                @if($body['show'])
+                    <p class="post_body {{$body['class']}}">
+                        {!!strip_tags($program->program->description)!!}
+                    </p>
+                @endif
+            </div>
+        </li>
+
+    @endforeach
+</ul>

resources/views/podcastitem.blade.php

@@ -3,79 +3,87 @@
 @include('widgets/mediaplayer')
 
 @section('title')
-  {{$podcast->title}}
+	@if ($podcast)
+		{{$podcast->title}}
+	@else
+		Fragment {{$title}} niet gevonden
+	@endif
 @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 icon_small_arrow right_gray">&nbsp;</li>
-		@if($podcast->program)
-		<li><a title="{{$podcast->program->name}}" href="{{route('gemist.programma') . $podcast->program->url}}">{{$podcast->program->name}}</a></li>
-		<li class="separator icon_small_arrow right_gray">&nbsp;</li>
+		<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
+		@if($podcast && $podcast->program)
+			<li><a title="{{$podcast->program->name}}"
+				   href="{{route('gemist.programma') . $podcast->program->url}}">{{$podcast->program->name}}</a></li>
+			<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
 		@endif
 		<li>Fragment</li>
 	</ul>
-@endsection 
+@endsection
 
 @push('scripts')
-<script>
-$(".vertical_carousel").each(function() {
-		$(this).before("<a class='slider_control up' id='" + this.id + "_prev' href='#' title='Terug'></a>");
-		$(this).after("<a class='slider_control down' id='" + this.id + "_next' href='#' title='Verder'></a>");
-		var carouselOptions = {
-			direction: "up",
-			items: {
-				visible: 3,
-			},
-			scroll: {
-				items: 2,
-				duration: 500,
-				pauseOnHover: true
-			},
-			auto: {
-				items: 3,
-				play: true,
-				pauseOnHover: true,
-			},
-			mousewheel: true,
-			swipe: {
-				onMouse: true,
-				onTouch: true
-			},
-			prev: { 
-				button: $('.slider_control.up', $(this).parent()),
-				pauseOnHover: true,
-			},
-			next: { 
-				button: $('.slider_control.down', $(this).parent()),
-				pauseOnHover: true,
-			},
-		};
+	<script>
+		$(".vertical_carousel").each(function () {
+			$(this).before("<a class='slider_control up' id='" + this.id + "_prev' href='#' title='Terug'></a>");
+			$(this).after("<a class='slider_control down' id='" + this.id + "_next' href='#' title='Verder'></a>");
+			var carouselOptions = {
+				direction: "up",
+				items: {
+					visible: 3,
+				},
+				scroll: {
+					items: 2,
+					duration: 500,
+					pauseOnHover: true
+				},
+				auto: {
+					items: 3,
+					play: true,
+					pauseOnHover: true,
+				},
+				mousewheel: true,
+				swipe: {
+					onMouse: true,
+					onTouch: true
+				},
+				prev: {
+					button: $('.slider_control.up', $(this).parent()),
+					pauseOnHover: true,
+				},
+				next: {
+					button: $('.slider_control.down', $(this).parent()),
+					pauseOnHover: true,
+				},
+			};
 
-		$(this).carouFredSel(carouselOptions);
+			$(this).carouFredSel(carouselOptions);
 
-		$(this).parent().parent().hover(function(){
-			$(".up.slider_control", this).removeClass("slideDownBack").addClass("slideDown");
-			$(".down.slider_control", this).removeClass("slideUpBack").addClass("slideUp");
-		},
-		function(){
-			$(".up.slider_control", this).removeClass("slideDown").addClass("slideDownBack");
-			$(".down.slider_control", this ).removeClass("slideUp").addClass("slideUpBack");
+			$(this).parent().parent().hover(function () {
+						$(".up.slider_control", this).removeClass("slideDownBack").addClass("slideDown");
+						$(".down.slider_control", this).removeClass("slideUpBack").addClass("slideUp");
+					},
+					function () {
+						$(".up.slider_control", this).removeClass("slideDown").addClass("slideDownBack");
+						$(".down.slider_control", this).removeClass("slideUp").addClass("slideUpBack");
+					});
+
+			//	$(window).trigger("resize");
 		});
-
-	//	$(window).trigger("resize");
-});
-</script>
+	</script>
 @endpush
 
 @section('content')
-@parent
-	<?php
-		$audioUrl = url($apiUrl . 'podcast/download' . $podcast->url . "?auth=" . $podcast->auth);
-		$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
-	?>
-	
+	@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">
@@ -83,135 +91,143 @@ $(".vertical_carousel").each(function() {
 						<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></li> 
-						@endif
+							@if($podcast->program)
+								<li class="detail"><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;"/>
-					</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 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>
-		
-				<div class="clearfix"></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>{!!$podcast->content!!}</h3>
+							</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 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">
 
 
-			@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
+				@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>
+					<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">
-							<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>
+							<a href="{{route('gemist')}}" class="read_more">
+								<span class="arrow"></span>
+								<span>Alle recente fragmenten</span>
+							</a>
 						</li>
-					@endforeach
 					</ul>
-				</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>
+				</nav>
+			</div>
 		</div>
-	</div>
-
+	@endif
 @endsection

resources/views/podcastlist.blade.php

@@ -1,109 +1,119 @@
-@extends('layouts/sidebar')
+@extends('layouts/full')
 
 @section('title')
-  Fragment gemist
+    Fragment gemist
 @endsection
 
-@section('page_class')post_container @endsection
+@section('page_class')
+    post_container
+@endsection
 
 @section('breadcrumb')
-  @if(isset($program))
-  <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>
-    <li>{{$program->name}}</li>
-  </ul>
-  @endif
+    @if(isset($program))
+        <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="{{url('gemist.fragment')}}">Fragment gemist</a></li>
+            <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
+            <li>{{$program->name}}</li>
+        </ul>
+    @else
+        <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>Fragment gemist</li>
+        </ul>
+    @endif
 @endsection
 
 @section('content')
-  @parent
+    <div class="">
+        <div class="row news_post post_container">
+            <div class="col-12 col-md content_container">
+                <div id="gemist_tabs" class="no_scroll clearfix">
+                    <div class="tabs fit_content">
+                        <h4 class="box_header">
+                            <a href="{{route('gemist.programma')}}" title="Programma gemist">
+                                <span>Programma gemist</span>
+                            </a>
+                        </h4>
+                        <h4 class="box_header active">
+                            <a href="{{route('gemist.fragment')}}" title="Fragment gemist">
+                                <span>Fragment gemist</span>
+                            </a>
+                        </h4>
+                    </div>
+                </div>
+                @if(isset($program))
+                    <h2>{{$program->name}}</h2>
+                    <p class="align-right">
+                        <a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon
+                            alles</a>
+                        <a href="{{route('programma') . $program->url}}" title="{{$program->name}}"
+                           class="btn btn-info">Programmainfo</a>
+                    </p>
+                @else
+                    <p class="page_body">Hele uitzendingen kunt u binnen twee weken terugluisteren via <a
+                                href="{{route('gemist.programma')}}">programma gemist</a>.<br /><br />
+                @endif
 
-  <div id="gemist_tabs" class="no_scroll clearfix">
-    <div class="tabs fit_content">
-      <h4 class="box_header">
-        <a href="{{route('gemist.programma')}}" title="Programma gemist">
-          <span>Programma gemist</span>
-        </a>
-      </h4>
-      <h4 class="box_header active">
-        <a href="{{route('gemist.fragment')}}" title="Fragment gemist">
-          <span>Fragment gemist</span>
-        </a>
-      </h4>
+                @if(isset($podcasts))
+
+                    <div class="clearfix podcast_items">
+                        @include('partial/podcastitems', [
+                            'li' => [
+                                'class' => 'col-12 col-md-6'
+                            ],
+                            'content' => [
+                                'class' => 'box full_width flex-column d-flex',
+                                'style' => 'height: 300px'
+                            ],
+                            'ul' => [
+                                'class' => 'row overview'
+                            ],
+                            'body' => [
+                                'show' => true,
+                                'class' => 'clipText'
+                            ],
+                            'actionButton' => [
+                                'class' => 'd-flex flex-column justify-content-end flex-grow-1'
+                             ],
+                            'showAction' => true,
+                            'podcasts' => array_slice($podcasts, 0, 8)])
+                    </div>
+
+                @else
+
+                    <p class="page_body">Er zijn geen fragmenten beschikbaar.</p>
+
+                @endif
+            </div>
+
+            <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' => array_slice($podcasts, 8)])
+                            <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="align-right">
-      <a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon alles</a>
-      <a href="{{route('programma') . $program->url}}" title="{{$program->name}}" class="btn btn-info">Programmainfo</a>
-    </p>
-  @else
-    <p class="page_body">Hele uitzendingen kunt u binnen twee weken terugluisteren via <a href="{{route('gemist.programma')}}">programma gemist</a>.
-  @endif
-
-  @if($podcasts)
-
-  <div class="page_layout clearfix">
-  <div class="row grid" id="items">
-  @include('partial.podcastitems', ['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 class=\"page_body\">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 class="page_body">Er zijn geen fragmenten beschikbaar.</p>
-
-  @endif
 
 @endsection
-
-@push('styles')
-<style>
-#gemist_tabs li {
-  width: 50%;
-}
-</style>
-@endpush

resources/views/podcastseries.blade.php

@@ -1,13 +1,71 @@
-@extends('layouts/sidebar')
+@extends('layouts/full')
 
-@section('title') 
+@section('title')
   Fragment gemist
 @endsection
 
-@section('content')
-  @parent
 
-  @if(isset($program)) 
+@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>
+                @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
+            </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>
+
+  @if(isset($program))
     <h2>{{$program->name}}</h2>
     <p class="intro">
     {!! $program->description !!}
@@ -21,7 +79,7 @@
   @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%">
@@ -35,28 +93,28 @@
    /*
     var page = 1;
     var isLoading = 0;
-    var $items = $('#items');  
-    var $isLoading = $('#loading');  
+    var $items = $('#items');
+    var $isLoading = $('#loading');
     $(function() {
       $(window).scroll(function () {
-        var $this = $(this);       
+        var $this = $(this);
         var tweak = 10;
-        
+
         if(!isLoading && (page > 0) && ($this.scrollTop() >= $items.height() - $this.height() - tweak))
         {
-          isLoading = 1; 
+          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; 
+            .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); 
+              $newPage = $("<div />").append(data);
               $items.append($newPage);
-              $newPage.find("audio, video").mediaelementplayer({ stretching: 'responsive' }); 
+              $newPage.find("audio, video").mediaelementplayer({ stretching: 'responsive' });
             });
         }
       });
@@ -65,11 +123,11 @@
   </script>
   @endpush
   @else
-  
+
   <p>Er zijn geen fragmenten beschikbaar.</p>
- 
+
   @endif
- 
+
 @endsection
 
 @push('styles')

resources/views/programlist.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts/sidebar')
+@extends('layouts/full')
 
 @section('title')
   Programma gemist
@@ -8,75 +8,111 @@
 
 @section('breadcrumb')
     @if(isset($program))
-	<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>
+        <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="{{url('gemist.fragment')}}">Programma gemist</a></li>
+            <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
+            <li>{{$program->name}}</li>
+        </ul>
+    @else
+        <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>Programma gemist</li>
+        </ul>
     @endif
 @endsection
 
 @section('content')
-  @parent
+    <div class="">
+        <div class="row news_post post_container">
+            <div class="col-12 col-md content_container">
+                <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>
+                @if(isset($program))
+                    <h2>{{$program->name}}</h2>
+                    <p class="align-right">
+                        <a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon
+                            alles</a>
+                        <a href="{{route('programma') . $program->url}}" title="{{$program->name}}"
+                           class="btn btn-info">Programmainfo</a>
+                    </p>
+                @else
+                    <p class="page_body">U kunt programma's terugluisteren tot twee weken na uitzending. Items blijven onbeperkt beschikbaar via <a href="{{route('gemist.fragment')}}">fragment gemist</a>.<br /><br />
+                @endif
 
-  <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>
+                @if(isset($programs))
 
-  <p class="page_body">U kunt programma's terugluisteren tot twee weken na uitzending. Items blijven onbeperkt beschikbaar via <a href="{{route('gemist.fragment')}}">fragment gemist</a>.</p>
+                    <div class="clearfix podcast_items">
+                        @include('partial/programitems', [
+                            'li' => [
+                                'class' => 'col-12 col-md-6'
+                            ],
+                            'content' => [
+                                'class' => 'box full_width flex-column d-flex',
+                                'style' => 'height: 270px'
+                            ],
+                            'ul' => [
+                                'class' => 'row overview'
+                            ],
+                            'body' => [
+                                'show' => true,
+                                'class' => 'clipText clipText-5'
+                            ],
+                            'actionButton' => [
+                                'class' => 'd-flex flex-column justify-content-end flex-grow-1'
+                             ],
+                            'showAction' => true,
+                            'showTime' => true,
+                            'programs' => array_slice($programs, 0, 8)])
+                    </div>
 
-  <div class="page_layout clearfix">
-	<div class="row" id="items">
+                @else
 
-            @php($i = 0)
-            @foreach($programs as $program)
-            @if($i % 2 == 0)
-            @if($i > 0) </ul><!--/.row--> @endif
-            <ul class='blog'>
-            @endif
-            	<?php $url = route('programma') . $program->program->url; ?>
-		<?php $endStartDiff = $program->end->diff($program->start);
-                      $duration = 24 * $endStartDiff->d + $endStartDiff->h; ?>
-            	<li class="post">
-            		<div class="post_content">
-            			<h2><a href="{{$url}}" title="{{$program->program->name}}">{!!$program->program->name!!}</a></h2>
-				@if($program->current)
-				 <a href="{{route('luister.live')}}" class="onair action_button player"><span class="fa"></span> <span>Nu live!</span></a>
-				@else
-            			<ul class="post_details" style="margin-top: 0;">
-            				<li class="date">
-            					{{ Formatter::relativeDate($program->start) }}
-						van {{ $program->start->format('H:i') }} uur tot {{ $program->end->format('H:i') }} uur.
-            				</li>
-            			</ul>
-				 <a href="{{route('luister.programma') . '/' . $program->start->format('Y/m/d/H') . '/' . $duration}}"  class="action_button player"><span class="fa fa-play"></span> <span>Luister terug</span></a>
-				@endif
-				 <a href="{{route('programma') . $program->program->url}}"  class="action_button"><span class="fa fa-question"></span> <span>Meer informatie</span></a>
-            			<div class="clearfix"></div>
-            			<p>{!! Formatter::excerpt($program->program->description, 200) !!}</p>
-            		</div>
-            	</li>
+                    <p class="page_body">Er zijn geen fragmenten beschikbaar.</p>
 
-            @php($i++)
-            @endforeach
+                @endif
+            </div>
 
-            @if($i)
-            </ul><!--/.row-->
-            @endif
+            <div class="col-12 col-md-auto sidebar">
+                @if ((isset($programs)))
+                    <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/programitems', ['id' => 'items-programs', 'showTime' => true, 'programs' => array_slice($programs, 8)])
+                            <a class="btn auto_width" id="meer-nieuws-more-programs" href="#"
+                               data-loadmorenews='{"container":["#items-programs"]}'>
+                                <span class="fas fa-spinner fa-spin" id="loading"></span>
+                                Meer fragmenten
+                            </a>
+                        </div>
+                    </div>
+                @endif
 
-	</div><!--/.row-->
-  </div>
+                <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>
 
 @endsection
 
@@ -91,12 +127,3 @@ setInterval(function() {
 }, 1000);
 </script>
 @endpush
-
-@push('styles')
-<style>
-#gemist_tabs li {
-  width: 50%;
-}
-
-</style>
-@endpush

resources/views/radioprogram.blade.php

@@ -8,6 +8,8 @@
 
 @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="Radioprogrammering" href="{{route('radio.gids')}}">Radioprogrammering</a></li>
         <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
         <li>Programma-informatie</li>

resources/views/widgets/menu.blade.php

@@ -21,8 +21,8 @@
 //         "Vroeger of Later Luisterlijst (2 januari)" => "/vol-luisterlijst"),
 		"App" => "/app",
 		"Podcast" => array(
-				"" => "/podcast/1091/nh-gooi-spreekuur",
-				"Waterschapsverkiezing 2023" => "/gemist/fragment/1356528/podcast-waterschapsverkiezingen-2023.mp3",
+				"" => "/podcast/fragment/1356528/podcast-waterschapsverkiezingen-2023.mp3",
+				"Waterschapsverkiezing 2023" => "/podcast/fragment/1356528/podcast-waterschapsverkiezingen-2023.mp3",
 				"NH Gooi Spreekuur" => "/podcast/1091/nh-gooi-spreekuur",
 				"Duurzaam Gooi" => "/podcast/1076/podcast-duurzaam-gooi"
 		),