NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add mobile styling

Browse Source
This commit is contained in:
Jorit Tijsen
2024-03-20 12:31:55 +01:00
parent 04b4a3b3e5
commit 5b9dc7c7f3
26 changed files with 828 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/views/contact.blade.php
View File

@@ -18,7 +18,7 @@
<div class="page_body">
<div class="row ">
<div class="col">
<div class="col-12 col-md">
<h3>Contactinformatie</h3>
<p>Neem contact op met NH Gooi, de streekomroep voor Hilversum, Huizen, Blaricum, Eemnes en Laren.</p>
@@ -54,7 +54,7 @@
</p>
</div>
<div class="col">
<div class="col-12 col-md">
<h3>WhatsApp de redactie / Nieuwsupdate</h3>
<p class="intro">Elke dag het nieuws uit 't Gooi in een appje op je telefoon: dat kan met onze
nieuwsdienst via WhatsApp.</p>

56
resources/views/home.blade.php
View File

@@ -7,11 +7,11 @@
@section('content')
<div class="clearfix">
<div class="blog_grid">
<div class="blog_grid" data-snapto="{}">
{{-- Desktop --}}
<div class="grid_view">
<div class="row">
<div class="col-6">
<div class="col-4 col-md-6">
@if($item = current($news))
<div class="post large">
<a href="{{url($item->url)}}" title="{{$item->title}}">
@@ -49,11 +49,49 @@
</div>
</div>
@endif
@if($item = next($news))
<div class="post large d-block d-md-none">
<a href="{{url($item->url)}}" title="{{$item->title}}">
@if($item->video)
<span class="icon video"></span>
@elseif($item->images && count($item->images) > 1)
<span class="icon gallery"></span>
@endif
<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}'
alt='img'>
</a>
<div class="slider_content_box">
<ul class="post_details simple">
@if($item->region)
<li class="category">
<a title="Regio: {{$item->region->title}}"
href="{{route('nieuws.regio', ['region' => $item->region->slug])}}"
class="over_image">{{$item->region->title}}</a>
</li>
@endif
</ul>
<h2><a href="{{url($item->url)}}"
title="{{$item->title}}">{!!$item->title!!}</a></h2>
<?php
$time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');
if ($item->edited && ($item->edited->format('d m H i') != $item->published->format('d m H i'))) {
$time .= ' | bijgewerkt: '
. ($item->edited->format('d m') != $item->published->format('d m') ? strtolower(Formatter::relativeDate($item->edited)) : '')
. ' ' . $item->edited->format('H:i') . ' uur';
}
?>
<span class="post_date" title="{{$time}}">
<i class="fa-regular fa-clock"></i> {{$time}}
</span>
</div>
</div>
@endif
</div>
<div class="col-6">
<div class="col-8 col-md-6">
<div class="row">
@for($i = 0; ($i < 4) && ($item = next($news)); ++$i)
<div class="post small col-6">
@php(prev($news))
@for($i = 0; ($i < 5) && ($item = next($news)); ++$i)
<div class="post small col-6{{$i == 0 ? ' d-none d-md-block' : ''}}{{$i == 4 ? ' d-block d-md-none' : ''}}">
<a href="{{url($item->url)}}" title="{{$item->title}}">
@if($item->video)
<span class="icon video"></span>
@@ -99,10 +137,10 @@
<div class="grey_background">
<div class="body_container row">
<div class="col-12">
<div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
<div class="d-none d-md-block" 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: 728px; height: 90px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
<div class="d-none d-md-block" style="width: 728px; height: 90px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
</div>
<div class="col-12 col-md content_container">
<div class="row">
@@ -135,12 +173,12 @@
<h4 class="box_header"><span>Uitgelicht</span></h4>
<div class="box featured">
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6">
<a href="{{$url}}" title="{{$podcast->title}}">
<img src="{{$podcast->image && $podcast->image->url ? $imgBase . $podcast->image->url : '/images/noimage.png'}}"/>
</a>
</div>
<div class="col-6">
<div class="col-12 col-md-6">
<h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->title!!}</a></h2>
<div class="sub_title">
@if ($podcast->program)

18
resources/views/layouts/_head.blade.php
View File

