Menu responsiveness and layout

This commit is contained in:
2020-02-01 00:40:25 +01:00
parent 433c9e7a77
commit 27dbd9bb0c
13 changed files with 105 additions and 29 deletions

View File

@@ -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')