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; color: #1F3977;
} }
.post_details.simple li.category a.over_image {
color: white;
}
.post_details date.edited { .post_details date.edited {
font-weight: bold; font-weight: bold;
} }
@@ -187,3 +191,41 @@ button[disabled]:hover
background-color: transparent; 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"> <div class="slider_content_box">
<ul class="post_details simple"> <ul class="post_details simple">
<li class="category"> <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> </li>
</ul> </ul>
<h2><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h2> <h2><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h2>
@@ -53,7 +53,7 @@
<div class="slider_content_box"> <div class="slider_content_box">
<ul class="post_details simple"> <ul class="post_details simple">
<li class="category"> <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> </li>
</ul> </ul>
<h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h5> <h5><a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a></h5>

View File

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