Menu responsiveness and layout

website/.env

@@ -1,7 +1,7 @@
 APP_NAME="NH Gooi"
-APP_ENV=development
+APP_ENV=local
 APP_KEY=I@#323ddu3dN(@#d(NU@#U2ij2dd4RJE
-APP_DEBUG=false
+APP_DEBUG=true
 APP_LOG_LEVEL=error
 APP_URL=http://localhost
 IMAGE_BASE_URL=https://nhgooi.nl/

website/app/Http/Controllers/Controller.php

@@ -67,7 +67,7 @@ class Controller extends BaseController
  
     protected function registerView(Request $request, $type, $id)
     {
-	if(config('app.debug')) {	
+	if(config('app.env') == 'local') {	
         	return;
 	}
 

website/app/Http/Controllers/RadioController.php

@@ -29,7 +29,8 @@ class RadioController extends Controller
  
     public function onair()
     {
-        return response()->json($this->API('programma/schema/onair?nonstop=1'));
+		$data = $this->API('programma/schema/onair');
+		return response()->json($data);
     }
 
     public function program($id) 

website/public/css/nhgooi.css

@@ -8,53 +8,87 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
 	color: #1F3977;
 }
 
-
 @media screen and (max-width:767px) {
+/*
+	.menu_container.sticky.move,
+	.boxed .menu_container.sticky.move
+	{
+		position: fixed;
+		top: 0pt;
+		left: 0px;
+		box-shadow: none;
+		-moz-box-shadow: none;
+		-webkit-box-shadow: none;
+	}
+
+	.sticky.move .mobile-menu-switch {
+		margin-left: 0px;
+	}
+
+	.sticky.move .mobile-menu {
+		background-color: #F0F0F0;
+	}
+*/
+
 	.row .column {
 		width: 100%;
 	}
 
-	.header .placeholder .controls li a {
+	.header .now-playing-header {
+		width: 100% !important;
+		margin-top: 30px !important;
+	}
+
+	.header .now-playing-header .controls li a {
 		width: 30px;
 	}
 
-		.header .placeholder .controls li a label {
+		.header .now-playing-header .controls li a label {
 			display: none;
 		}
 }
 
-.header .placeholder {
+.header .now-playing-header {
+	float: right;
+	font-size: 16pt;
+	font-family: 'Roboto Condensed';
+	font-weight: 300;
+	background: #F6F6F6;
+	width: 728px;
+	color: #787878;
+	text-align: center;
+
 	display: block;
 	position: relative;
 	margin: 0;
 	padding-top: 10px;
-	padding-bottom: 10px;
-	height: 90px;
+	padding-bottom: 30px;
 }
 
-	.header .placeholder .title,
-	.header .placeholder .artist {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+	.header .now-playing-header .title,
+	.header .now-playing-header .artist {
+	
+		padding: 3px;
 	}
 
-	.header .placeholder .title {
+	.header .now-playing-header .title {
 		font-weight: bold;
+		font-size: 120%;
 	}
 
-	.header .placeholder .controls {
+	.header .now-playing-header .controls {
 		font-size: 75%;
 		bottom: 0;
 		position: absolute;
+		padding: 3px;
 		width: 100%;
 	}
 
-	.header .placeholder .controls li {
+	.header .now-playing-header .controls li {
 		display: inline-block;
 	}
 
-		.header .placeholder .controls li a {
+		.header .now-playing-header .controls li a {
 			line-height: 120%;
 			font-size: 80%;
 			color: #ABABAB;
@@ -64,7 +98,7 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
 			margin-right: 5px;
 		}
 
-			.header .placeholder .controls li a:hover {
+			.header .now-playing-header .controls li a:hover {
 				background-color: #E0E0E0;
 				transition: 500ms;
 			}
@@ -81,6 +115,21 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
 	margin-top: -2em;
 }
 
+.scroll_top_floater {
+	position: fixed;
+	right: 5px;
+	bottom: 30px;
+	display: block;
+	height: 30px;
+	width: 30px;
+	background: url("/images/icons/navigation/go_top_arrow.png") no-repeat 50% 50%;
+    background-color: #ABABAB;
+}
+
+.scroll_top_floater:hover {
+	background-color: #898989;
+}
+
 .tabs_navigation li a:hover,
 .tabs_navigation li a.selected,
 .tabs_navigation li.ui-tabs-active a {

website/public/js/main.js

@@ -1327,6 +1327,7 @@ jQuery(document).ready(function($){
 	$(".post.single.small_image .author_box").css({"position": "absolute", "top": ($(".post.single .post_image_box").outerHeight()+30) + "px", "bottom": "auto"});
 	if($(".menu_container").hasClass("sticky"))
 		menu_position = $(".menu_container").offset().top;
+
 	function animateElements()
 	{
 		$('.animated_element, .tens, .sticky').each(function(){

website/resources/views/layouts/master.blade.php

@@ -271,9 +271,10 @@
 						-->
 						<a href="{{url('/')}}"><img src="/images/logo.png" class="ri" /></a>
 					</div>
-					<div class="placeholder">
-						<div class="title">{{Formatter::fullDate(new \DateTimeImmutable(), 'd m y')}}</div>
-						<div class="sub artist"></div>
+
+					<div class="now-playing-header">
+						<div class="title"></div>
+						<div class="artist"></div>
 						<div class="controls">
 							<ul>
 								<li class="program-link">
@@ -309,6 +310,8 @@
 	@yield('page')
 </div><!--/.page-->
 
+<a class="scroll_top_floater" href="#top" title="Scroll naar boven"></a>
+
 <!-- Footer -->
 			<div class="footer_container">
 				<div class="footer clearfix>
@@ -565,6 +568,18 @@
 		<script type="text/javascript" src="/js/main.js"></script>
 		<script type="text/javascript" src="/js/odometer.min.js"></script>
 		<script type="text/javascript">
+			$(window).resize(function() {
+				// Fix sticky for mobile menu indicator
+				menu_position = $(".menu_container").offset().top;
+			});
+
+			$(window).scroll(function() {
+				var topOfWindow = $(window).scrollTop();
+				if(topOfWindow > menu_position) $(".scroll_top_floater").fadeIn();
+					else $(".scroll_top_floater").fadeOut();
+			});
+			$(".scroll_top_floater").hide();
+
 			function updateOnAir() {
 				$.ajax({
 					url: '{{url('onair')}}', 
@@ -577,21 +592,26 @@
 			$(updateOnAir);
 			var onAirUpdater = setInterval(updateOnAir, 5000);
 			var $nowPlaying = { 
-				title: $(".placeholder .title"),
-				artist: $(".placeholder .artist"),
-				programLink: $(".placeholder .program-link a"),
-				programLabel: $(".placeholder .program-link a > label")
+				container: $(".now-playing-header").hide(),
+				title: $(".now-playing-header .title"),
+				artist: $(".now-playing-header .artist"),
+				programLink: $(".now-playing-header .program-link a"),
+				programLabel: $(".now-playing-header .program-link a > label")
 			};
 			$(document).on('onAirUpdated', function(evt, data) {
 				if(data.inProgram) {
 					$nowPlaying.title.text(data.program.name).attr('title', data.program.name);
-					$nowPlaying.artist.text("");
+					$nowPlaying.artist.text(data.program.tagline);
 				} else {
 					$nowPlaying.programLabel.text(data.program.name).attr('title', data.program.name + "\n" + data.program.tagline);
 					$nowPlaying.title.text(data.current.title).attr('title', data.current.title);
 					$nowPlaying.artist.text(data.current.artist).attr('title', data.current.artist);
 				}
 				$nowPlaying.programLink.attr('href', '{{url("radio/programma")}}' + data.program.url);
+				$nowPlaying.container.slideDown();
+
+				// Now playing may have moved the menu
+				menu_position = $(".menu_container").offset().top;
 			});
 		</script>
 		@stack('scripts')

website/resources/views/widgets/menu.blade.php

@@ -142,7 +142,7 @@ function buildMenu($menu, $ismobile) {
 {!! buildMenu($menu, false) !!}
 </ul>
 </nav>
-<div class="mobile_menu_container">
+<div class="mobile_menu_container" >
 	<a href="#" class="mobile-menu-switch">
 		<span class="line"></span>
 		<span class="line"></span>
@@ -151,6 +151,11 @@ function buildMenu($menu, $ismobile) {
 	<div class="mobile-menu-divider"></div>
 	<nav>
 	<ul class="mobile-menu">
+		<li class="submenu {{isActive($newsUrl, false) ? "selected" : ""}}">
+			<a href="{{$newsUrl}}" title="Nieuws">
+				Nieuws
+			</a>
+		</li>
 	{!! buildMenu($menu, true) !!}
 	</ul>
 	</nav>