Layout fragmenten en programmagids, bug fix podcastitems partial

This commit is contained in:
2020-02-22 20:22:56 +01:00
parent 0582de5bb0
commit c572f8b711
5 changed files with 53 additions and 21 deletions

View File

@@ -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']));
}
}

View File

@@ -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;

View File

@@ -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>

View File

@@ -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)

View File

@@ -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;