@@ -38,22 +38,4 @@
<!--rss-->
<link rel="alternate" type="application/rss+xml" title="Abonneren op NH Gooi Nieuws" href="{{env('API_URL')}}rss/nieuws" />
<link rel="alternate" type="application/rss+xml" title="Abonneren op NH Gooi Fragment gemist" href="{{env('API_URL')}}rss/podcasts" />
<script>
refreshCSS = () => {
let links = document.getElementsByTagName('link');
for (let i = 0; i < links.length; i++) {
if (links[i].getAttribute('rel') == 'stylesheet') {
let href = links[i].getAttribute('href')
.split('?')[0];
if (href == '/css/style.css') {
let newHref = href + '?version='
+ new Date().getMilliseconds();
links[i].setAttribute('href', newHref);
}
}
}
}
</script>
</head>

57
resources/views/layouts/master.blade.php
View File

@@ -5,7 +5,6 @@
<html>
@include('layouts._head')
<body>
<button style="position: fixed; top: 0; left: 0;display: none;" onclick="refreshCSS()">Refresh</button>
<!-- Google Tag Manager (noscript) -->
<noscript>
@@ -19,15 +18,42 @@
<div class="header_container small">
<div class="header clearfix">
<div class="logo">
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg" class="ri"/></a>
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg"/></a>
</div>
<div style="float: right;width: 728px;height: 90px;margin: 11px auto 0px auto;background-color: #efefef;"></div>
<div class="advertisement" style="margin: 11px auto 0 auto;background-color: #efefef;"></div>
</div>
</div>
<div class="menu_mobile_container d-flex d-md-none sticky clearfix">
<div class="mobile_menu_button">
<a href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a>
</div>
<div class="logo_mobile">
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg"/></a>
</div>
<div class="right_menu_container">
<ul class="right_menu">
<li>
<a href="{{url('contact')}}">Tip <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">
<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>
</li>
@endif
</ul>
</div>
</div>
<div class="menu_container sticky clearfix">
<div class="top_menu_container">
<ul>
<div class="top_menu_container d-none d-md-block">
<ul class="right_menu">
<li>
<a href="{{url('contact')}}">Tip de redactie <i class="fa-solid fa-circle-plus"></i></a>
</li>
@@ -36,7 +62,8 @@
<form class="search_form" action="{{url($searchURL)}}">
<input type="text" name="query" placeholder="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>
<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>
@@ -67,7 +94,7 @@
<div class="footer_container">
<div class="footer_menu">
<div class="row">
<div class="col-3">
<div class="col-12 col-md-3">
<h4 class="box_header"><span>NH Gooi</span></h4>
<p class="about">
<b>NH Gooi</b> is de streekomroep voor het Gooi in samenwerking met NH Media.
@@ -75,7 +102,7 @@
<a href="{{url('frequenties')}}">Alle frequenties / kanalen.</a>
</p>
</div>
<div class="col-3">
<div class="col-12 col-md-3">
<h4 class="box_header"><span>Contact</span></h4>
<p class="buttons">
<a href="{{url('contact')}}">Contactgegevens</a>
@@ -85,7 +112,7 @@
<a href="https://nhnieuws.nl/" target="_blank">NH Nieuws</a>
</p>
</div>
<div class="col-3">
<div class="col-12 col-md-3">
<h4 class="box_header"><span>Kijk & luister</span></h4>
<p class="buttons">
<a class="player" href="{{url('luister/live')}}">Luister live</a>
@@ -95,7 +122,7 @@
<a href="{{url('nieuws')}}">Nieuws</a>
</p>
</div>
<div class="col-3">
<div class="col-12 col-md-3">
<h4 class="box_header"><span>Radio</span></h4>
<p class="buttons">
<a href="{{url('gids')}}">Programmagids</a>
@@ -113,11 +140,15 @@
<li><a href="{{url('cookie-statement')}}">Cookie statement</a></li>
</ul>
<ul class="footer_social_media">
<li><a class="facebook" title="Facebook" target="_blank" href="https://www.facebook.com/WijZijnNHGooi"><i class="fa-brands fa-facebook-f"></i></a>
<li><a class="facebook" title="Facebook" target="_blank"
href="https://www.facebook.com/WijZijnNHGooi"><i class="fa-brands fa-facebook-f"></i></a>
</li>
<li><a class="twitter-x" title="Twitter/X" target="_blank" href="https://twitter.com/nhgooi"><i class="fa-brands fa-twitter"></i></a>
<li><a class="twitter-x" title="Twitter/X" target="_blank" href="https://twitter.com/nhgooi"><i
class="fa-brands fa-twitter"></i></a>
</li>
<li><a class="youtube" title="Youtube" target="_blank" href="https://www.youtube.com/channel/UC0qLwqmXiLoL5PrLlgB6B4Q"><i class="fa-brands fa-youtube"></i></a></li>
<li><a class="youtube" title="Youtube" target="_blank"
href="https://www.youtube.com/channel/UC0qLwqmXiLoL5PrLlgB6B4Q"><i
class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
</div>

