Most pages are now styled.
Small changes to existing pages. Changes to base layout style.
This commit is contained in:
Jorit Tijsen
@@ -19,55 +19,24 @@
|
||||
<div class="header_container small">
|
||||
<div class="header clearfix">
|
||||
<div class="logo">
|
||||
<a href="{{url('/')}}"><img src="/images/logo.png" class="ri"/></a>
|
||||
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg" class="ri"/></a>
|
||||
</div>
|
||||
|
||||
<div class="now-playing-header">
|
||||
<div class="title"></div>
|
||||
<div class="artist"></div>
|
||||
<div class="controls">
|
||||
<ul>
|
||||
<li class="program-link">
|
||||
<a href='{{route('radio.gids')}}' title="Bekijk het huidige programma in de programmagids">
|
||||
<i class="fa-solid fa-info"></i>
|
||||
<label>Programmagids</label>
|
||||
</a>
|
||||
</li>
|
||||
<li class="listen-live">
|
||||
<a href='{{route('luister.live')}}' title="Luister live naar NH Gooi Radio" class="player">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
<label>Luister NH Gooi Radio</label>
|
||||
</a>
|
||||
</li>
|
||||
<li class="watch-live">
|
||||
<a href='{{route('kijk.live')}}' title="Kijk live naar NH Gooi TV">
|
||||
<i class="fa-solid fa-tv"></i>
|
||||
<label>Kijk NH Gooi TV</label>
|
||||
</a>
|
||||
</li>
|
||||
<li class="watch-studio">
|
||||
<a href='{{route('kijk.studio')}}' title="Kijk live mee in de radiostudio van NH Gooi">
|
||||
<i class="fa-solid fa-video"></i>
|
||||
<label>Studiocam</label>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: right;width: 728px;height: 90px;margin: 11px auto 0px auto;background-color: #efefef;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu_container sticky clearfix">
|
||||
<div class="top_menu_container">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Tip de redactie <i class="fa-solid fa-circle-plus"></i></a>
|
||||
<a href="/contact">Tip de redactie <i class="fa-solid fa-circle-plus"></i></a>
|
||||
</li>
|
||||
@if(isset($searchURL))
|
||||
<li>
|
||||
<form class="search_form" action="{{url($searchURL)}}">
|
||||
<input type="text" name="query" placeholder="Zoeken..."
|
||||
value="{{isset($query) ? $query : null}}" class="search_input hint">
|
||||
<input type="submit" class="search_submit" value="Zoeken">
|
||||
value="{{isset($query) ? $query : null}}" class="search_input">
|
||||
<a href="javascript:void(0)" onclick="this.form.submit()" class="search_submit"><i class="fa-solid fa-magnifying-glass"></i></a>
|
||||
</form>
|
||||
<a href="#" class="search_button"><i class="fa-solid fa-magnifying-glass"></i><i
|
||||
style="display: none" class="fa-solid fa-xmark"></i></a>
|
||||
@@ -193,60 +162,10 @@
|
||||
});
|
||||
$(".scroll_top_floater").hide();
|
||||
|
||||
function updateOnAir() {
|
||||
$.ajax({
|
||||
url: '{{route('onair')}}',
|
||||
success: function (data) {
|
||||
$(document).trigger('onAirUpdated', data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(updateOnAir);
|
||||
var onAirUpdater = setInterval(updateOnAir, 5000);
|
||||
var $nowPlaying = {
|
||||
container: $(".now-playing-header").hide(),
|
||||
title: $(".now-playing-header .title"),
|
||||
artist: $(".now-playing-header .artist"),
|
||||
controls: $(".now-playing-header .controls"),
|
||||
studiocam: $(".now-playing-header .watch-studio, li.watch-studio"),
|
||||
programLink: $(".now-playing-header .program-link a"),
|
||||
programLabel: $(".now-playing-header .program-link a > label"),
|
||||
first: true
|
||||
};
|
||||
$(document).on('onAirUpdated', function (evt, data) {
|
||||
if (data.inProgram) {
|
||||
$nowPlaying.title.text(data.program.name).attr('title', data.program.name);
|
||||
if (data.current && data.current.title) {
|
||||
$nowPlaying.artist.text((data.current.artist ? data.current.artist + ' - ' : '') + data.current.title);
|
||||
} else {
|
||||
$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.studiocam.toggle(data.stream != false);
|
||||
$nowPlaying.programLink.attr('href', '{{route("programma")}}' + data.program.url);
|
||||
if ($nowPlaying.first) {
|
||||
$nowPlaying.controls.hide();
|
||||
}
|
||||
$nowPlaying.container.slideDown(function () {
|
||||
if ($nowPlaying.first) {
|
||||
$nowPlaying.controls.fadeIn('slow');
|
||||
$nowPlaying.first = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Now playing may have moved the menu
|
||||
menu_position = $(".menu_container").offset().top;
|
||||
});
|
||||
|
||||
function openPlayerInNewScreen() {
|
||||
$(".player").click(function (e) {
|
||||
e.preventDefault();
|
||||
window.open($(this).attr('href'), '_player', 'width=500,height=500,titlebar,close');
|
||||
window.open($(this).attr('href'), '_player', 'width=550,height=500,titlebar,close');
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,58 +1,66 @@
|
||||
@extends('layouts/master')
|
||||
|
||||
@section('page')
|
||||
<div class="row @yield('page_class')">
|
||||
<div class="col-8">
|
||||
<div class="box full-width">
|
||||
@yield('breadcrumb')
|
||||
@yield('tags')
|
||||
<h1 class="page_title">@yield('title')</h1>
|
||||
@yield('content')
|
||||
<div class="@yield('container_class')">
|
||||
<div class="row @yield('page_class')">
|
||||
<div class="col-12 col-md content_container">
|
||||
<div class="box full-width">
|
||||
@yield('breadcrumb')
|
||||
@yield('tags')
|
||||
<h1 class="page_title">@yield('title')</h1>
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
@section('sidebar')
|
||||
@if ((isset($populair) && $populair) || isset($newsItems) && $newsItems)
|
||||
<div data-tabs>
|
||||
<div class="tabs">
|
||||
@if (isset($populair) && $populair)
|
||||
<h4 data-tab-content-id="tab_most_read" class="box_header active"><span>Meest gelezen</span></h4>
|
||||
@endif
|
||||
@if (isset($newsItems) && $newsItems)
|
||||
<h4 data-tab-content-id="tab_more_news" class="box_header"><span>Meer nieuws</span></h4>
|
||||
@endif
|
||||
</div>
|
||||
@if (isset($populair) && $populair)
|
||||
<div id="tab_most_read" class="box tab_content active">
|
||||
@include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
|
||||
<a class="btn auto_width" id="meer-nieuws-most-read" href="#" data-loadmorenews='{"container":["#items-most-read"], "url": "/nieuws/populair?id=items-most-read"}'>
|
||||
<span class="fas fa-spinner fa-spin" id="loading"></span>
|
||||
Klik hier voor meer nieuws
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto sidebar">
|
||||
@section('sidebar')
|
||||
@if ((isset($populair) && $populair) || isset($newsItems) && $newsItems)
|
||||
<div data-tabs>
|
||||
<div class="tabs">
|
||||
@if (isset($populair) && $populair)
|
||||
<h4 data-tab-content-id="tab_most_read"
|
||||
class="box_header extra_small flex-grow-1 active"><span>Meest gelezen</span>
|
||||
</h4>
|
||||
@endif
|
||||
@if (isset($newsItems) && $newsItems)
|
||||
<h4 data-tab-content-id="tab_more_news"
|
||||
class="box_header extra_small{{!$populair? ' active' : ''}}">
|
||||
<span>Meer nieuws</span></h4>
|
||||
@endif
|
||||
</div>
|
||||
@if (isset($populair) && $populair)
|
||||
<div id="tab_most_read" class="box tab_content active">
|
||||
@include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
|
||||
<a class="btn auto_width" id="meer-nieuws-most-read" href="#"
|
||||
data-loadmorenews='{"container":["#items-most-read"], "url": "/nieuws/populair?id=items-most-read"}'>
|
||||
<span class="fas fa-spinner fa-spin" id="loading"></span>
|
||||
Klik hier voor meer nieuws
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
@if (isset($newsItems) && $newsItems)
|
||||
<div id="tab_more_news" class="box tab_content">
|
||||
@include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $newsItems])
|
||||
<a class="btn auto_width" id="meer-nieuws-more-news" href="#"
|
||||
data-loadmorenews='{"container":["#items-more-news"], "url": "/nieuws/more?id=items-more-news"}'>
|
||||
<span class="fas fa-spinner fa-spin" id="loading"></span>
|
||||
Klik hier voor meer nieuws
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@if (isset($newsItems) && $newsItems)
|
||||
<div id="tab_more_news" class="box tab_content">
|
||||
@include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $newsItems])
|
||||
<a class="btn auto_width" id="meer-nieuws-more-news" href="#" data-loadmorenews='{"container":["#items-more-news"], "url": "/nieuws/more?id=items-more-news"}'>
|
||||
<span class="fas fa-spinner fa-spin" id="loading"></span>
|
||||
Klik hier voor meer nieuws
|
||||
</a>
|
||||
|
||||
<div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
|
||||
- Advertentie -
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
<div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
|
||||
|
||||
<div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
|
||||
- Advertentie -
|
||||
</div>
|
||||
<div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
|
||||
@include('widgets/nhgooiradiotv', ['headerClass' => 'extra_small'])
|
||||
|
||||
@include('widgets/nhgooiradiotv', ['headerClass' => 'medium'])
|
||||
|
||||
@include('widgets/contact', [])
|
||||
@show
|
||||
@include('widgets/contact', [])
|
||||
@show
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user