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

<?php 
	$pixelsPerHour = 60;
	$border = 1;
	$margin = 1;
?>

@extends('layouts/full')

@section('title') 
  Radioprogrammering
@endsection

@section('content')
  <nav>
    <ul class="pager">
      <li class="action_button previous-week"><a href="{{url('radio/gids/' . ($shift - 1))}}">&larr; Week eerder</a></li>
      <li class="action_button current-week"><a href="{{url('radio/gids')}}">Deze week</a></li>
      <li class="action_button next-week"><a href="{{url('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="{{url('radio/gids/' . ($shift - 1))}}">&larr; Week eerder</a></li>
      <li class="action_button current-week"><a href="{{url('radio/gids')}}">Deze week</a></li>
      <li class="action_button next-week"><a href="{{url('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;
		}
	}

	@media (min-width: 992px) { /* desktop */
		.schedule {
			display: flex;
		}

		.schedule .date-header {
			height: 3em;
			text-align: center;
			font-size: 120%;
			vertical-align: bottom;
		}
	}

	.schedule {
		color: black;
		width: 100%;
	}

	.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 .program-times {
			text-align: center;
			margin: 3px;
		}

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

		.schedule .program.non-stop {
			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: #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>
@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