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

Home page and news page are finished

Browse Source
This commit is contained in:
Jorit Tijsen
2024-03-13 12:37:09 +01:00
parent 55aa88c0f6
commit 2895ba283b
58 changed files with 3713 additions and 31764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
resources/assets/js/functions/loadMoreNews.js vendored Normal file
View File

@@ -0,0 +1,60 @@
(function ($) {
/**
* @param {object} _options
*/
$.fn.loadMoreNews = function (_options) {
var nextPage = 2;
var isLoading = false;
var page = 1;
var options = {
loadingElementId: '#loading',
container: '',
url: document.location.pathname
};
$.extend(options, _options);
var $isLoading = $(options.loadingElementId, this);
$isLoading.hide();
this.click(function (e) {
e.preventDefault();
if (!isLoading) {
// Set flag and update UI
isLoading = 1;
$isLoading.show();
var $button = $(this).attr("disabled", "disabled");
var $container = $(options.container)
// Fire request for the next page
$.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + nextPage})
.always(function () {
// Whether success or failure, update the UI again
isLoading = 0;
$isLoading.hide();
$button.removeAttr("disabled");
})
.done(function (data) {
if (!data) {
// When no data was returned, disable the button permanently
page = -1;
$button.attr("disabled", "disabled").text("Geen nieuws meer.");
return;
}
$container.each(function () {
var id = this.toString();
$(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
});
++nextPage;
});
}
});
};
}(jQuery));
$(function () {
$('[data-loadmorenews]').each(function () {
$(this).loadMoreNews($(this).data('loadmorenews'));
});
});

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

