nhgooi.nl/resources/views/radioschedule.blade.php

<?php 
	$pixelsPerHour = 30;
	$border = 1;
	$margin = 2;
?>

@extends('layouts/full')

@section('title') 
  Radioprogrammering
@endsection

@section('content')
  <p style="border: red 1px dotted; padding: 1px; color: red;">
    Hieronder vindt u onze reguliere radioprogrammering. <br/>
    Ook bij NH Gooi is de hoogste prioriteit momenteel de gezondheid van onze medewerkers en gasten. <br/>
    In overleg met de programmamakers worden sommige muziekprogramma's vervangen door herhalingen of komen deze te vervallen. Onze nieuwsuitzendingen zoals het regionieuws op het halve uur en de NH Gooi Zaterdag vinden zoveel mogelijk doorgang, waar nodig in aangepaste vorm. <br/>
  </p>

  <nav>
    <ul class="pager">
      <li class="action_button previous-week"><a href="{{route('radio.gids', ($shift - 1))}}">&larr; Week eerder</a></li>
      <li class="action_button current-week"><a href="{{route('radio.gids')}}">Deze week</a></li>
      <li class="action_button next-week"><a href="{{route('radio.gids', ($shift + 1))}}">Week later &rarr;</a></li>
    </ul>
  </nav>
  
  <div id="loading" style="display: none; height: 300px;">
    <div class="progress progress-striped active">
      <div class="progress-bar"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        <b>Programmaschema ophalen...</b>
      </div>
    </div>
  </div>

  <div id='schedule'>
    @include('partial/radioscheduleweek', ['schedule' => $schedule])
  </div>

  <nav>
    <ul class="pager">
      <li class="action_button previous-week"><a href="{{route('radio.gids', ($shift - 1))}}">&larr; Week eerder</a></li>
      <li class="action_button current-week"><a href="{{route('radio.gids')}}">Deze week</a></li>
      <li class="action_button next-week"><a href="{{route('radio.gids', ($shift + 1))}}">Week later &rarr;</a></li>
    </ul>
  </nav>
@endsection

@push('styles')
<style>
	.pager {
		display: flex;
		width: 100%;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.pager .previous-week,
    .pager .current-week,
    .pager .next-week {
		flex: 1;
	}

	.pager .current-week {
		text-align: center;
	}
    
	.pager .next-week {
		text-align: right;
	}
	
	@media (max-width: 992px) { /* smaller than desktop */
		.schedule {
			display: block;
		}

		.schedule .time-header {
			display: none;
		}

		.schedule .date-header {
			font-size: 150%;
			font-weight: bold;
			height: auto;
			margin-top: 15px;
		}

		.schedule a.program {
			/* override the style="height.." */
			height: auto !important;
			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 */
		.schedule {
			display: flex;
		}

		.schedule .date-header {
			height: 3em;
			text-align: center;
			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 {
		color: black;
		width: 100%;
	}

	.schedule .time-header {
		height: {{$pixelsPerHour}}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 {
			border-color: #BD0013;
		}

		.schedule .program .program-times {
			text-align: center;
			margin: 3px;
		}

		.schedule .program.current .program-title {
			background-color: #71c1de;
			color: white;
		}

		.schedule .program.non-stop {
			border-color: #6C757D;
		}
	

		.schedule .program.special {
			color: #03A6E0;
		}

		.schedule .program .current-marker {
			margin: 5px;
			text-align: center;
		}

			.schedule .program .current-marker span {
				padding: 3px;
				color: white;	
				text-align: center;
				background-color: #BD0013;
				border-radius: 3px;
			}

		.schedule .program .program-title {
			padding: 5px;
			color: white;
			font-weight: bold;
			background-color: #03A6E0;
		}

		.schedule .program .program-content {
			margin: 3px;
			text-align: center;
		}
		
		.schedule .program hr {
			margin: 3px;
			border: none;
	 		border-top: 1px solid #03A6E0;  
			border-radius: 5px;
		}
</style>
@endpush

@push('scripts')
  <script type="text/javascript">
    function scrollToMiddle($elt) {
      if($elt.length == 0) { return; }
      var elem_position = $elt.offset().top;
      var window_height = $(window).height();
      var y = elem_position - window_height / 2;
      window.scrollTo(0,y);
    }

    $(function() { scrollToMiddle($(".current-marker")); });
  </script>
@endpush