4
resources/views/partial/podcastdirectitems.blade.php
View File

@@ -6,12 +6,12 @@
?>
<li class="box featured">
<div class="row">
<div class="col-6">
<div class="col-12 col-md-6">
<a href="{{$url}}" title="{{$podcast->title}}">
<img src="{{$podcast->image && $podcast->image->url ? $imgBase . $podcast->image->url : '/images/noimage.png'}}"/>
</a>
</div>
<div class="col-6">
<div class="col-12 col-md-6">
<h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a></h2>
<div class="sub_title">
@if ($podcast->program)

2
resources/views/partial/radioscheduleweek.blade.php
View File

@@ -5,7 +5,7 @@
@if(isset($schedule[$day]) && $schedule[$day])
@foreach($schedule[$day] as $item)
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
<div class="col-3">
<div class="col-12 col-md-3">
<a class="box full-width" href="{{route('programma') . $item['program']->url}}"
title="{{$item['program']->name . ($item['program']->tagline ? "\n" . $item['program']->tagline : "")}}">
<div class="program-title">

10
resources/views/radioschedule.blade.php
View File

@@ -80,7 +80,8 @@ $margin = 2;
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/air-datepicker@3.5.0/air-datepicker.min.js"></script>
<script type="text/javascript">
new AirDatepicker('#custom_date', {
var isMobile = window.screen.width <= 768;
var airdatepicker = new AirDatepicker('#custom_date', {
locale: {
days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
@@ -95,6 +96,7 @@ $margin = 2;
},
selectedDates: [new Date()],
autoClose: true,
isMobile: isMobile,
onSelect: function onSelect(fd, date, inst) {
getCustomProgramDate();
}
@@ -117,5 +119,11 @@ $margin = 2;
});
}
}
jQuery(window).resize(function() {
if ((window.screen.width <= 768) != isMobile) {
isMobile = window.screen.width <= 768;
airdatepicker.update({isMobile: isMobile});
}
});
</script>
@endpush

37
resources/views/widgets/menu.blade.php
View File

@@ -120,7 +120,7 @@ function buildMenu($menu, $ismobile)
return $result;
}
?>
<nav>
<nav class="d-none d-md-flex">
<div></div>
<ul class="menu d-none d-lg-block">
<li class="{{isActive('/', false) ? "selected" : ""}}">
@@ -135,26 +135,23 @@ function buildMenu($menu, $ismobile)
</ul>
<div></div>
</nav>
<div class="mobile_menu_container d-none d-sm-block d-md-none">
<a href="#" class="mobile-menu-switch">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</a>
<div class="mobile-menu-divider"></div>
<nav>
<div class="mobile_menu_container">
<nav id="mobile_menu_nav">
<ul class="mobile-menu">
@if($activeBlog != null)
<li class="{{isActive($activeBlog->url, false) ? "selected" : ""}}">
<a href="{{url($activeBlog->url)}}" title="Liveblog: {{$activeBlog->title}}">
<b>Live-blog</b> | {{$activeBlog->title}}
</a>
</li>
@endif
<li class="submenu {{isActive($newsUrl, false) ? "selected" : ""}}">
<a href="{{$newsUrl}}" title="Nieuws">
Nieuws
</a>
<li class="logo_close_button">
<div class="logo">
<a href="{{url('/')}}"><img src="/images/logo-NHGooi.svg"/></a>
</div>
<div class="mobile_close_menu_button">
<a href="javascript:void(0)"><i class="fa-solid fa-xmark"></i></a>
</div>
</li>
<li class="{{isActive('/', false) ? "selected" : ""}}">
<a href="/" title="Home">Home</a>
</li>
@php($newsUrl = '/nieuws')
<li class="{{isActive($newsUrl, false) ? "selected" : ""}}">
<a href="{{$newsUrl}}" title="Nieuws">Nieuws</a>
</li>
{!! buildMenu($menu, true) !!}
</ul>