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

@@ -17,12 +17,12 @@
@elseif($block->type == "quote")
<blockquote>
{!!$block->text!!}
<div class="author">{{$block->name}}</div>
<div class="author">{{$block->name}}</div>
</blockquote>
@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();
@@ -28,15 +157,15 @@
?>
<table class="tt_timetable">
<thead>
<tr class="row_gray" style="background-color: #F0F0F0 !important;">
<th></th>
@for($d = 0; $d < 7; ++$d)
<thead>
<tr class="row_gray" style="background-color: #F0F0F0 !important;">
<th></th>
@for($d = 0; $d < 7; ++$d)
<th>{{$dates[$d]}}</th>
@endfor
</tr>
</thead>
<tbody>
</tr>
</thead>
<tbody>
@for($h = 0; $h < 24; $h += 0.5)
<tr class="{{$h == (int)$h ? "" : "row_gray"}}">
<td class="tt_hours_column">
@@ -55,48 +184,48 @@
<td class="event" rowspan="{{$slots}}">
<div class="event_container tt_tooltip" style="height: {{$slots * 20}}px;">
<a class="event_header" href="#" title="{{$item['program']->name}}">{{$item['program']->name}}</a>
<div>{!!Formatter::excerpt($item['program']->description, 200)!!}</div>
<!-- <div class="tt_tooltip_text" style="width: 400px; height: 300px; top: -116px; left: 0px;">
<div class="tt_tooltip_content">
<div>{!!Formatter::excerpt($item['program']->description, 200)!!}</div>
<!-- <div class="tt_tooltip_text" style="width: 400px; height: 300px; top: -116px; left: 0px;">
<div class="tt_tooltip_content">
<b>{{$item['program']->name}}</b> <br/>
{!!Formatter::excerpt($item['program']->description, 200)!!}
</div>
<div class="tt_tooltip_arrow"></div>
</div> -->
</div>
<div class="tt_tooltip_arrow"></div>
</div> -->
</div>
</td>
@endif
@endfor
</tr>
@endfor
</tbody>
</tbody>
</table>
<div class="responsive">
@php($date = null)
@foreach($schedule as $item)
@if(($formattedDate = Formatter::fullDate($item['starttime'], 'W d m')) != $date)
@php($date = $formattedDate)
@if($date != null) </ul> @endif
<h5>{{$formattedDate}}</h2>
<ul class="tt_items_list thin page_margin_top timetable_clearfix">
@php($date = $formattedDate)
@if($date != null) </ul> @endif
<h5>{{$formattedDate}}</h2>
<ul class="tt_items_list thin page_margin_top timetable_clearfix">
@endif
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
@php($class =( $item['program']->priority < 2 ? 'bg-primary'
:( $item['program']->nonstop || $item['program']->rerun ? 'text-muted'
:( $isCurrent ? 'bg-info active text-primary'
:( ''
)))))
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
@php($class =( $item['program']->priority < 2 ? 'bg-primary'
:( $item['program']->nonstop || $item['program']->rerun ? 'text-muted'
:( $isCurrent ? 'bg-info active text-primary'
:( ''
)))))
<li class="timetable_clearfix">
<li class="timetable_clearfix">
<div class="event_container">
<a href="#" title="{{$item['program']->name}}" class="event_header">{{$item['program']->name}} </a>
@if($isCurrent) <span class="bg-primary current-marker">Nu op NH Gooi</span> @endif
<p>
<p>{{Formatter::excerpt(strip_tags($item['program']->description), 200)}}</p>
</td>
</tr>
@if($isCurrent) <span class="bg-primary current-marker">Nu op NH Gooi</span> @endif
<p>
<p>{{Formatter::excerpt(strip_tags($item['program']->description), 200)}}</p>
</td>
</tr>
@endforeach
</ul>
</ul>

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