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

297
public/css/style.css vendored
View File

@@ -19,6 +19,11 @@ body {
padding: 67px 0; padding: 67px 0;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
@media (max-width: 768px) {
.body_container {
padding: 50px 0;
}
}
.header_container { .header_container {
max-width: 1170px; max-width: 1170px;
@@ -37,6 +42,14 @@ body {
width: calc(300px + var(--bs-gutter-x)); width: calc(300px + var(--bs-gutter-x));
} }
@media (max-width: 768px) {
.content_container {
padding-right: calc(var(--bs-gutter-x) * 0.5);
}
.site_container {
overflow: hidden;
}
}
.btn { .btn {
display: block; display: block;
width: calc(100% - 78px); width: calc(100% - 78px);
@@ -127,20 +140,46 @@ div.pp_default .pp_close:hover {
.header { .header {
height: 110px; height: 110px;
} }
.header .logo { .header .logo {
float: left; float: left;
margin-top: 18px; margin-top: 18px;
} }
.header .logo img { .header .logo img {
height: 75px; height: 75px;
} }
.header .advertisement {
float: right;
width: 728px;
height: 90px;
}
.menu_container { @media (max-width: 1170px) {
height: 75px; .header {
margin-bottom: 20px; padding: 0 20px;
background-image: linear-gradient(to right, #0102b0, #4090e3); }
}
@media (max-width: 980px) {
.header {
height: 212px;
}
.header .logo {
float: none;
}
.header .advertisement {
float: none;
}
}
@media (max-width: 768px) {
.header_container {
display: none;
}
}
@media (min-width: 767px) {
.menu_container {
height: 75px;
margin-bottom: 20px;
background-image: linear-gradient(to right, #0102b0, #4090e3);
}
} }
.menu_container nav { .menu_container nav {
display: flex; display: flex;
@@ -225,30 +264,30 @@ div.pp_default .pp_close:hover {
margin-left: -10px; margin-left: -10px;
} }
.top_menu_container { .top_menu_container, .menu_mobile_container {
height: 50px; height: 50px;
max-width: 1170px; max-width: 1170px;
margin: 0 auto; margin: 0 auto;
} }
.top_menu_container ul { .top_menu_container ul.right_menu, .menu_mobile_container ul.right_menu {
float: right; float: right;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.top_menu_container ul li { .top_menu_container ul.right_menu li, .menu_mobile_container ul.right_menu li {
float: left; float: left;
padding: 6px 19px; padding: 6px 19px;
margin: 8px; margin: 8px;
border-right: 1px solid #fff; border-right: 1px solid #fff;
} }
.top_menu_container ul li:last-child { .top_menu_container ul.right_menu li:last-child, .menu_mobile_container ul.right_menu li:last-child {
border: none; border: none;
} }
.top_menu_container ul li:nth-child(2) { .top_menu_container ul.right_menu li:nth-child(2), .menu_mobile_container ul.right_menu li:nth-child(2) {
padding: 0 19px; padding: 0 19px;
} }
.top_menu_container ul li a { .top_menu_container ul.right_menu li a, .menu_mobile_container ul.right_menu li a {
float: left; float: left;
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 14px; font-size: 14px;
@@ -258,21 +297,21 @@ div.pp_default .pp_close:hover {
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
} }
.top_menu_container ul li a i { .top_menu_container ul.right_menu li a i, .menu_mobile_container ul.right_menu li a i {
font-size: 18px; font-size: 18px;
position: relative; position: relative;
top: 2px; top: 2px;
margin-left: 5px; margin-left: 5px;
} }
.top_menu_container ul li .search_form { .top_menu_container ul.right_menu li .search_form, .menu_mobile_container ul.right_menu li .search_form {
float: left; float: left;
overflow: hidden; overflow: hidden;
height: 34px; height: 34px;
margin-right: 10px; margin-right: 10px;
} }
.top_menu_container ul li .search_form .search_input { .top_menu_container ul.right_menu li .search_form .search_input, .menu_mobile_container ul.right_menu li .search_form .search_input {
border: 1px solid #efefef; border: 1px solid #efefef;
border-radius: 5px; border-radius: 3px;
background-color: #fff; background-color: #fff;
height: 29px; height: 29px;
font-family: Montserrat, serif; font-family: Montserrat, serif;
@@ -280,27 +319,76 @@ div.pp_default .pp_close:hover {
line-height: 1.25; line-height: 1.25;
color: #1a1a1a; color: #1a1a1a;
} }
.top_menu_container ul li .search_form .search_submit { .top_menu_container ul.right_menu li .search_form .search_submit, .menu_mobile_container ul.right_menu li .search_form .search_submit {
float: right; float: right;
margin: 6px; margin: 6px;
} }
.top_menu_container ul li .search_button { .top_menu_container ul.right_menu li .search_button, .menu_mobile_container ul.right_menu li .search_button {
margin-top: 6px; margin-top: 6px;
} }
.menu-submenu { .menu_mobile_container {
height: 30px;
padding: 12px 0;
}
.menu_mobile_container .mobile_menu_button a {
display: block;
width: 20px;
height: 21px;
padding: 4px 10px 4px 11px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: #10229c;
margin-right: 12px;
}
.menu_mobile_container .mobile_menu_button a i {
color: white;
font-size: 19px;
}
.menu_mobile_container .logo_mobile {
height: 100%;
}
.menu_mobile_container .logo_mobile img {
height: 100%;
}
.menu_mobile_container .right_menu_container {
background-color: #10229c;
margin-left: 12px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
flex-grow: 1;
}
.menu_mobile_container .right_menu_container ul.right_menu li {
padding: 5px 19px;
margin: 0;
}
.menu_mobile_container .right_menu_container ul.right_menu li .search_form {
height: 25px;
}
.menu_mobile_container .right_menu_container ul.right_menu li .search_form .search_input {
height: 18px;
width: 80px;
}
.menu_mobile_container .right_menu_container ul.right_menu li .search_form .search_submit {
margin: 0 6px;
}
.menu_mobile_container .right_menu_container ul.right_menu li .search_button {
margin: 0;
}
.menu-submenu, .mobile_menu_container {
position: absolute; position: absolute;
} }
.menu-submenu > a { .menu-submenu > a, .mobile_menu_container > a {
display: block; display: block;
height: 30px; height: 30px;
} }
.menu-submenu ul { .menu-submenu ul, .mobile_menu_container ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.menu-submenu ul a { .menu-submenu ul a, .mobile_menu_container ul a {
display: block; display: block;
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 14px; font-size: 14px;
@@ -311,7 +399,7 @@ div.pp_default .pp_close:hover {
border-bottom: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8;
text-transform: uppercase; text-transform: uppercase;
} }
.menu-submenu > ul { .menu-submenu > ul, .mobile_menu_container > ul {
padding: 20px; padding: 20px;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1); box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
@@ -320,16 +408,70 @@ div.pp_default .pp_close:hover {
width: max-content; width: max-content;
display: none; display: none;
} }
.menu-submenu > ul li ul { .menu-submenu > ul li ul, .mobile_menu_container > ul li ul {
display: none; display: none;
} }
.menu-submenu > ul li ul li { .menu-submenu > ul li ul li, .mobile_menu_container > ul li ul li {
padding-left: 10px; padding-left: 10px;
} }
.menu-submenu > ul li.has_submenu { .menu-submenu > ul li.has_submenu, .mobile_menu_container > ul li.has_submenu {
position: relative; position: relative;
} }
.menu-submenu > ul li.has_submenu:after { .menu-submenu > ul li.has_submenu:after, .mobile_menu_container > ul li.has_submenu:after {
-webkit-font-smoothing: antialiased;
display: var(--fa-display, inline-block);
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f0d7";
position: absolute;
right: 0;
top: 15px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
transition: 0.6s ease;
}
.menu-submenu > ul li.has_submenu.opened:after, .mobile_menu_container > ul li.has_submenu.opened:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.mobile_menu_container {
display: none;
position: fixed;
z-index: 15;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
}
.mobile_menu_container nav {
background: white;
width: fit-content;
height: 100vh;
padding: 20px;
min-width: 70vw;
max-width: 100vw;
overflow: hidden;
}
.mobile_menu_container nav ul, .mobile_menu_container nav li, .mobile_menu_container nav li a {
width: 100%;
}
.mobile_menu_container nav ul > li > ul > li {
padding-left: 20px;
width: calc(100% - 20px);
}
.mobile_menu_container nav .submenu {
display: none;
}
.mobile_menu_container nav li.has_submenu {
position: relative;
}
.mobile_menu_container nav li.has_submenu:after {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
display: var(--fa-display, inline-block); display: var(--fa-display, inline-block);
font-style: normal; font-style: normal;
@@ -345,11 +487,51 @@ div.pp_default .pp_close:hover {
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
transform: rotate(270deg); transform: rotate(270deg);
} }
.menu-submenu > ul li.has_submenu.opened:after { .mobile_menu_container nav li.has_submenu.opened:after {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
} }
.logo_close_button {
display: flex;
height: 42px;
margin-bottom: 37px;
}
.logo_close_button .logo {
flex-grow: 1;
height: 42px;
}
.logo_close_button .logo a {
height: 100%;
padding: 0;
border-bottom: none;
}
.logo_close_button .logo a img {
height: 100%;
}
.logo_close_button .mobile_close_menu_button {
height: 30px;
width: 22.5px;
padding: 4px;
}
.logo_close_button .mobile_close_menu_button a {
font-size: 30px;
color: #1d2bb2;
padding: 0;
border-bottom: none;
}
.mobile_menu_container nav li.has_submenu:after {
content: "\f054";
-webkit-transform: rotate(0);
transform: rotate(0);
transition: 0.6s ease;
}
.mobile_menu_container nav li.has_submenu.opened:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.header .now-playing-header { .header .now-playing-header {
float: right; float: right;
} }
@@ -402,6 +584,28 @@ div.pp_default .pp_close:hover {
cursor: pointer; cursor: pointer;
} }
@media (max-width: 768px) {
.blog_grid {
overflow-x: auto;
overflow-y: hidden;
/* Track */
/* Handle */
}
.blog_grid::-webkit-scrollbar {
height: 8px;
}
.blog_grid::-webkit-scrollbar-track {
border-radius: 100vw;
background: #eee;
}
.blog_grid::-webkit-scrollbar-thumb {
border-radius: 4px;
background: linear-gradient(to right, #10229c, #64a9f2);
}
.blog_grid .grid_view {
width: 300%;
}
}
.blog_grid .row, .blog_grid .row > * { .blog_grid .row, .blog_grid .row > * {
padding: 0; padding: 0;
margin: 0; margin: 0;
@@ -413,6 +617,11 @@ div.pp_default .pp_close:hover {
position: relative; position: relative;
height: 100%; height: 100%;
} }
@media (max-width: 768px) {
.blog_grid .post {
height: 50%;
}
}
.blog_grid .post img { .blog_grid .post img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -461,6 +670,12 @@ div.pp_default .pp_close:hover {
font-size: 16px; font-size: 16px;
line-height: 1.17; line-height: 1.17;
} }
@media (max-width: 768px) {
.blog_grid .post .slider_content_box h2 a, .blog_grid .post .slider_content_box h5 a {
font-size: 16px;
line-height: 1.17;
}
}
.blog_grid .post .slider_content_box .post_date { .blog_grid .post .slider_content_box .post_date {
display: block; display: block;
height: 30px; height: 30px;
@@ -517,6 +732,7 @@ div.pp_default .pp_close:hover {
.tabs { .tabs {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
.tabs.fit_content { .tabs.fit_content {
width: fit-content; width: fit-content;
@@ -614,6 +830,11 @@ div.pp_default .pp_close:hover {
width: calc(100% - 38px); width: calc(100% - 38px);
} }
@media (max-width: 768px) {
.sidebar {
width: 100%;
}
}
.radio_box { .radio_box {
padding: 15px 23px 15px 15px; padding: 15px 23px 15px 15px;
width: calc(100% - 38px); width: calc(100% - 38px);
@@ -650,6 +871,7 @@ div.pp_default .pp_close:hover {
.contact_box { .contact_box {
position: relative; position: relative;
padding: 15px 23px 15px 15px;
} }
.contact_box .logo-whatsapp { .contact_box .logo-whatsapp {
position: absolute; position: absolute;
@@ -681,6 +903,11 @@ div.pp_default .pp_close:hover {
text-transform: uppercase; text-transform: uppercase;
} }
@media (max-width: 768px) and (min-width: 423px) {
.contact_box p {
width: calc(100% - 81px);
}
}
.featured img { .featured img {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
@@ -992,8 +1219,13 @@ div.pp_default .pp_close:hover {
max-width: 1170px; max-width: 1170px;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
width: calc(100% - 270px); padding: 20px;
padding: 32px 135px; }
@media (min-width: 768px) {
.page_container {
width: calc(100% - 270px);
padding: 32px 135px;
}
} }
.page_body { .page_body {
@@ -1060,6 +1292,11 @@ div.pp_default .pp_close:hover {
.footer_container .footer_menu { .footer_container .footer_menu {
background-image: linear-gradient(to right, #0102b0, #4090e3); background-image: linear-gradient(to right, #0102b0, #4090e3);
} }
@media (max-width: 768px) {
.footer_container .footer_menu {
padding: 60px 30px 30px 30px;
}
}
.footer_container .footer_menu .row { .footer_container .footer_menu .row {
max-width: 1170px; max-width: 1170px;
margin: 0 auto; margin: 0 auto;

2
public/css/style.css.map
View File

File diff suppressed because one or more lines are too long

97
public/js/functions.js vendored
View File

@@ -80,29 +80,57 @@ $(function () {
var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone()); var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone());
var pos = $menuItem.offset(); var pos = $menuItem.offset();
submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left}); submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
submenu.on( "mouseleave", function(){ submenu.on( "mouseleave", function() {
$('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()}); $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
$menuItem.removeClass('hover'); $menuItem.removeClass('hover');
} ); } );
$('body').append(submenu); $('body').append(submenu);
submenu.children('ul.submenu').slideDown(); submenu.children('ul.submenu').slideDown();
submenu.find('ul.submenu li.has_submenu').click(function(){ submenu.find('ul.submenu').subMenu({});
$(this).find('ul.submenu').slideToggle();
$(this).toggleClass('opened');
});
openPlayerInNewScreen(); openPlayerInNewScreen();
}); });
}; };
/**
* @param {object} _options
*/
$.fn.subMenu = function (_options) {
var options = {
menuSubmenuClass: 'has_submenu'
};
$.extend(options, _options);
var $container = $(this);
$container.find('li.' + options.menuSubmenuClass + ' > a').click(function(e) {
e.preventDefault();
var $li = $(this).closest('li');
$li.children('ul.submenu').slideToggle();
$li.toggleClass('opened');
});
};
}(jQuery)); }(jQuery));
$(function () { $(function () {
$('.menu, .mobile-menu').menu({}); $('.menu').menu({});
$('.mobile-menu').subMenu({});
$('.mobile_menu_button a').click(function() {
$('.mobile_menu_container').show();
});
$('.mobile_close_menu_button a').click(function() {
$('.mobile_menu_container').hide();
});
$('.mobile_menu_container').click(function(e){
var $target = $(e.target);
if(!$target.closest('#mobile_menu_nav').length &&
$('.mobile_menu_container').is(":visible")) {
$('.mobile_menu_container').hide();
}
});
}); });
$(function () { $(function () {
console.log($(".prettyPhoto[rel^='prettyPhoto']"));
$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({ $(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({
show_title: false, show_title: false,
slideshow: 3000, slideshow: 3000,
@@ -111,6 +139,61 @@ $(function () {
}); });
}); });
(function ($) {
/**
* @param {object} _options
*/
$.fn.snapTo = function (_options) {
var options = {
elementClass: 'post'
};
$.extend(options, _options);
var $container = $(this);
var $elements = $container.find('.' + options.elementClass + ':visible');
var stopSnapTo = false;
var snapTimeout = null;
var snapHandler = function() {
if (!stopSnapTo) {
stopSnapTo = true;
var y = $container.scrollLeft();
$elements.each(function () {
var offset = $(this).offset();
if (offset.left > -(window.screen.width / 2) && offset.left < window.screen.width / 2) {
$container.animate({
scrollLeft: Math.round(y + offset.left) + 'px'
}, 300);
return false;
}
});
if (snapTimeout) {
clearTimeout(snapTimeout);
}
snapTimeout = setTimeout(function () {
stopSnapTo = false;
}, 500);
}
}
var snapToHandlerTimer = null;
var scrollHandler = function() {
if (snapToHandlerTimer) {
clearTimeout(snapToHandlerTimer);
}
snapToHandlerTimer = setTimeout(snapHandler, 300);
};
$container.on( "scroll", scrollHandler);
};
}(jQuery));
$(function () {
$('[data-snapto]').each(function () {
$(this).snapTo($(this).data('snapto'));
});
});
(function ($) { (function ($) {
/** /**

4
public/js/functions.min.js vendored
View File

@@ -1,2 +1,2 @@
/*! 2024-03-18 */ /*! 2024-03-20 */
!function(l){l.fn.loadMoreNews=function(e){var a=2,n=!1,i={loadingElementId:"#loading",container:"",url:document.location.pathname},o=(l.extend(i,e),l(i.loadingElementId,this));o.hide(),this.click(function(e){var t,s;e.preventDefault(),n||(n=1,o.show(),t=l(this).attr("disabled","disabled"),s=l(i.container),l.ajax({url:i.url+(0<=i.url.indexOf("?")?"&":"?")+"pagina="+a}).always(function(){n=0,o.hide(),t.removeAttr("disabled")}).done(function(n){n?(s.each(function(){var e=this.toString();l(e).append(l("<div>"+n+"</div>").find(e).length?l("<div>"+n+"</div>").find(e).children():l(n))}),++a):t.attr("disabled","disabled").text("Geen nieuws meer.")}))})}}(jQuery),$(function(){$("[data-loadmorenews]").each(function(){$(this).loadMoreNews($(this).data("loadmorenews"))})}),function(a){a.fn.menu=function(e){var n={menuSubmenuClass:"has_submenu"},e=(a.extend(n,e),a(this).children("."+n.menuSubmenuClass)),s=a(this);e.on("mouseenter",function(){var e=a(this),n=(a(".menu-submenu > ul.submenu").slideUp(400,function(){a(this).closest(".menu-submenu").remove()}),a(".hover",s).removeClass("hover"),e.addClass("hover"),a('<div style="width: '+e.outerWidth()+'px"><a href="'+e.find("a").attr("href")+'" style="width: '+e.outerWidth()+'px"></a></div>').append(e.children("ul.submenu").clone())),t=e.offset();n.addClass("menu-submenu").css({top:t.top,left:t.left}),n.on("mouseleave",function(){a(".menu-submenu > ul.submenu").slideUp(400,function(){a(this).closest(".menu-submenu").remove()}),e.removeClass("hover")}),a("body").append(n),n.children("ul.submenu").slideDown(),n.find("ul.submenu li.has_submenu").click(function(){a(this).find("ul.submenu").slideToggle(),a(this).toggleClass("opened")}),openPlayerInNewScreen()})}}(jQuery),$(function(){$(".menu, .mobile-menu").menu({})}),$(function(){console.log($(".prettyPhoto[rel^='prettyPhoto']")),$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({show_title:!1,slideshow:3e3,overlay_gallery:!0,social_tools:""})}),function(a){a.fn.tabs=function(e){var n={tabClass:"box_header",activeClass:"active",contentClass:"tab_content"},t=(a.extend(n,e),a(this).find("."+n.tabClass)),s=a(this);t.click(function(e){e.preventDefault(),t.removeClass(n.activeClass),s.find("."+n.contentClass).removeClass(n.activeClass),s.find("#"+a(this).data("tab-content-id")).addClass(n.activeClass),a(this).addClass(n.activeClass)})}}(jQuery),$(function(){$("[data-tabs]").each(function(){$(this).tabs($(this).data("tabs")??{})})}); !function(u){u.fn.loadMoreNews=function(e){var s=2,n=!1,o={loadingElementId:"#loading",container:"",url:document.location.pathname},a=(u.extend(o,e),u(o.loadingElementId,this));a.hide(),this.click(function(e){var t,i;e.preventDefault(),n||(n=1,a.show(),t=u(this).attr("disabled","disabled"),i=u(o.container),u.ajax({url:o.url+(0<=o.url.indexOf("?")?"&":"?")+"pagina="+s}).always(function(){n=0,a.hide(),t.removeAttr("disabled")}).done(function(n){n?(i.each(function(){var e=this.toString();u(e).append(u("<div>"+n+"</div>").find(e).length?u("<div>"+n+"</div>").find(e).children():u(n))}),++s):t.attr("disabled","disabled").text("Geen nieuws meer.")}))})}}(jQuery),$(function(){$("[data-loadmorenews]").each(function(){$(this).loadMoreNews($(this).data("loadmorenews"))})}),function(s){s.fn.menu=function(e){var n={menuSubmenuClass:"has_submenu"},e=(s.extend(n,e),s(this).children("."+n.menuSubmenuClass)),i=s(this);e.on("mouseenter",function(){var e=s(this),n=(s(".menu-submenu > ul.submenu").slideUp(400,function(){s(this).closest(".menu-submenu").remove()}),s(".hover",i).removeClass("hover"),e.addClass("hover"),s('<div style="width: '+e.outerWidth()+'px"><a href="'+e.find("a").attr("href")+'" style="width: '+e.outerWidth()+'px"></a></div>').append(e.children("ul.submenu").clone())),t=e.offset();n.addClass("menu-submenu").css({top:t.top,left:t.left}),n.on("mouseleave",function(){s(".menu-submenu > ul.submenu").slideUp(400,function(){s(this).closest(".menu-submenu").remove()}),e.removeClass("hover")}),s("body").append(n),n.children("ul.submenu").slideDown(),n.find("ul.submenu").subMenu({}),openPlayerInNewScreen()})},s.fn.subMenu=function(e){var n={menuSubmenuClass:"has_submenu"};s.extend(n,e),s(this).find("li."+n.menuSubmenuClass+" > a").click(function(e){e.preventDefault();e=s(this).closest("li");e.children("ul.submenu").slideToggle(),e.toggleClass("opened")})}}(jQuery),$(function(){$(".menu").menu({}),$(".mobile-menu").subMenu({}),$(".mobile_menu_button a").click(function(){$(".mobile_menu_container").show()}),$(".mobile_close_menu_button a").click(function(){$(".mobile_menu_container").hide()}),$(".mobile_menu_container").click(function(e){!$(e.target).closest("#mobile_menu_nav").length&&$(".mobile_menu_container").is(":visible")&&$(".mobile_menu_container").hide()})}),$(function(){$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({show_title:!1,slideshow:3e3,overlay_gallery:!0,social_tools:""})}),function(l){l.fn.snapTo=function(e){var n={elementClass:"post"},t=(l.extend(n,e),l(this)),i=t.find("."+n.elementClass+":visible"),s=!1,o=null,a=function(){var n;s||(s=!0,n=t.scrollLeft(),i.each(function(){var e=l(this).offset();if(e.left>-window.screen.width/2&&e.left<window.screen.width/2)return t.animate({scrollLeft:Math.round(n+e.left)+"px"},300),!1}),o&&clearTimeout(o),o=setTimeout(function(){s=!1},500))},u=null;t.on("scroll",function(){u&&clearTimeout(u),u=setTimeout(a,300)})}}(jQuery),$(function(){$("[data-snapto]").each(function(){$(this).snapTo($(this).data("snapto"))})}),function(s){s.fn.tabs=function(e){var n={tabClass:"box_header",activeClass:"active",contentClass:"tab_content"},t=(s.extend(n,e),s(this).find("."+n.tabClass)),i=s(this);t.click(function(e){e.preventDefault(),t.removeClass(n.activeClass),i.find("."+n.contentClass).removeClass(n.activeClass),i.find("#"+s(this).data("tab-content-id")).addClass(n.activeClass),s(this).addClass(n.activeClass)})}}(jQuery),$(function(){$("[data-tabs]").each(function(){$(this).tabs($(this).data("tabs")??{})})});

41
resources/assets/js/functions/menu.js vendored
View File

@@ -19,23 +19,52 @@
var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone()); var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone());
var pos = $menuItem.offset(); var pos = $menuItem.offset();
submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left}); submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
submenu.on( "mouseleave", function(){ submenu.on( "mouseleave", function() {
$('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()}); $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
$menuItem.removeClass('hover'); $menuItem.removeClass('hover');
} ); } );
$('body').append(submenu); $('body').append(submenu);
submenu.children('ul.submenu').slideDown(); submenu.children('ul.submenu').slideDown();
submenu.find('ul.submenu li.has_submenu').click(function(){ submenu.find('ul.submenu').subMenu({});
$(this).find('ul.submenu').slideToggle();
$(this).toggleClass('opened');
});
openPlayerInNewScreen(); openPlayerInNewScreen();
}); });
}; };
/**
* @param {object} _options
*/
$.fn.subMenu = function (_options) {
var options = {
menuSubmenuClass: 'has_submenu'
};
$.extend(options, _options);
var $container = $(this);
$container.find('li.' + options.menuSubmenuClass + ' > a').click(function(e) {
e.preventDefault();
var $li = $(this).closest('li');
$li.children('ul.submenu').slideToggle();
$li.toggleClass('opened');
});
};
}(jQuery)); }(jQuery));
$(function () { $(function () {
$('.menu, .mobile-menu').menu({}); $('.menu').menu({});
$('.mobile-menu').subMenu({});
$('.mobile_menu_button a').click(function() {
$('.mobile_menu_container').show();
});
$('.mobile_close_menu_button a').click(function() {
$('.mobile_menu_container').hide();
});
$('.mobile_menu_container').click(function(e){
var $target = $(e.target);
if(!$target.closest('#mobile_menu_nav').length &&
$('.mobile_menu_container').is(":visible")) {
$('.mobile_menu_container').hide();
}
});
}); });

1
resources/assets/js/functions/prettyPhoto.js vendored
View File

@@ -1,5 +1,4 @@
$(function () { $(function () {
console.log($(".prettyPhoto[rel^='prettyPhoto']"));
$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({ $(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({
show_title: false, show_title: false,
slideshow: 3000, slideshow: 3000,

54
resources/assets/js/functions/snapTo.js vendored Normal file
View File

@@ -0,0 +1,54 @@
(function ($) {
/**
* @param {object} _options
*/
$.fn.snapTo = function (_options) {
var options = {
elementClass: 'post'
};
$.extend(options, _options);
var $container = $(this);
var $elements = $container.find('.' + options.elementClass + ':visible');
var stopSnapTo = false;
var snapTimeout = null;
var snapHandler = function() {
if (!stopSnapTo) {
stopSnapTo = true;
var y = $container.scrollLeft();
$elements.each(function () {
var offset = $(this).offset();
if (offset.left > -(window.screen.width / 2) && offset.left < window.screen.width / 2) {
$container.animate({
scrollLeft: Math.round(y + offset.left) + 'px'
}, 300);
return false;
}
});
if (snapTimeout) {
clearTimeout(snapTimeout);
}
snapTimeout = setTimeout(function () {
stopSnapTo = false;
}, 500);
}
}
var snapToHandlerTimer = null;
var scrollHandler = function() {
if (snapToHandlerTimer) {
clearTimeout(snapToHandlerTimer);
}
snapToHandlerTimer = setTimeout(snapHandler, 300);
};
$container.on( "scroll", scrollHandler);
};
}(jQuery));
$(function () {
$('[data-snapto]').each(function () {
$(this).snapTo($(this).data('snapto'));
});
});

2
resources/assets/sass/base/_base.scss vendored
View File

@@ -7,6 +7,8 @@
@use "../layout"; @use "../layout";
@use "mobile";
.mejs__overlay-button { .mejs__overlay-button {
border: none; border: none;
} }

11
resources/assets/sass/base/_container.scss vendored
View File

@@ -10,6 +10,9 @@ body {
.body_container { .body_container {
@include container; @include container;
padding: 67px 0; padding: 67px 0;
@media (max-width: 768px) {
padding: 50px 0;
}
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.header_container { .header_container {
@@ -24,3 +27,11 @@ body {
.sidebar { .sidebar {
width: CALC(300px + var(--bs-gutter-x)); width: CALC(300px + var(--bs-gutter-x));
} }
@media (max-width: 768px) {
.content_container {
padding-right: calc(var(--bs-gutter-x)* .5);
}
.site_container {
overflow: hidden;
}
}

0
resources/assets/sass/base/_mobile.scss vendored Normal file
View File

1
resources/assets/sass/components/_box.scss vendored
View File

@@ -39,6 +39,7 @@
.tabs { .tabs {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
&.fit_content { &.fit_content {
width: fit-content; width: fit-content;
} }

9
resources/assets/sass/components/_contact_box.scss vendored
View File

@@ -2,6 +2,8 @@
.contact_box { .contact_box {
position: relative; position: relative;
padding: 15px 23px 15px 15px;
.logo-whatsapp { .logo-whatsapp {
position: absolute; position: absolute;
right: 0; right: 0;
@@ -29,4 +31,9 @@
.read_more { .read_more {
@include read_more_link; @include read_more_link;
} }
} }
@media (max-width: 768px) and (min-width: 423px) {
.contact_box p {
width: CALC(100% - 81px);
}
}

3
resources/assets/sass/components/_footer.scss vendored
View File

@@ -10,6 +10,9 @@
.footer_menu { .footer_menu {
background-image: linear-gradient(to right, #0102b0, #4090e3); background-image: linear-gradient(to right, #0102b0, #4090e3);
@media (max-width: 768px) {
padding: 60px 30px 30px 30px;
}
.row { .row {
@include container; @include container;

37
resources/assets/sass/components/_header.scss vendored
View File

@@ -1,10 +1,37 @@
.header { .header {
height: 110px; height: 110px;
.logo {
float: left;
margin-top: 18px;
img {
height: 75px;
}
}
.advertisement {
float: right;
width: 728px;
height: 90px;
}
} }
.header .logo {
float: left; @media (max-width: 1170px) {
margin-top: 18px; .header {
padding: 0 20px;
}
} }
.header .logo img { @media (max-width: 980px) {
height: 75px; .header {
height: 212px;
.logo {
float: none;
}
.advertisement {
float: none;
}
}
}
@media (max-width: 768px) {
.header_container {
display: none;
}
} }

31
resources/assets/sass/components/_main_news.scss vendored
View File

@@ -2,6 +2,28 @@
@use "../abstracts/variables" as *; @use "../abstracts/variables" as *;
.blog_grid { .blog_grid {
@media (max-width: 768px) {
overflow-x: auto;
overflow-y: hidden;
&::-webkit-scrollbar {
height: 8px;
}
/* Track */
&::-webkit-scrollbar-track {
border-radius: 100vw;
background: #eee;
}
/* Handle */
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background: linear-gradient(to right, #10229c, #64a9f2);
}
.grid_view {
width: 300%;
}
}
.row, .row > * { .row, .row > * {
padding: 0; padding: 0;
margin: 0; margin: 0;
@@ -12,6 +34,9 @@
.post { .post {
position: relative; position: relative;
height: 100%; height: 100%;
@media (max-width: 768px) {
height: 50%;
}
img { img {
width: 100%; width: 100%;
@@ -64,6 +89,12 @@
font-size: 16px; font-size: 16px;
line-height: 1.17; line-height: 1.17;
} }
@media (max-width: 768px) {
h2 a, h5 a {
font-size: 16px;
line-height: 1.17;
}
}
.post_date { .post_date {
@include post_date; @include post_date;
color: $news-banner-text-color; color: $news-banner-text-color;

166
resources/assets/sass/components/_menu.scss vendored
View File

@@ -2,9 +2,11 @@
@use "../abstracts/mixin" as *; @use "../abstracts/mixin" as *;
.menu_container { .menu_container {
height: 75px; @media (min-width: 767px) {
margin-bottom: 20px; height: 75px;
background-image: linear-gradient(to right, #0102b0, #4090e3); margin-bottom: 20px;
background-image: linear-gradient(to right, #0102b0, #4090e3);
}
nav { nav {
display: flex; display: flex;
@@ -97,11 +99,11 @@
} }
} }
} }
.top_menu_container { .top_menu_container, .menu_mobile_container {
height: 50px; height: 50px;
@include container; @include container;
ul { ul.right_menu {
float: right; float: right;
@include reset-list; @include reset-list;
@@ -145,7 +147,7 @@
.search_input { .search_input {
border: 1px solid #efefef; border: 1px solid #efefef;
border-radius: 5px; border-radius: 3px;
background-color: #fff; background-color: #fff;
height: 29px; height: 29px;
font-family: Montserrat, serif; font-family: Montserrat, serif;
@@ -164,8 +166,60 @@
} }
} }
} }
.menu_mobile_container {
height: 30px;
padding: 12px 0;
.mobile_menu_button a {
display: block;
width: 20px;
height: 21px;
padding: 4px 10px 4px 11px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: #10229c;
margin-right: 12px;
i {
color: white;
font-size: 19px;
}
}
.logo_mobile {
height: 100%;
img {
height: 100%;
}
}
.right_menu_container {
background-color: #10229c;
margin-left: 12px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
flex-grow: 1;
ul.right_menu {
li {
padding: 5px 19px;
margin: 0;
.menu-submenu { .search_form {
height: 25px;
.search_input {
height: 18px;
width: 80px;
}
.search_submit {
margin: 0 6px;
}
}
.search_button {
margin: 0;
}
}
}
}
}
.menu-submenu, .mobile_menu_container {
position: absolute; position: absolute;
> a { > a {
@@ -222,6 +276,7 @@
top: 15px; top: 15px;
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
transform: rotate(270deg); transform: rotate(270deg);
transition: 0.6s ease;
} }
&.opened:after { &.opened:after {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@@ -230,3 +285,100 @@
} }
} }
} }
.mobile_menu_container {
display: none;
position: fixed;
z-index: 15;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
nav {
background: white;
width: fit-content;
height: 100vh;
padding: 20px;
min-width: 70vw;
max-width: 100vw;
overflow: hidden;
ul, li, li a {
width: 100%;
}
ul > li > ul > li {
padding-left: 20px;
width: CALC(100% - 20px);
}
.submenu {
display: none;
}
li.has_submenu {
position: relative;
&:after {
-webkit-font-smoothing: antialiased;
display: var(--fa-display, inline-block);
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f0d7";
position: absolute;
right: 0;
top: 15px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
&.opened:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
}
}
.logo_close_button {
display: flex;
height: 42px;
margin-bottom: 37px;
.logo {
flex-grow: 1;
height: 42px;
a {
height: 100%;
padding: 0;
border-bottom: none;
img {
height: 100%;
}
}
}
.mobile_close_menu_button {
height: 30px;
width: 22.5px;
padding: 4px;
a {
font-size: 30px;
color: #1d2bb2;
padding: 0;
border-bottom: none;
}
}
}
.mobile_menu_container nav li.has_submenu {
&:after {
content: "\f054";
-webkit-transform: rotate(0);
transform: rotate(0);
transition: 0.6s ease;
}
&.opened:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}

7
resources/assets/sass/components/_page.scss vendored
View File

@@ -3,8 +3,11 @@
.page_container { .page_container {
@include container; @include container;
background-color: #fff; background-color: #fff;
width: CALC(100% - 270px); padding: 20px;
padding: 32px 135px; @media (min-width: 768px) {
width: CALC(100% - 270px);
padding: 32px 135px;
}
} }
.page_body { .page_body {
font-family: Nunito, serif; font-family: Nunito, serif;

5
resources/assets/sass/components/_sidebar.scss vendored
View File

@@ -1,3 +1,8 @@
.sidebar .box { .sidebar .box {
width: CALC(100% - 38px); width: CALC(100% - 38px);
} }
@media (max-width: 768px) {
.sidebar {
width: 100%;
}
}

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

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

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

@@ -7,11 +7,11 @@
@section('content') @section('content')
<div class="clearfix"> <div class="clearfix">
<div class="blog_grid"> <div class="blog_grid" data-snapto="{}">
{{-- Desktop --}} {{-- Desktop --}}
<div class="grid_view"> <div class="grid_view">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-4 col-md-6">
@if($item = current($news)) @if($item = current($news))
<div class="post large"> <div class="post large">
<a href="{{url($item->url)}}" title="{{$item->title}}"> <a href="{{url($item->url)}}" title="{{$item->title}}">
@@ -49,11 +49,49 @@
</div> </div>
</div> </div>
@endif @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>
<div class="col-6"> <div class="col-8 col-md-6">
<div class="row"> <div class="row">
@for($i = 0; ($i < 4) && ($item = next($news)); ++$i) @php(prev($news))
<div class="post small col-6"> @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}}"> <a href="{{url($item->url)}}" title="{{$item->title}}">
@if($item->video) @if($item->video)
<span class="icon video"></span> <span class="icon video"></span>
@@ -99,10 +137,10 @@
<div class="grey_background"> <div class="grey_background">
<div class="body_container row"> <div class="body_container row">
<div class="col-12"> <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 - - Advertentie -
</div> </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>
<div class="col-12 col-md content_container"> <div class="col-12 col-md content_container">
<div class="row"> <div class="row">
@@ -135,12 +173,12 @@
<h4 class="box_header"><span>Uitgelicht</span></h4> <h4 class="box_header"><span>Uitgelicht</span></h4>
<div class="box featured"> <div class="box featured">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-12 col-md-6">
<a href="{{$url}}" title="{{$podcast->title}}"> <a href="{{$url}}" title="{{$podcast->title}}">
<img src="{{$podcast->image && $podcast->image->url ? $imgBase . $podcast->image->url : '/images/noimage.png'}}"/> <img src="{{$podcast->image && $podcast->image->url ? $imgBase . $podcast->image->url : '/images/noimage.png'}}"/>
</a> </a>
</div> </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> <h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->title!!}</a></h2>
<div class="sub_title"> <div class="sub_title">
@if ($podcast->program) @if ($podcast->program)

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

@@ -38,22 +38,4 @@
<!--rss--> <!--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 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" /> <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> </head>

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

@@ -5,7 +5,6 @@
<html> <html>
@include('layouts._head') @include('layouts._head')
<body> <body>
<button style="position: fixed; top: 0; left: 0;display: none;" onclick="refreshCSS()">Refresh</button>
<!-- Google Tag Manager (noscript) --> <!-- Google Tag Manager (noscript) -->
<noscript> <noscript>
@@ -19,15 +18,42 @@
<div class="header_container small"> <div class="header_container small">
<div class="header clearfix"> <div class="header clearfix">
<div class="logo"> <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>
<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> </div>
<div class="menu_container sticky clearfix"> <div class="menu_container sticky clearfix">
<div class="top_menu_container"> <div class="top_menu_container d-none d-md-block">
<ul> <ul class="right_menu">
<li> <li>
<a href="{{url('contact')}}">Tip de redactie <i class="fa-solid fa-circle-plus"></i></a> <a href="{{url('contact')}}">Tip de redactie <i class="fa-solid fa-circle-plus"></i></a>
</li> </li>
@@ -36,7 +62,8 @@
<form class="search_form" action="{{url($searchURL)}}"> <form class="search_form" action="{{url($searchURL)}}">
<input type="text" name="query" placeholder="Zoeken..." <input type="text" name="query" placeholder="Zoeken..."
value="{{isset($query) ? $query : null}}" class="search_input"> 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> </form>
<a href="#" class="search_button"><i class="fa-solid fa-magnifying-glass"></i><i <a href="#" class="search_button"><i class="fa-solid fa-magnifying-glass"></i><i
style="display: none" class="fa-solid fa-xmark"></i></a> style="display: none" class="fa-solid fa-xmark"></i></a>
@@ -67,7 +94,7 @@
<div class="footer_container"> <div class="footer_container">
<div class="footer_menu"> <div class="footer_menu">
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4 class="box_header"><span>NH Gooi</span></h4> <h4 class="box_header"><span>NH Gooi</span></h4>
<p class="about"> <p class="about">
<b>NH Gooi</b> is de streekomroep voor het Gooi in samenwerking met NH Media. <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> <a href="{{url('frequenties')}}">Alle frequenties / kanalen.</a>
</p> </p>
</div> </div>
<div class="col-3"> <div class="col-12 col-md-3">
<h4 class="box_header"><span>Contact</span></h4> <h4 class="box_header"><span>Contact</span></h4>
<p class="buttons"> <p class="buttons">
<a href="{{url('contact')}}">Contactgegevens</a> <a href="{{url('contact')}}">Contactgegevens</a>
@@ -85,7 +112,7 @@
<a href="https://nhnieuws.nl/" target="_blank">NH Nieuws</a> <a href="https://nhnieuws.nl/" target="_blank">NH Nieuws</a>
</p> </p>
</div> </div>
<div class="col-3"> <div class="col-12 col-md-3">
<h4 class="box_header"><span>Kijk & luister</span></h4> <h4 class="box_header"><span>Kijk & luister</span></h4>
<p class="buttons"> <p class="buttons">
<a class="player" href="{{url('luister/live')}}">Luister live</a> <a class="player" href="{{url('luister/live')}}">Luister live</a>
@@ -95,7 +122,7 @@
<a href="{{url('nieuws')}}">Nieuws</a> <a href="{{url('nieuws')}}">Nieuws</a>
</p> </p>
</div> </div>
<div class="col-3"> <div class="col-12 col-md-3">
<h4 class="box_header"><span>Radio</span></h4> <h4 class="box_header"><span>Radio</span></h4>
<p class="buttons"> <p class="buttons">
<a href="{{url('gids')}}">Programmagids</a> <a href="{{url('gids')}}">Programmagids</a>
@@ -113,11 +140,15 @@
<li><a href="{{url('cookie-statement')}}">Cookie statement</a></li> <li><a href="{{url('cookie-statement')}}">Cookie statement</a></li>
</ul> </ul>
<ul class="footer_social_media"> <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>
<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>
<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> </ul>
</div> </div>
</div> </div>

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

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

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

@@ -5,7 +5,7 @@
@if(isset($schedule[$day]) && $schedule[$day]) @if(isset($schedule[$day]) && $schedule[$day])
@foreach($schedule[$day] as $item) @foreach($schedule[$day] as $item)
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime'])) @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}}" <a class="box full-width" href="{{route('programma') . $item['program']->url}}"
title="{{$item['program']->name . ($item['program']->tagline ? "\n" . $item['program']->tagline : "")}}"> title="{{$item['program']->name . ($item['program']->tagline ? "\n" . $item['program']->tagline : "")}}">
<div class="program-title"> <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://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 src="https://cdn.jsdelivr.net/npm/air-datepicker@3.5.0/air-datepicker.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
new AirDatepicker('#custom_date', { var isMobile = window.screen.width <= 768;
var airdatepicker = new AirDatepicker('#custom_date', {
locale: { locale: {
days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'], days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'], daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
@@ -95,6 +96,7 @@ $margin = 2;
}, },
selectedDates: [new Date()], selectedDates: [new Date()],
autoClose: true, autoClose: true,
isMobile: isMobile,
onSelect: function onSelect(fd, date, inst) { onSelect: function onSelect(fd, date, inst) {
getCustomProgramDate(); 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> </script>
@endpush @endpush

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

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