@@ -0,0 +1,41 @@
(function ($) {
/**
* @param {object} _options
*/
$.fn.menu = function (_options) {
var options = {
menuSubmenuClass: 'has_submenu'
};
$.extend(options, _options);
var $menus = $(this).children('.' + options.menuSubmenuClass);
var $container = $(this);
$menus.on( "mouseenter", function () {
var $menuItem = $(this);
$('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
$('.hover', $container).removeClass('hover');
$menuItem.addClass('hover');
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();
submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
submenu.on( "mouseleave", function(){
$('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
$menuItem.removeClass('hover');
} );
$('body').append(submenu);
submenu.children('ul.submenu').slideDown();
submenu.find('ul.submenu li.has_submenu').click(function(){
$(this).find('ul.submenu').slideToggle();
$(this).toggleClass('opened');
});
openPlayerInNewScreen();
});
};
}(jQuery));
$(function () {
$('.menu, .mobile-menu').menu({});
});

31
resources/assets/js/functions/tabs.js vendored Normal file
View File

@@ -0,0 +1,31 @@
(function ($) {
/**
* @param {object} _options
*/
$.fn.tabs = function (_options) {
var options = {
tabClass: 'box_header',
activeClass: 'active',
contentClass: 'tab_content'
};
$.extend(options, _options);
var $tabs = $(this).find('.' + options.tabClass);
var $container = $(this);
$tabs.click(function (e) {
e.preventDefault();
$tabs.removeClass(options.activeClass);
$container.find('.' + options.contentClass).removeClass(options.activeClass);
$container.find('#' + $(this).data('tab-content-id')).addClass(options.activeClass);
$(this).addClass(options.activeClass);
});
};
}(jQuery));
$(function () {
$('[data-tabs]').each(function () {
$(this).tabs($(this).data('tabs') ?? {});
});
});

2
resources/assets/sass/abstracts/_fonts.scss vendored
View File

@@ -1 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap')

55
resources/assets/sass/abstracts/_mixin.scss vendored Normal file
View File

@@ -0,0 +1,55 @@
@use "variables" as *;
@mixin reset-list {
margin: 0;
padding: 0;
list-style: none;
}
@mixin post_date {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@mixin read_more_link {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
color: #0f259d;
text-transform: uppercase;
}
@mixin program_name {
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #000;
margin-right: 10px;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@mixin sub_title {
width: 100%;
display: flex;
.program_name {
@include program_name;
}
.post_date {
@include post_date;
}
}

3
resources/assets/sass/abstracts/_variables.scss vendored
View File

@@ -41,3 +41,6 @@ $panel-default-heading-bg: #fff;
$nav-text-color: #1a1a1a;
$nav-text-weight: bold;
$nav-text-size: 14px;
// News
$news-banner-text-color: #fff;

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

@@ -1,6 +1,6 @@
@use "../abstracts/fonts";
@use "clearfix";
@use "container";
@use "../components/button";
@use "../layout/header";
@use "../components/main_news";
@use "../layout";

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

@@ -2,3 +2,8 @@
max-width: 1440px;
margin: 0 auto;
}
.body_container {
padding: 67px 135px;
background-color: #f9f9f9;
margin: 0;
}

36
resources/assets/sass/components/_blog.scss vendored Normal file
View File

@@ -0,0 +1,36 @@
@use "../abstracts/mixin" as *;
.blog {
@include reset-list;
.post {
margin-bottom: 27px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
h2 {
margin: 0;
a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
text-decoration: none;
display: inline-block;
}
}
.col-8 {
padding: 0;
}
.post_date {
@include post_date;
}
}
}

58
resources/assets/sass/components/_box.scss vendored Normal file
View File

@@ -0,0 +1,58 @@
.box_header {
span {
font-family: Nunito, serif;
font-size: 20px;
font-weight: bold;
color: #0f259d;
border-bottom: 3px solid #0f259d;
display: inline-block;
text-transform: uppercase;
height: 30px;
}
border-bottom: 1px solid #efefef;
}
.box {
display: inline-block;
width: auto;
padding: 30px 23px 30px 30px;
border-radius: 3px;
box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
background-color: #fff;
margin-bottom: 50px;
&.full-width {
width: CALC(100% - 60px);
}
}
.tabs {
display: flex;
justify-content: space-between;
.box_header {
span {
color: #999;
border-bottom: none;
cursor: pointer;
}
&.small span {
font-size: 13px;
}
&.medium span {
font-size: 18px;
}
&.active, &:hover {
span {
color: #0f259d;
border-bottom: 3px solid #0f259d;
}
}
}
}
.tab_content {
display: none;
&.active {
display: block;
}
}

21
resources/assets/sass/components/_button.scss vendored Normal file
View File

@@ -0,0 +1,21 @@
.btn {
display: block;
width: CALC(100% - 78px);
padding: 10px 39px 10px 39px;
border-radius: 3px;
background-image: linear-gradient(to right, #0f259d, #5ba8f4);
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
line-height: 0.93;
text-align: center;
color: #fff;
margin-bottom: 10px;
text-decoration: none;
text-transform: uppercase;
&.auto_width {
width: fit-content;
margin: 0 auto;
}
}

32
resources/assets/sass/components/_contact_box.scss vendored Normal file
View File

@@ -0,0 +1,32 @@
@use "../abstracts/mixin" as *;
.contact_box {
position: relative;
.logo-whatsapp {
position: absolute;
right: 0;
top: 0;
}
h2 {
font-family: Montserrat, serif;
font-size: 24px;
font-weight: 600;
line-height: 1.17;
color: #282828;
margin-top: 0;
padding-right: 60px;
}
p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
color: #666;
}
.read_more {
@include read_more_link;
}
}

33
resources/assets/sass/components/_featured.scss vendored Normal file
View File

@@ -0,0 +1,33 @@
@use "../abstracts/mixin" as *;
.featured {
img {
width: 100%;
}
h2 {
margin: 0;
a {
font-family: Montserrat, serif;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
text-align: left;
color: #1a1a1a;
text-decoration: none;
}
}
.sub_title {
@include sub_title;
}
p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
text-align: left;
color: #666;
margin: 10px 0;
}
}

105
resources/assets/sass/components/_footer.scss vendored Normal file
View File

@@ -0,0 +1,105 @@
@use "../abstracts/mixin" as *;
.footer_container {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.71;
text-align: left;
color: #fff;
.footer_menu {
padding: 61px 135px 38px 134px;
background-image: linear-gradient(to right, #0102b0, #4090e3);
.row:first-child {
padding-bottom: 70px;
margin-bottom: 34px;
border-bottom: 1px solid #fff;
}
a {
color: #fff;
text-decoration: none;
display: block;
width: 100%;
}
.buttons a {
text-transform: uppercase;
margin-bottom: 10px;
}
.box_header {
border-bottom: 1px solid #fff;
span {
border-bottom: 3px solid #fff;
color: #fff;
font-size: 14px;
}
}
}
.copyright {
padding: 20px;
background-color: #0f259d;
text-align: center;
position: relative;
.scroll_top {
position: absolute;
right: 30px;
top: -19px;
width: 38px;
height: 38px;
background-color: #5ba8f4;
color: #fff;
text-decoration: none;
line-height: 40px;
border-radius: 5px;
}
}
.footer_menu2 {
@include reset-list;
li {
float: left;
margin-right: 40px;
a {
text-decoration: underline;
}
}
}
.footer_social_media {
float: right;
@include reset-list;
li {
float: left;
margin: 4px;
a {
display: block;
width: 34px;
height: 34px;
border-radius: 5px;
text-align: center;
line-height: 37px;
&.facebook {
background-color: #0f259d;
}
&.twitter-x {
background-color: #5ba8f4;
}
&.youtube {
background-color: #e73323;
}
}
}
}
}

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

@@ -3,6 +3,7 @@
}
.header .logo {
margin-left: 135px;
float: left;
}
.header .logo img {
height: 75px;

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

@@ -1,9 +1,73 @@
@use "../abstracts/mixin" as *;
@use "../abstracts/variables" as *;
.blog_grid {
img {
max-width: 100%;
}
.row, .row > * {
padding: 0;
margin: 0;
}
.row {
height: 100%;
}
.post {
position: relative;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(50%);
}
&.small {
height: 50%;
}
.slider_content_box {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
.post_details {
@include reset-list;
.category a {
padding: 6px 11px 7px;
border-radius: 3px;
background-image: linear-gradient(to right, #0d1ca3, #45aaf8);
font-family: Nunito, serif;
font-size: 10px;
font-weight: bold;
text-align: center;
color: $news-banner-text-color;
text-decoration: none;
text-transform: uppercase;
}
}
h2, h5 {
margin: 15px 0 0 0;
}
h2 a, h5 a {
font-family: Montserrat, serif;
font-size: 30px;
font-weight: 600;
line-height: 1;
color: $news-banner-text-color;
text-decoration: none;
}
h5 a {
font-size: 16px;
line-height: 1.17;
}
.post_date {
@include post_date;
color: $news-banner-text-color;
}
}
}
}

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

@@ -1,4 +1,5 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixin" as *;
.menu_container {
height: 75px;
@@ -6,15 +7,19 @@
background-image: linear-gradient(to right, #0102b0, #4090e3);
.menu {
list-style-type: none;
padding: 0;
margin: 0;
@include reset-list;
overflow: hidden;
position: relative;
z-index: 0;
margin: 0px -1px;
li {
> li {
float: left;
margin: 0px -1px;
&.has_submenu {
position: relative;
}
ul {
display: none;
@@ -32,7 +37,7 @@
background: white;
}
&.selected a, &:hover a {
&.selected a, &:hover a, &.hover a {
color: white;
background: transparent;
position: relative;
@@ -52,8 +57,8 @@
&:after {
content: '';
display: block;
width: 10px;
height: 12px;
width: 12px;
height: 15px;
background-image: URL('/images/menu-corner-2.svg');
position: absolute;
bottom: 0;
@@ -66,7 +71,7 @@
width: 135px;
display: block;
background: white;
height: 25px;
height: 29px;
}
&:last-child {
@@ -88,4 +93,110 @@
}
.top_menu_container {
height: 50px;
ul {
float: right;
@include reset-list;
li {
float: left;
padding: 6px 19px;
margin: 8px;
border-right: 1px solid #fff;
&:last-child {
border: none;
}
a {
float: left;
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
text-align: right;
color: #fff;
text-decoration: none;
text-transform: uppercase;
i {
font-size: 18px;
position: relative;
top: 2px;
margin-left: 5px;
}
}
.search_form {
float: left;
overflow: hidden;
height: 21px;
margin-right: 10px;
}
}
}
}
.menu-submenu {
position: absolute;
> a {
display: block;
height: 30px;
}
ul {
@include reset-list;
a {
display: block;
font-family: Nunito, serif;
font-size: 14px;
font-weight: bold;
color: #1a1a1a;
text-decoration: none;
padding: 15px 0;
border-bottom: 1px solid #f8f8f8;
}
}
> ul {
padding: 20px;
border-radius: 3px;
box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
background-color: #fff;
margin-left: 20px;
width: max-content;
display: none;
li {
ul {
display: none;
li {
padding-left: 10px;
}
}
}
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);
}
}
}
}

0
resources/assets/sass/components/_news_post.scss vendored Normal file
View File

28
resources/assets/sass/components/_now-playing.scss vendored
View File

@@ -33,17 +33,25 @@
padding: 3px;
width: 100%;
li {
display: inline-block;
ul {
margin: 0;
a {
line-height: 120%;
font-size: 80%;
color: #ABABAB;
display: block;
padding: 4px;
margin-left: 5px;
margin-right: 5px;
li {
display: inline-block;
a {
line-height: 120%;
font-size: 80%;
color: #ABABAB;
display: block;
padding: 4px;
margin-left: 5px;
margin-right: 5px;
label {
cursor: pointer;
}
}
}
}
}

28
resources/assets/sass/components/_podcast_items.scss vendored Normal file
View File

@@ -0,0 +1,28 @@
@use "../abstracts/mixin" as *;
.podcast_items {
ul {
@include reset-list;
li {
margin-bottom: 25px;
h2 {
margin: 0;
a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
text-align: left;
color: #1a1a1a;
text-decoration: none;
}
}
.sub_title {
@include sub_title;
}
}
}
}

162
resources/assets/sass/components/_post.scss vendored Normal file
View File

@@ -0,0 +1,162 @@
@use "../abstracts/mixin" as *;
.post_container {
padding: 40px 135px;
background-color: #f9f9f9;
margin: 0;
> .col-8 {
width: CALC(66.66666667% - 50px);
margin-right: 50px;
}
.bread_crumb {
height: 38px;
@include reset-list;
border-bottom: 1px solid #efefef;
padding-bottom: 18px;
li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
a {
color: #666;
text-decoration: none;
}
i {
font-size: 8px;
}
}
}
.post_tags {
@include reset-list;
height: 31px;
margin-top: 20px;
li {
float: left;
margin-right: 10px;
a {
display: block;
padding: 6px 15px 7px;
border-radius: 3px;
background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
font-family: Nunito, serif;
font-size: 10px;
font-weight: bold;
text-align: center;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
}
}
h1 {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.post_body {
width: 100%;
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
h3 {
font-size: 15px;
}
.sentence {
font-size: 12px;
font-style: italic;
line-height: 3.17;
text-align: right;
color: #585858;
display: block;
width: 100%;
span {
padding: 0 5px;
}
}
blockquote {
border-left: 3px solid #5ba8f4;
margin-left: 0;
padding-left: 20px;
font-family: Lato, serif;
font-size: 30px;
font-style: italic;
line-height: 1.27;
color: #5ba8f4;
.author {
font-family: Nunito, serif;
font-size: 12px;
font-style: normal;
line-height: 3.17;
color: #585858;
}
}
.post_details {
@include reset-list;
li {
float: left;
margin-right: 10px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
color: #666;
a {
color: #666;
text-decoration: none;
}
i {
margin-right: 4px;
}
}
}
.post_image img, video, .mejs__video {
width: CALC(100% + 53px);
margin: 0 -23px 0 -30px;
}
.mejs__video, video {
width: CALC(100% + 53px) !important;
}
}
.info {
padding: 1em;
color: #3E3E3E;
line-height: 150%;
border-radius: 10px;
margin: 1em;
h2 {
text-overflow: ellipsis;
overflow: hidden;
margin-top: 3px;
clear: both;
}
a {
color: #ED1C24;
}
}
}

28
resources/assets/sass/components/_radio_box.scss vendored Normal file
View File

@@ -0,0 +1,28 @@
@use "../abstracts/mixin" as *;
.radio_box {
padding: 15px 23px 15px 15px;
width: CALC(100% - 38px);
h2 {
font-family: Montserrat, serif;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
color: #1a1a1a;
}
.post_date {
@include post_date;
}
p {
font-family: Nunito, serif;
font-size: 14px;
font-weight: 500;
line-height: 1.57;
text-align: left;
color: #666;
}
}

3
resources/assets/sass/components/_sidebar.scss vendored Normal file
View File

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

1
resources/assets/sass/layout/_footer.scss vendored Normal file
View File

@@ -0,0 +1 @@
@use "../components/footer";

8
resources/assets/sass/layout/_home.scss vendored Normal file
View File

@@ -0,0 +1,8 @@
@use "../components/main_news";
@use "../components/box";
@use "../components/blog";
@use "../components/sidebar";
@use "../components/radio_box";
@use "../components/contact_box";
@use "../components/featured";
@use "../components/podcast_items";

5
resources/assets/sass/layout/_index.scss vendored Normal file
View File

@@ -0,0 +1,5 @@
@forward 'header';
@forward 'home';
@forward 'news_post';
@forward 'post';
@forward 'footer';

1
resources/assets/sass/layout/_news_post.scss vendored Normal file
View File

@@ -0,0 +1 @@
@use "../components/news_post";

1
resources/assets/sass/layout/_post.scss vendored Normal file
View File

@@ -0,0 +1 @@
@use "../components/post";