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

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