Programmaschema met flexbox
This commit is contained in:
42
website/public/css/nhgooi.css
vendored
42
website/public/css/nhgooi.css
vendored
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}} ©{{$block->image->author}}"/>
|
||||
<span class="mediabox-image-title">{{$block->image->imageWide}}</span>
|
||||
<span class="mediabox-image-title">{{$block->image->title}} © {{$block->image->author}}</span>
|
||||
</div>
|
||||
@elseif($block->type == "video")
|
||||
@include('widgets/mediaplayer')
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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+']);
|
||||
|
||||
Reference in New Issue
Block a user