From c572f8b7117f6f1fc26d9655dbd58e001210cd65 Mon Sep 17 00:00:00 2001
From: Mischa Spelt <mischa.spelt@nhgooi.nl>
Date: Sat, 22 Feb 2020 20:22:56 +0100
Subject: [PATCH] Layout fragmenten en programmagids, bug fix podcastitems
 partial

---
 .../app/Http/Controllers/RadioController.php  |  2 +-
 website/public/css/nhgooi.css                 | 14 ++++++
 .../views/partial/podcastitems.blade.php      |  4 +-
 .../views/partial/radioscheduleweek.blade.php |  8 ++--
 .../resources/views/radioschedule.blade.php   | 46 +++++++++++++------
 5 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/website/app/Http/Controllers/RadioController.php b/website/app/Http/Controllers/RadioController.php
index 52a2b13f..4db7295e 100644
--- a/website/app/Http/Controllers/RadioController.php
+++ b/website/app/Http/Controllers/RadioController.php
@@ -101,7 +101,7 @@ class RadioController extends Controller
             $podcasts[] = new \Model\Podcast($podcast);
         }
 
-        return view($request->ajax() ? 'podcastitems' : 'podcastlist', array_merge($viewData, ['podcasts' => $podcasts, 'searchURL' => 'gemist/zoeken']));
+        return view($request->ajax() ? 'partial.podcastitems' : 'podcastlist', array_merge($viewData, ['podcasts' => $podcasts, 'searchURL' => 'gemist/zoeken']));
     }
 
 }
diff --git a/website/public/css/nhgooi.css b/website/public/css/nhgooi.css
index 53f68cd1..5fa13dc5 100644
--- a/website/public/css/nhgooi.css
+++ b/website/public/css/nhgooi.css
@@ -351,6 +351,20 @@ button[disabled]:hover
 	width: 100%;
 }
 
+a.fixed-height {
+	display: block;
+	position: relative;
+	height: 300px;
+	overflow: hidden;
+}
+
+a.fixed-height img {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
 .action_button
 {
 	position: relative;
diff --git a/website/resources/views/partial/podcastitems.blade.php b/website/resources/views/partial/podcastitems.blade.php
index 7507dcf1..102be2a5 100644
--- a/website/resources/views/partial/podcastitems.blade.php
+++ b/website/resources/views/partial/podcastitems.blade.php
@@ -20,11 +20,9 @@
 			</ul>
 			<div class="clearfix"></div>
 			@if($podcast->image)
-			<p>
-			<a href="{{$url}}" title="{{$podcast->title}}">
+			<a href="{{$url}}" title="{{$podcast->title}}" class="fixed-height">
 				<img src='{{$imgBase . $podcast->image->url}}' alt='{{$podcast->image->title}}'>
 			</a>
-			</p>
 			@endif
 			<p>{!! Formatter::excerpt($podcast->content, 200) !!}</p>
 			<a class="read_more" href="{{route('gemist.fragment') . $podcast->url}}" title="Luister fragment"><span class="arrow"></span><span>Luister fragment</span></a>
diff --git a/website/resources/views/partial/radioscheduleweek.blade.php b/website/resources/views/partial/radioscheduleweek.blade.php
index d8e0678d..25487a54 100644
--- a/website/resources/views/partial/radioscheduleweek.blade.php
+++ b/website/resources/views/partial/radioscheduleweek.blade.php
@@ -3,7 +3,7 @@
 <div class="schedule">
 	<div class="timeslots">
 		<div class="date-header"></div>
-		@for($h = 0; $h < 24; $h += 0.5)
+		@for($h = 0; $h < 24; $h += 1.0)
 			<div class="time-header">{{$time = gmdate("H:i", $h * 3600)}} uur</div>
 		@endfor
 	</div>
@@ -34,8 +34,10 @@
 				@php($durationToday = ($hour + $duration <= 24) ? $duration : (24 - $hour))
 
 				<a href="{{route('programma') . $item['program']->url}}" class="program{{$class}}" style="height: {{$durationToday * $pixelsPerHour - 2 * $border - $margin}}px;" title="{{$item['program']->name . ($item['program']->tagline ? "\n" . $item['program']->tagline : "")}}">
-					<div class="program-title">{{$item['program']->name}}</div>
-					@if($isCurrent) <div class="current-marker"><span>Nu op NH Gooi</span></div> @endif
+					<div class="program-title">
+					@if($isCurrent) <div class="current-marker"><span>On air</span></div> @endif
+					{{$item['program']->name}}
+					</div>
 					<div class="program-content">
 						<div class="program-times"><span class="fa fa-clock"></span> {{$item['starttime']->format('H:i')}} &ndash; {{$item['endtime']->format('H:i')}}</div>
 						@if($item['program']->tagline)
diff --git a/website/resources/views/radioschedule.blade.php b/website/resources/views/radioschedule.blade.php
index 59ded856..335afba1 100644
--- a/website/resources/views/radioschedule.blade.php
+++ b/website/resources/views/radioschedule.blade.php
@@ -1,7 +1,7 @@
 <?php 
-	$pixelsPerHour = 60;
+	$pixelsPerHour = 30;
 	$border = 1;
-	$margin = 1;
+	$margin = 2;
 ?>
 
 @extends('layouts/full')
@@ -85,6 +85,14 @@
 			margin-left: 15px !important;
 			margin-bottom: 3px !important;
 		}
+
+		.schedule .program .program-content {
+			font-size: 90%;
+		}
+
+			.schedule .program.non-stop .program-title {
+				background-color: #8F9BA6;
+			}
 	}
 
 	@media (min-width: 992px) { /* desktop */
@@ -98,6 +106,20 @@
 			font-size: 120%;
 			vertical-align: bottom;
 		}
+
+		.schedule .program .program-content {
+			display: none;
+		}
+
+		.schedule .program .program-title {
+			display: block;
+			height: 100%;
+		}
+
+			.schedule .program.non-stop .program-title {
+				background-color: transparent;
+				color: #8F9BA6;
+			}
 	}
 
 	.schedule {
@@ -106,7 +128,7 @@
 	}
 
 	.schedule .time-header {
-		height: {{$pixelsPerHour / 2}}px;
+		height: {{$pixelsPerHour}}px;
 	}
 
 	.schedule .timeslots {
@@ -133,24 +155,24 @@
 			background-color: #71c1de;
 		}
 
+		.schedule .program.current {
+			border-color: #BD0013;
+		}
+
 		.schedule .program .program-times {
 			text-align: center;
 			margin: 3px;
 		}
 
-		.schedule .program.current {
+		.schedule .program.current .program-title {
 			background-color: #71c1de;
 			color: white;
 		}
 
 		.schedule .program.non-stop {
 			border-color: #6C757D;
-			color: #6C757D;
 		}
 	
-			.schedule .program.non-stop .program-title {
-				background-color: #8F9BA6;
-			}
 
 		.schedule .program.special {
 			color: #03A6E0;
@@ -165,7 +187,7 @@
 				padding: 3px;
 				color: white;	
 				text-align: center;
-				background-color: #03A6E0;
+				background-color: #BD0013;
 				border-radius: 3px;
 			}
 
@@ -177,14 +199,10 @@
 		}
 
 		.schedule .program .program-content {
-			margin: 3px;	
+			margin: 3px;
 			text-align: center;
 		}
 		
-		.schedule .program .tagline {
-			font-size: 90%;
-		}
-	
 		.schedule .program hr {
 			margin: 3px;
 			border: none;