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

New mobile header

Browse Source 
Add job pages
More news button on home page links to news page
Small mobile fixes for new page and other pages
This commit is contained in:
Jorit Tijsen
2024-04-03 16:38:10 +02:00
parent 249f7a7d4c
commit 4aa1fef3ad
27 changed files with 157 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/assets/js/functions/loadMoreNews.js vendored
View File

@@ -3,13 +3,13 @@
* @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
url: document.location.pathname,
nextPage: 2
};
$.extend(options, _options);
@@ -26,7 +26,7 @@
var $container = $(options.container)
// Fire request for the next page
$.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + nextPage})
$.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage})
.always(function () {
// Whether success or failure, update the UI again
isLoading = 0;
@@ -45,7 +45,7 @@
var id = this.toString();
$(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
});
++nextPage;
++options.nextPage;
});
}
});

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

@@ -19,8 +19,10 @@ body {
.header_container {
@include container;
}
.grey_background {
background-color: #f9f9f9;
@media (min-width: 768px) {
.grey_background {
background-color: #f9f9f9;
}
}
.content_container {
padding-right: 50px;

4
resources/assets/sass/components/_blog.scss vendored
View File

@@ -6,7 +6,9 @@
.post {
margin-bottom: 27px;
height: 90px;
&:not(.auto_height) {
height: 90px;
}
img {
width: 100%;

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

@@ -28,20 +28,33 @@
.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: $element-bg;
margin-bottom: 50px;
@media (min-width: 768px) {
border-radius: 3px;
box-shadow: 0 0 15px 0 rgba(35, 31, 32, 0.1);
padding: 30px 23px 30px 30px;
}
@media (max-width: 768px) {
padding: 10px 10px 10px 10px;
}
&.full-width {
width: CALC(100% - 60px);
@media (min-width: 768px) {
width: CALC(100% - 60px);
}
@media (max-width: 768px) {
width: CALC(100% - 20px);
}
}
&.full-height {
height: CALC(100% - 103px);
}
&.margin_top {
margin-top: 80px;
@media (min-width: 768px) {
&.md_margin_top {
margin-top: 77px;
}
}
}
.tabs {

6
resources/assets/sass/components/_bread_crumb.scss vendored
View File

@@ -19,5 +19,11 @@
i {
font-size: 8px;
}
@media (max-width: 768px) {
&:nth-last-child(-n+2) {
display: none;
}
}
}
}

4
resources/assets/sass/components/_button.scss vendored
View File

@@ -16,6 +16,10 @@
text-decoration: none;
text-transform: uppercase;
&:hover, &:active {
color: $text-inverted-color;
}
&.auto_width {
width: fit-content;
margin: 0 auto;

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

@@ -183,16 +183,14 @@
}
}
.menu_mobile_container {
height: 30px;
height: 46px;
padding: 12px 0;
background-color: #10229c;
.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;
@@ -213,9 +211,18 @@
flex-grow: 1;
ul.right_menu {
li {
padding: 5px 19px;
padding: 0 10px;
margin: 0;
a.with_svg_icon {
margin-right: 10px;
}
a {
svg {
position: static;
}
}
.search_form {
height: 25px;
.search_input {

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

@@ -3,7 +3,10 @@
.page_title {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-size: 30px;
@media (min-width: 768px) {
font-size: 40px;
}
font-weight: 600;
line-height: 1.15;
text-align: left;

4
resources/assets/sass/components/_post.scss vendored
View File

@@ -3,7 +3,9 @@
.post_container {
@include container;
padding: 32px 0;
@media (min-width: 768px) {
padding: 32px 0;
}
> .col-8 {
width: CALC(66.66666667% - 20px);

2
resources/assets/sass/layout/_index.scss vendored
View File

@@ -1,6 +1,6 @@
@forward 'header';
@forward 'home';
@forward 'news_post';
@forward 'news';
@forward 'post';
@forward 'gids';
@forward 'program';

7
resources/assets/sass/layout/_news.scss vendored Normal file
View File

@@ -0,0 +1,7 @@
@use "../components/news_post";
.news {
.blog .post {
height: 115px;
}
}

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

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

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

@@ -160,9 +160,7 @@
</div>
<div class="row mb-4">
<div class="col-12">
<a class="btn auto_width" id="meer-nieuws" href="#"
data-loadmorenews='{"container":["#items-more-news", "#items-most-read"], "url": "/nieuws"}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
<a class="btn auto_width" id="meer-nieuws" href="{{route('nieuws')}}">
Klik hier voor meer nieuws
</a>
</div>

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

@@ -15,10 +15,10 @@
@endsection
@section('page_class')
news_post post_container
grey_background
@endsection
@section('container_class')
grey_background
news_post post_container
@endsection

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

@@ -13,10 +13,10 @@
@endsection
@section('page_class')
news_post post_container
grey_background
@endsection
@section('container_class')
grey_background
news_post post_container
@endsection
@section('content')

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

@@ -29,18 +29,16 @@
<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-slogan.svg"/></a>
<a href="{{url('/')}}"><img src="/images/logo-NHGooi-slogan-diap.svg"/></a>
</div>
<div class="right_menu_container">
<ul class="right_menu">
<li>
<a class="player with_svg_icon" href="{{url('luister/live')}}">{!!file_get_contents(__DIR__ . '/../../../public/images/icons/radio.svg')!!}</a>
<a class="player" href="{{url('kijk/studio')}}">{!!file_get_contents(__DIR__ . '/../../../public/images/icons/television-2.svg')!!}</a>
</li>
<li>
<a class="player with_svg_icon" href="{{url('kijk/studio')}}">{!!file_get_contents(__DIR__ . '/../../../public/images/icons/television-2.svg')!!}</a>
</li>
<li>
<a href="https://wa.me/088-8505651">Tip <i class="fa-solid fa-circle-plus"></i></a>
<a href="https://wa.me/31888505651" target="_blank">Tip <i class="fa-solid fa-circle-plus"></i></a>
</li>
@if(isset($searchURL))
<li>
@@ -88,7 +86,7 @@
<!-- Content -->
<div class="page">
<div class="page @yield('page_class')">
<a name="top"></a>
@if($activeBlog != null)
<p style="float: left; border: solid 1px #1f3977; border-radius: 10px; padding: 0 10px 0.4em 10px; margin: 10px 0 10px 0; width: 100%;">
@@ -156,9 +154,6 @@
<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>
</ul>
</div>
</div>

2
resources/views/layouts/sidebar.blade.php
View File

@@ -4,7 +4,7 @@
<div class="@yield('container_class')">
<div class="row @yield('page_class')">
<div class="col-12 col-md content_container">
<div class="box full-width margin_top">
<div class="box full-width md_margin_top">
@yield('breadcrumb')
@yield('tags')
<h1 class="page_title">@yield('title')</h1>

7
resources/views/news.blade.php
View File

@@ -4,6 +4,9 @@
NH Gooi - Nieuws
@endsection
@section('page_class')
news
@endsection
@section('content')
<div class="clearfix">
@@ -21,14 +24,14 @@
<div class="col-md-12 col-12">
<h4 class="box_header"><span>Meer nieuws</span></h4>
<div class="box">
@include('partial/newslist_small', ['id' => 'items-more-news', 'news' => array_slice($news, 5, 5)])
@include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $news])
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<a class="btn auto_width" id="meer-nieuws" href="#"
data-loadmorenews='{"container":["#items-more-news"]}'>
data-loadmorenews='{"container":["#items-more-news"], "nextPage":3}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Klik hier voor meer nieuws
</a>

6
resources/views/newsitem.blade.php
View File

@@ -160,12 +160,6 @@
Deel op Facebook
</a>
</div>
<div class="col-12 col-md-auto">
<a data-share="twitter_x" href="javascript:void(0)" class="btn btn_twitter_x_share">
<i class="fa-brands fa-twitter"></i>
Deel op Twitter
</a>
</div>
</div>
</div>
</div>

2
resources/views/newslist.blade.php
View File

@@ -34,7 +34,7 @@
@endif
<div class="column column_1_2">
<ul class="blog">
<li class="post">
<li class="post auto_height">
<a href="{{url($item->url)}}" title="{{$item->title}}">
@if($item->video)
<span class="icon video"></span>

2
resources/views/podcastitem.blade.php
View File

@@ -90,7 +90,7 @@
<div class="">
<div class="row news_post">
<div class="col-12 col-md content_container">
<div class="box full-width post single small_image margin_top">
<div class="box full-width post single small_image md_margin_top">
<h1 class="page_title">{{$podcast->title}}</h1>
<div class="post_body">
<ul class="post_details clearfix">

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

@@ -29,7 +29,7 @@
"Over NH Gooi" => array(
"" => "/contact",
"Contact" => "/contact",
// "Vacatures" => "/vacatures",
"Vacatures" => "/vacatures",
"Klachtenregeling" => "/klachten",
"Uitgangspunten streekredactie" => "/uploads/Eigen rol en ambities NH Gooi binnen de lokale nieuwsvoorziening.pdf",
"Frequenties" => "/frequenties",

4
resources/views/widgets/nustraks.blade.php
View File

@@ -39,8 +39,8 @@
<div class="sub_title">
<a class="program_name" href="{{route('programma') . $recent->url}}" title="{{$recent->name}}"><strong>{{$recent->name}}</strong></a>
<span class="post_date" title="{{Formatter::relativeDate($recent->start)}} om {{$recent->start->format('H:i')}}.">
<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($recent->start)}} om {{$recent->start->format('H:i')}}.
</span>
<i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($recent->start)}} om {{$recent->start->format('H:i')}}.
</span>
</div>
</li>
</ul>