Programmaschema met flexbox

This commit is contained in:
2020-01-18 00:45:07 +01:00
parent bf5f1cd9b5
commit a93addfb6d
5 changed files with 208 additions and 37 deletions

View File

@@ -71,6 +71,10 @@ button[disabled]:hover
color: #1F3977;
}
.post_details.simple li.category a.over_image {
color: white;
}
.post_details date.edited {
font-weight: bold;
}
@@ -187,3 +191,41 @@ button[disabled]:hover
background-color: transparent;
}
*/
/* Responsiveness */
@media (min-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-md-only, .d-lg-only, .d-xl-only {
display: none !important;
}
}
@media (min-width: 768px) {
.d-md-none {
display: none !important;
}
.d-sm-only, .d-lg-only, .d-xl-only {
display: none !important;
}
}
@media (min-width: 992px) {
.d-lg-none {
display: none !important;
}
.d-sm-only, .d-md-only, .d-xl-only {
display: none !important;
}
}
@media (min-width: 1200px) {
.d-xl-none {
display: none !important;
}
.d-sm-only, .d-md-only, .d-lg-only {
display: none !important;
}
}

View File

@@ -30,7 +30,7 @@
<div class="slider_content_box">
<ul class="post_details simple">
<li class="category">
<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}" class="over_image">{{$item->region->title}}</a>
</li>
</ul>
<h2><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h2>
@@ -53,7 +53,7 @@
<div class="slider_content_box">
<ul class="post_details simple">
<li class="category">
<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}">{{$item->region->title}}</a>
<a title="Regio: {{$item->region->title}}" href="{{url('nieuws/regio/' . $item->region->slug)}}" class="over_image">{{$item->region->title}}</a>
</li>
</ul>
<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h5>

View File

@@ -22,7 +22,7 @@
@elseif($block->type == "image")
<div class="mediabox-image">
<img src="{{$block->image->imageWide}}" alt="{{$block->image->title}}" title="{{$block->image->title}} &copy;{{$block->image->author}}"/>
<span class="mediabox-image-title">{{$block->image->imageWide}}</span>
<span class="mediabox-image-title">{{$block->image->title}} &copy; {{$block->image->author}}</span>
</div>
@elseif($block->type == "video")
@include('widgets/mediaplayer')

View File

@@ -1,3 +1,132 @@
<?php
$pixelsPerHour = 60;
$border = 1;
$margin = 1;
?>
<style>
.schedule {
color: black;
width: 100%;
display: flex;
}
.schedule .date-header {
height: 3em;
text-align: center;
font-size: 120%;
vertical-align: bottom;
}
.schedule .time-header {
height: {{$pixelsPerHour / 2}}px;
}
.schedule .timeslots {
width: 80px;
min-width: 80px;
}
.schedule .date-column {
flex: 1;
}
.schedule a.program {
display: block;
color: black;
text-decoration: none;
margin: {{$margin}}px;
border: solid {{$border}}px #03A6E0;
border-radius: 2px;
overflow: hidden;
}
.schedule a.program:hover {
color: white;
background-color: #71c1de;
}
.schedule .program.current {
background-color: #71c1de;
color: white;
}
.schedule .program.non-stop {
color: #6c757d;
}
.schedule .program.special {
color: #03A6E0;
}
.schedule .program .current-marker {
margin-top: 5px;
text-align: center;
}
.schedule .program .current-marker span {
padding: 3px;
color: white;
text-align: center;
background-color: #03A6E0;
border-radius: 3px;
}
.schedule .program .program-title {
padding: 5px;
color: white;
font-weight: bold;
background-color: #03A6E0;
}
.schedule .program .program-content {
margin: 3px;
}
</style>
<div class="schedule">
<div class="timeslots">
<div class="date-header"></div>
@for($h = 0; $h < 24; $h += 0.5)
<div class="time-header">{{$time = gmdate("H:i", $h * 3600)}} uur</div>
@endfor
</div>
@php($date = null)
@php($now = new \DateTime("now"))
@foreach($schedule as $item)
@if(($formattedDate = Formatter::fullDate($item['starttime'], 'W d m')) != $date)
@if($date != null)
</div>
@endif
<div class="date-column">
<div class="date-header">{{$formattedDate}}</div>
@php($date = $formattedDate)
@endif
@php($diff = $item['endtime']->diff($item['starttime']))
@php($duration = $diff->d * 24 + $diff->h + $diff->m / 60)
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
@php($class = ($item['program']->priority < 2 ? ' special' : '')
. ($item['program']->nonstop || $item['program']->rerun ? ' non-stop' : '')
. ($isCurrent ? ' current' : ''))
<a href="{{url('/radio/programma' . $item['program']->url)}}" class="program{{$class}}" style="height: {{$duration * $pixelsPerHour - 2 * $border - $margin}}px;">
<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-content">
{{Formatter::excerpt(strip_tags($item['program']->description), 150)}}
</div>
</a>
@endforeach
</div>
</div>
<hr />
<?php
$dates = array();
$byStartTime = array();

View File

@@ -11,9 +11,9 @@
|
*/
Route::get('/', function() { return redirect()->route('gemist'); });
Route::get('/', function() { return redirect()->route('nieuws'); });
Route::get('/nieuws', 'NewsController@overview');
Route::get('/nieuws', ['as' => 'nieuws', 'uses' => 'NewsController@overview']);
Route::get('/nieuws/regio/{region}', 'NewsController@regionlist' )->where(['region' => '[a-z0-9]+']);
Route::get('/nieuws/thema/{theme}', 'NewsController@themelist' )->where(['themelist' => '[a-z0-9]+']);
Route::get('/nieuws/{id}/{title}', 'NewsController@show')->where(['id' => '\d+']);