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

Style the job pages

Browse Source 
Style the image page
Small fixes
This commit is contained in:
Jorit Tijsen
2024-03-22 15:44:34 +01:00
parent 1d94e7da7f
commit 6041398e10
23 changed files with 608 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/Http/Controllers/JobsController.php
View File

@@ -6,19 +6,19 @@ use Illuminate\Http\Request;
use \Model\JobOpening; use \Model\JobOpening;
class JobsController extends Controller class JobsController extends Controller
{ {
private static function TimestampToDateTime($timestamp) { private static function TimestampToDateTime($timestamp) {
$result = new \DateTime; $result = new \DateTime;
$result->setTimestamp($timestamp); $result->setTimestamp($timestamp);
return $result; return $result;
} }
public function show(Request $request, $id) public function show(Request $request, $id)
{ {
parent::registerView($request, 'nieuws', $id); parent::registerView($request, 'nieuws', $id);
$apiResult = $this->API('vacatures/details/' . $id); $apiResult = $this->API('vacatures/details/' . $id);
$jobsItem = new \Model\JobOpening($apiResult->item); $jobsItem = new \Model\JobOpening($apiResult->item);
return view('jobsitem', ['job' => $jobsItem, 'metadata' => $jobsItem->metadata]); return view('jobsitem', array_merge($this->getSidebareData(), ['job' => $jobsItem, 'metadata' => $jobsItem->metadata]));
} }
public function overview(Request $request) public function overview(Request $request)
@@ -36,10 +36,10 @@ class JobsController extends Controller
$jobs[] = new \Model\JobOpening($jobsItem); $jobs[] = new \Model\JobOpening($jobsItem);
} }
return view('jobslist', ['title' => $title, 'jobs' => $jobs]); return view('jobslist', array_merge($this->getSidebareData(), ['title' => $title, 'jobs' => $jobs]));
//return view($request->ajax() ? 'partial/jobslist_small' : ($title == null ? 'home' : 'jobslist'), ['title' => $title, 'jobs' => $jobs, 'searchURL' => 'vacatures/zoeken']); //return view($request->ajax() ? 'partial/jobslist_small' : ($title == null ? 'home' : 'jobslist'), ['title' => $title, 'jobs' => $jobs, 'searchURL' => 'vacatures/zoeken']);
} }
public function bijeenkomst() { public function bijeenkomst() {
return view('kennismakingsbijeenkomst', ['a' => 2]); return view('kennismakingsbijeenkomst', ['a' => 2]);
} }

56
public/css/style.css vendored
View File

@@ -145,6 +145,12 @@ div.pp_default .pp_close:hover {
color: #282828; color: #282828;
} }
.list {
margin: 0;
padding: 0;
list-style: none;
}
.header { .header {
height: 110px; height: 110px;
} }
@@ -690,11 +696,11 @@ div.pp_default .pp_close:hover {
} }
.blog_grid .post .slider_content_box .post_date { .blog_grid .post .slider_content_box .post_date {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #666; color: #666;
display: block; display: block;
height: 30px; height: 30px;
@@ -740,6 +746,9 @@ div.pp_default .pp_close:hover {
.box.full-width { .box.full-width {
width: calc(100% - 60px); width: calc(100% - 60px);
} }
.box.margin_top {
margin-top: 80px;
}
.tabs { .tabs {
display: flex; display: flex;
@@ -815,11 +824,11 @@ div.pp_default .pp_close:hover {
} }
.blog .post .post_date { .blog .post .post_date {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #666; color: #666;
display: block; display: block;
height: 30px; height: 30px;
@@ -860,11 +869,11 @@ div.pp_default .pp_close:hover {
} }
.radio_box .post_date { .radio_box .post_date {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #666; color: #666;
display: block; display: block;
height: 30px; height: 30px;
@@ -943,11 +952,11 @@ div.pp_default .pp_close:hover {
} }
.featured .sub_title .program_name { .featured .sub_title .program_name {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #000; color: #000;
margin-right: 10px; margin-right: 10px;
text-decoration: none; text-decoration: none;
@@ -957,11 +966,11 @@ div.pp_default .pp_close:hover {
} }
.featured .sub_title .post_date { .featured .sub_title .post_date {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #666; color: #666;
display: block; display: block;
height: 30px; height: 30px;
@@ -1010,11 +1019,11 @@ div.pp_default .pp_close:hover {
} }
.podcast_items ul li .sub_title .program_name { .podcast_items ul li .sub_title .program_name {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #000; color: #000;
margin-right: 10px; margin-right: 10px;
text-decoration: none; text-decoration: none;
@@ -1024,11 +1033,11 @@ div.pp_default .pp_close:hover {
} }
.podcast_items ul li .sub_title .post_date { .podcast_items ul li .sub_title .post_date {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #666; color: #666;
display: block; display: block;
height: 30px; height: 30px;
@@ -1046,11 +1055,11 @@ div.pp_default .pp_close:hover {
.bread_crumb li { .bread_crumb li {
float: left; float: left;
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #666; color: #666;
margin-right: 5px; margin-right: 5px;
} }
@@ -1157,11 +1166,11 @@ div.pp_default .pp_close:hover {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #666; color: #666;
} }
.post_container .post_body .post_details li a { .post_container .post_body .post_details li a {
@@ -1207,11 +1216,11 @@ div.pp_default .pp_close:hover {
} }
#schedule .program-times { #schedule .program-times {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
font-size: 12px;
color: #666; color: #666;
display: block; display: block;
height: 30px; height: 30px;
@@ -1251,8 +1260,18 @@ div.pp_default .pp_close:hover {
line-height: 1.6; line-height: 1.6;
color: #282828; color: #282828;
} }
.page_body.margin_bottom {
margin-bottom: 40px;
}
.action_button { .action_button {
font-family: Nunito, serif;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
font-size: 14px;
line-height: 1.4;
text-decoration: none; text-decoration: none;
color: #282828; color: #282828;
} }
@@ -1284,6 +1303,18 @@ div.pp_default .pp_close:hover {
color: #1a1a1a; color: #1a1a1a;
} }
.text_input, .texterea_input {
padding: 13px 5px;
font-family: Montserrat, serif;
font-size: 14px;
font-weight: normal;
line-height: 1.25;
color: #1a1a1a;
border: 1px solid #efefef;
border-radius: 5px;
background-color: #fff;
}
.announcement { .announcement {
padding: 30px; padding: 30px;
border-radius: 3px; border-radius: 3px;
@@ -1308,6 +1339,7 @@ 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);
padding: 15px 0;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.footer_container .footer_menu { .footer_container .footer_menu {
@@ -1461,4 +1493,8 @@ div.pp_default .pp_close:hover {
-webkit-line-clamp: 10; -webkit-line-clamp: 10;
} }
a, a:hover, a:active {
color: #0f259d;
}
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

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

File diff suppressed because one or more lines are too long

2
public/css/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

11
resources/assets/sass/abstracts/_mixin.scss vendored
View File

@@ -9,14 +9,21 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
@mixin font_small { @mixin font_base {
font-family: Nunito, serif; font-family: Nunito, serif;
font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 3.17; line-height: 3.17;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
} }
@mixin font_normal {
@include font_base;
font-size: 14px;
}
@mixin font_small {
@include font_base;
font-size: 12px;
}
@mixin post_date { @mixin post_date {
@include font_small; @include font_small;
color: $text-secondary-color; color: $text-secondary-color;

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

@@ -4,6 +4,7 @@
@use "../components/button"; @use "../components/button";
@use "../components/pretty_photo"; @use "../components/pretty_photo";
@use "../components/cookie"; @use "../components/cookie";
@use "../components/list";
@use "../layout"; @use "../layout";
@@ -24,3 +25,7 @@
-webkit-line-clamp: $i; -webkit-line-clamp: $i;
} }
} }
a, a:hover, a:active {
color: #0f259d;
}

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

@@ -37,6 +37,9 @@
&.full-width { &.full-width {
width: CALC(100% - 60px); width: CALC(100% - 60px);
} }
&.margin_top {
margin-top: 80px;
}
} }
.tabs { .tabs {
display: flex; display: flex;

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

@@ -11,6 +11,7 @@
.footer_menu { .footer_menu {
background-image: linear-gradient(to right, #0102b0, #4090e3); background-image: linear-gradient(to right, #0102b0, #4090e3);
padding: 15px 0;
@media (max-width: 768px) { @media (max-width: 768px) {
padding: 60px 30px 30px 30px; padding: 60px 30px 30px 30px;
} }

12
resources/assets/sass/components/_input.scss vendored
View File

@@ -27,3 +27,15 @@
color: $text-color; color: $text-color;
} }
} }
.text_input, .texterea_input {
padding: 13px 5px;
font-family: Montserrat, serif;
font-size: 14px;
font-weight: normal;
line-height: 1.25;
color: $text-color;
border: 1px solid #efefef;
border-radius: 5px;
background-color: $element-bg;
}

4
resources/assets/sass/components/_list.scss vendored Normal file
View File

@@ -0,0 +1,4 @@
@use '../abstracts/mixin' as *;
.list {
@include reset-list;
}

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

@@ -15,8 +15,14 @@
font-size: 15px; font-size: 15px;
line-height: 1.6; line-height: 1.6;
color: $text-dark-color; color: $text-dark-color;
&.margin_bottom {
margin-bottom: 40px;
}
} }
.action_button { .action_button {
@include font_normal;
line-height: 1.4;
text-decoration: none; text-decoration: none;
color: $text-dark-color; color: $text-dark-color;

35
resources/views/app.blade.php
View File

@@ -13,40 +13,25 @@
@endsection @endsection
@section('content') @section('content')
<div class="page_body"> <div class="page_body margin_bottom">
<p>Download de NH Gooi app via de App Store of Google Play.</p> <p>Download de NH Gooi app via de App Store of Google Play.</p>
<div class="row"> <div class="row">
<div class="col" style="margin-left: 0"> <div class="col" style="margin-left: 0">
<div class="animate fadeIn" data-anim-type="fadeIn"> <div class="icon_box icon_position_top no_border">
<div class="icon_box icon_position_top no_border"><a class="" <a class="" href="https://play.google.com/store/apps/details?id=nl.gooi.app">
href="https://play.google.com/store/apps/details?id=nl.gooi.app"> <img data-src="/images/googleplay.jpg" class="scale-with-grid" alt="Google Play Store"
<div class="image_wrapper"><img data-lazyloaded="1" data-src="/images/googleplay.jpg" width="318" height="100" src="/images/googleplay.jpg">
class="scale-with-grid litespeed-loaded" </a>
alt="Google Play Store" width="318" height="100"
src="/images/googleplay.jpg" data-was-processed="true">
<noscript><img src="/images/google.jpg" class="scale-with-grid" alt="Google Play Store"
width="318" height="100"/></noscript>
</div>
<div class="desc_wrapper"></div>
</a></div>
</div> </div>
</div> </div>
<div class="col" style="margin-left: 0"> <div class="col" style="margin-left: 0">
<div class="animate fadeIn" data-anim-type="fadeIn"> <div class="icon_box icon_position_top no_border">
<div class="icon_box icon_position_top no_border"><a class="" <a class="" href="https://apps.apple.com/nl/app/nh-gooi/id1585667560">
href="https://apps.apple.com/nl/app/nh-gooi/id1585667560"> <img class="scale-with-grid" alt="Apple Store" width="318" height="100" src="/images/apple.jpg">
<div class="image_wrapper"><img data-lazyloaded="1" data-src="/images/apple.jpg" </a>
class="scale-with-grid litespeed-loaded" alt="Apple Store"
width="318" height="100" src="/images/apple.jpg"
data-was-processed="true">
<noscript><img src="/images/apple.jpg" class="scale-with-grid" alt="Apple Store"
width="318" height="100"/></noscript>
</div>
<div class="desc_wrapper"></div>
</a></div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -14,7 +14,7 @@
@if(!count($events)) @if(!count($events))
@section('content') @section('content')
<div class="page_body"> <div class="page_body margin_bottom">
<p>Er zijn geen items in de regioagenda. Iets te melden? Mail het naar {{Html::mailto("info@nhgooi.nl")}} <p>Er zijn geen items in de regioagenda. Iets te melden? Mail het naar {{Html::mailto("info@nhgooi.nl")}}
.</p> .</p>
</div> </div>

117
resources/views/imageslist.blade.php
View File

@@ -1,74 +1,81 @@
@extends('layouts/full') @extends('layouts/full')
@section('title') @section('title')
@if($title) {{$title}} - Beelden @else Beelden @endif @if($title)
{{$title}} - Beelden
@else
Beelden
@endif
@endsection @endsection
@section('breadcrumb') @section('breadcrumb')
@if($title) @if($title)
<ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; "> <ul class="bread_crumb" style="margin-top: -10px; margin-bottom: 4px; ">
<li><a title="Beelden" href="{{route('beelden')}}">Beelden</a></li> <li><a title="Beelden" href="{{route('beelden')}}">Beelden</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li> <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>{{$title}}</li> <li>{{$title}}</li>
</ul> </ul>
@endif @endif
@endsection @endsection
@section('content') @section('content')
<p class='bouwmee'>Ook jouw foto op deze pagina? <a href="mailto:beelden@nhgooi.nl">Mail naar beelden@nhgooi.nl!</a></p> <div class="page_body margin_bottom">
<p class='bouwmee'>Ook jouw foto op deze pagina? <a href="mailto:beelden@nhgooi.nl">Mail naar
beelden@nhgooi.nl!</a></p>
<div id="items"> <div id="items">
@include('partial/imageslist_small', ['images' => $images]) @include('partial/imageslist_small', ['images' => $images])
</div> </div>
@if(count($images) >= 15) @if(count($images) >= 15)
<div> <div>
<button class="more page_margin_top" type="button" id='meer-beelden'> <button class="more page_margin_top" type="button" id='meer-beelden'>
<span class="fa-2x fas fa-spinner fa-spin" id="loading"></span> <span class="fa-2x fas fa-spinner fa-spin" id="loading"></span>
LAAD MEER BEELDEN LAAD MEER BEELDEN
</button> </button>
</div> </div>
@endif @endif
</div>
@endsection @endsection
@push('scripts') @push('scripts')
<script> <script>
var nextPage = 2; var nextPage = 2;
var isLoading = 0; var isLoading = 0;
var $isLoading = $('#loading').hide(); var $isLoading = $('#loading').hide();
$('#meer-beelden').click(function(e) { $('#meer-beelden').click(function (e) {
e.preventDefault(); e.preventDefault();
if(!isLoading) { if (!isLoading) {
// Set flag and update UI // Set flag and update UI
isLoading = 1; isLoading = 1;
$isLoading.show(); $isLoading.show();
var $button = $(this).attr("disabled", "disabled"); var $button = $(this).attr("disabled", "disabled");
// Fire request for the next page
$.ajax({ url: document.location.pathname + '?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;
$('#items').append("<hr /><p>Er zijn geen beelden (meer).</p>");
$button.remove();
return;
}
$('#items').append(data); // Fire request for the next page
++nextPage; $.ajax({url: document.location.pathname + '?pagina=' + nextPage})
}); .always(function () {
} // Whether success or failure, update the UI again
}); isLoading = 0;
</script> $isLoading.hide();
$button.removeAttr("disabled");
})
.done(function (data) {
if (!data) {
// When no data was returned, disable the button permanently
page = -1;
$('#items').append("<hr /><p>Er zijn geen beelden (meer).</p>");
$button.remove();
return;
}
$('#items').append(data);
++nextPage;
});
}
});
</script>
@endpush @endpush

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

@@ -1,50 +1,57 @@
@extends('layouts/sidebar') @extends('layouts/sidebar')
@section('title') @section('title')
{{$job->title}} {{$job->title}}
@endsection @endsection
@section('breadcrumb') @section('breadcrumb')
<ul class="bread_crumb"> <ul class="bread_crumb">
<li><a title="Home" href="/">Home</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li><a title="Vacatures" href="{{route('vacatures')}}">Vacatures</a></li> <li><a title="Vacatures" href="{{route('vacatures')}}">Vacatures</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li> <li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>{{$job->title}}</li> <li>{{$job->title}}</li>
</ul> </ul>
@endsection @endsection
@section('page_class')
news_post post_container
@endsection
@section('container_class')
grey_background
@endsection
@section('content') @section('content')
<div class="row"> <div class="post_body">
<div class="post single "> @if($job->images)
<div class="post_content clearfix"> @if(count($job->images) == 1)
<div class="content_box"> <div class="post_image_box">
@if($job->images) <a href="{{$imgBase . $job->images[0]->url}}" class="post_image prettyPhoto" rel="prettyPhoto"
@if(count($job->images) == 1) title="{{$job->images[0]->title}}">
<div class="post_image_box"> <img src='{{$imgBase . $job->images[0]->url}}' alt='{{$job->images[0]->title}}'>
<a href="{{$imgBase . $job->images[0]->url}}" class="post_image prettyPhoto" rel="prettyPhoto" title="{{$job->images[0]->title}}"> </a>
<img src='{{$imgBase . $job->images[0]->url}}' alt='{{$job->images[0]->title}}'> <div class="sentence">
</a> <span class="text">{{$job->images[0]->title}}</span>
<div class="sentence"> @if(isset($job->images[0]->author))
<span class="text">{{$job->images[0]->title}}</span> <span class="author">{{$job->images[0]->author}}</span>
@if(isset($job->images[0]->author)) @endif
<span class="author">{{$job->images[0]->author}}</span>
@endif
</div>
</div> </div>
@else </div>
<div class="horizontal_carousel_container thin page_margin_top gallery_control"> @else
<ul class="horizontal_carousel control-for-post-gallery visible-5 autoplay-0 scroll-1 navigation-1 easing-easeInOutQuint duration-750"> <div class="horizontal_carousel_container thin page_margin_top gallery_control">
@foreach($job->images as $image) <ul class="horizontal_carousel control-for-post-gallery visible-5 autoplay-0 scroll-1 navigation-1 easing-easeInOutQuint duration-750">
@foreach($job->images as $image)
<li> <li>
<a href="#"><img src='{{$imgBase . $image->url}}'></a> <a href="#"><img src='{{$imgBase . $image->url}}'></a>
</li> </li>
@endforeach @endforeach
</ul> </ul>
</div> </div>
<div id="control-by-post-gallery" class="horizontal_carousel_container big margin_top_10"> <div id="control-by-post-gallery" class="horizontal_carousel_container big margin_top_10">
<ul id="post-gallery" class="horizontal_carousel visible-1 autoplay-0 scroll-1 navigation-1 easing-easeInOutQuint duration-750"> <ul id="post-gallery"
class="horizontal_carousel visible-1 autoplay-0 scroll-1 navigation-1 easing-easeInOutQuint duration-750">
@foreach($job->images as $image) @foreach($job->images as $image)
<li> <li>
<a href="{{$imgBase . $image->url}}" data-rel="gallery" title="{{$image->title}}"> <a href="{{$imgBase . $image->url}}" data-rel="gallery" title="{{$image->title}}">
@@ -52,57 +59,32 @@
<img src='{{$imgBase . $image->url}}' alt='{{$image->title}}'> <img src='{{$imgBase . $image->url}}' alt='{{$image->title}}'>
</a> </a>
</li> </li>
</ul> </ul>
@endforeach @endforeach
</div>
@endif
@endif
<div class="text">
{!!$job->content!!}
<hr />
<h4>Interesse?</h4>
<p><a href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst">Meld je nu aan voor een vrijblijvende kennismaking</a> met NH Gooi.</p>
<!-- <a class="read_more" href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst"><span class="arrow"></span><span>Programma &amp; aanmelden</span></a> -->
<p>Je kan ons ook mailen. Stuur een korte introductie met motivatie naar meebouwen@nhgooi.nl en we nemen contact met je op voor een vrijblijvend kennismakingsgesprek.</p>
<a class="read_more" href="mailto:meebouwen@nhgooi.nl?subject=Reactie op vacature voor {{$job->title}}" title="Mail direct je reactie op deze vacature."><span class="arrow"></span><span>Reageer nu!</span></a>
</div> </div>
@endif
{{-- @endif
@include('widgets/share')
--}}
</div> <div class="text">
{!!$job->content!!}
<hr/>
<h2>Interesse?</h2>
<p><a href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst">Meld je nu aan voor een vrijblijvende
kennismaking</a> met NH Gooi.</p>
<!-- <a class="read_more" href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst"><span class="arrow"></span><span>Programma &amp; aanmelden</span></a> -->
<p>Je kan ons ook mailen. Stuur een korte introductie met motivatie naar meebouwen@nhgooi.nl en we nemen
contact met je op voor een vrijblijvend kennismakingsgesprek.</p>
<a class="btn" href="mailto:meebouwen@nhgooi.nl?subject=Reactie op vacature voor {{$job->title}}"
title="Mail direct je reactie op deze vacature.">
<span>Reageer nu!</span>
</a>
</div> </div>
{{--
@include('widgets/share')
--}}
</div> </div>
</div>
<style>
.post.single .content_box {
float: none;
margin-left: 0;
width: auto;
padding: 1em 0;
color: #3E3E3E !important;
line-height: 150%;
}
.content_box .text > * {
margin-left: 0px;
}
.content_box ul br {
display: none;
}
.content_box li {
padding-top: 7px;
padding-bottom: 7px;
margin-top: 0;
background-repeat: no-repeat;
background-position: left 10px;
padding-left: 25px;
background-image: url("/images/icons/other/bullet_style_2.png");
}
</style>
@endsection @endsection

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

@@ -1,275 +1,180 @@
@extends('layouts/sidebar') @extends('layouts/sidebar')
@section('title') @section('title')
Vacatures Vacatures
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Home" href="/">Home</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>Vacatures</li>
</ul>
@endsection
@section('page_class')
news_post post_container
@endsection
@section('container_class')
grey_background
@endsection @endsection
@section('content') @section('content')
@parent @parent
<div class="vacature_row"> <div class="post_body ">
<div class="column_23"> <h2 class="first">Wat doen wij?</h2>
<h3 class="first">Wat doen wij?</h3> <p>NH Gooi is de streekomroep voor het Gooi. We maken radio- en televisieprogramma’s,
<p>NH Gooi is de streekomroep voor het Gooi. We maken radio- en televisieprogramma’s, podcasts en een website met nieuws en verhalen uit je achtertuin. Muziek, informatie,
podcasts en een website met nieuws en verhalen uit je achtertuin. Muziek, informatie, cultuur en ontspanning staan centraal in onze uitzendingen, maar altijd met een link naar
cultuur en ontspanning staan centraal in onze uitzendingen, maar altijd met een link naar het Gooi. NH Gooi is volop in ontwikkeling en wil haar activiteiten uitbouwen.</p>
het Gooi. NH Gooi is volop in ontwikkeling en wil haar activiteiten uitbouwen.</p>
<blockquote> <blockquote>
Ik kwam hier als programmeur en nu maak ik met een collega, inmiddels vriend, elke week een Ik kwam hier als programmeur en nu maak ik met een collega, inmiddels vriend, elke week een
kleinkunstprogramma kleinkunstprogramma
<span class="author">—&nbsp;&nbsp;Mischa, programmamaker en technicus</span> <span class="author">—&nbsp;&nbsp;Mischa, programmamaker en technicus</span>
</blockquote> </blockquote>
<p>Lijkt het je leuk om mee te bouwen aan de streekomroep van en voor het Gooi? Dan ben je aan het juiste adres. NH Gooi is volop in ontwikkeling en biedt kansen voor iedereen die wil meebouwen aan <p>Lijkt het je leuk om mee te bouwen aan de streekomroep van en voor het Gooi? Dan ben je aan het juiste
onze organisatie. En dat allemaal in het mediacentrum van ons land.</p> adres. NH Gooi is volop in ontwikkeling en biedt kansen voor iedereen die wil meebouwen aan
onze organisatie. En dat allemaal in het mediacentrum van ons land.</p>
<p>Wil je programma's maken voor radio en/of televisie, verslaggever worden, podcasts maken? Ben <p>Wil je programma's maken voor radio en/of televisie, verslaggever worden, podcasts maken? Ben
jij de techneut of ICT-er die zorgt dat alle techniek en verbindingen goed blijven werken? Of vind je jij de techneut of ICT-er die zorgt dat alle techniek en verbindingen goed blijven werken? Of vind je
het juist leuk om met een klein team mee te denken en te zorgen dat we nog bekender worden? het juist leuk om met een klein team mee te denken en te zorgen dat we nog bekender worden?
Bijna alles is mogelijk en altijd onder begeleiding of samen met anderen.</p> Bijna alles is mogelijk en altijd onder begeleiding of samen met anderen.</p>
<p>Wat wij van jou vragen is dat je nieuwsgierig bent, goed kunt samenwerken en graag op zoek gaat <p>Wat wij van jou vragen is dat je nieuwsgierig bent, goed kunt samenwerken en graag op zoek gaat
naar de verhalen uit het Gooi. Meer weten? naar de verhalen uit het Gooi. Meer weten?
<a href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst">Schrijf je nu in voor een kennismaking</a> en laat je inspireren, het verplicht je tot niets.</p> <a href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst">Schrijf je nu in voor een
</div> kennismaking</a> en laat je inspireren, het verplicht je tot niets.</p>
<div class="column_13"> <h2 class="first">Maak kennis met ons!</h2>
<div style="border: solid 1px blue; padding: 3px; margin-bottom: 1em;"> <!-- <p>Kom op 27 november kennismaken met NH Gooi!</p> -->
<h3 class="first">Maak kennis met ons!</h3> <p>Laat je uitnodigen voor een kennismaking</p>
<!-- <p>Kom op 27 november kennismaken met NH Gooi!</p> -->
<p>Laat je uitnodigen voor een kennismaking</p>
<a class="read_more" href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst"><span class="arrow"></span><span>Aanmelden</span></a>
<div class="clearfix"></div>
</div>
<h3 class="first">Wie zoeken wij?</h3> <a class="btn" style="width: fit-content" href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst">
@foreach($jobs as $job) <span>Aanmelden</span>
<a class="read_more" href="{{$job->url}}" title="Reageer direct op de vacature {{$job->title}}"><span class="arrow"></span><span>{{$job->title}}</span></a> </a>
@endforeach <div class="clearfix"></div>
<div class="clearfix"></div>
<div style="margin: 1em; border-bottom: solid 1px #333;"></div> <h2 class="first">Wie zoeken wij?</h2>
<h5>Niet wat je zoekt?</h5> <ul>
<a class="read_more" href="mailto:meebouwen@nhgooi.nl?subject=Open sollicitatie" title="Mail direct je reactie op deze vacature."><span class="arrow"></span><span>Open sollicitatie</span></a> @foreach($jobs as $job)
<li>
<a class="read_more" href="{{$job->url}}" title="Reageer direct op de vacature {{$job->title}}">
<span>{{$job->title}}</span>
</a>
</li>
@endforeach
</ul>
<div class="clearfix"></div>
<div style="margin: 1em; border-bottom: solid 1px #333;"></div>
<h2>Niet wat je zoekt?</h2>
<a class="btn" style="width: fit-content" href="mailto:meebouwen@nhgooi.nl?subject=Open sollicitatie"
title="Mail direct je reactie op deze vacature.">
<span>Open sollicitatie</span>
</a>
<div class="clearfix"></div>
<blockquote>
Je krijgt bij NH Gooi de kans om jezelf te ontwikkelen. Ik mocht al heel snel mijn eigen programma maken
<span class="author">—&nbsp;&nbsp;Yannick, programmamaker</span>
</blockquote>
<h3 class="page_margin_top">Veelgestelde vragen</h3>
<div class="vraag">
<h4 class="vraag-header">Wat kan NH Gooi mij bieden?</h4>
<div class="antwoord">
<ul>
<li>Een baan als vrijwilliger met toekomst. Veel (ex)collega’s zijn in dienst bij landelijke of
regionale omroepen.
</li>
<li>De kans om mee te bouwen aan onze organisatie en programma’s.</li>
<li>Een enthousiast team met veel kennis</li>
<li>Meer plannen dan we op dit moment kunnen uitvoeren</li>
<li>Een organisatie waar je je talenten kan ontdekken</li>
<li>Workshops en bijeenkomsten met collega’s</li>
</ul>
</div>
</div> </div>
</div>
<div class="clearfix"></div> <div class="vraag">
<blockquote> <h4 class="vraag-header">Aan welke voorwaarden moet ik voldoen?</h4>
Je krijgt bij NH Gooi de kans om jezelf te ontwikkelen. Ik mocht al heel snel mijn eigen programma maken <div class="antwoord">
<span class="author">—&nbsp;&nbsp;Yannick, programmamaker</span> Je hebt een band met het Gooi.
</blockquote> Je kunt zelfstandig werken
Je bent nieuwsgierig en ondernemend
Je wilt graag bij een omroep werken
</div>
</div>
<div class="vraag">
<h4 class="vraag-header">Kan ik me zonder ervaring ook bij NH Gooi aanmelden?</h4>
<div class="antwoord">
Ja, de wil om te leren en een flinke dosis enthousiasme is genoeg.
</div>
</div>
<h3 class="page_margin_top">Veelgestelde vragen</h3> <div class="vraag">
<h4 class="vraag-header">Kan ik ook meerdere dingen doen bij NH Gooi?</h4>
<div class="antwoord">
Ja, dat is geen probleem. Bij NH Gooi is (bijna) alles mogelijk. Het belangrijkste is dat je enthousiast
bent en je er echt voor in wil zetten.
</div>
</div>
<div class="vraag"> <div class="vraag">
<button class="vraag-header">Wat kan NH Gooi mij bieden?</button> <h4 class="vraag-header">Ik vind het leuk om mee richting te geven aan NH Gooi, kan dat ook?</h4>
<div class="antwoord"> <div class="antwoord">
<ul> Absoluut! Voor de verschillende onderdelen zoeken we ook coördinatoren die mede richting willen geven en
<li>Een baan als vrijwilliger met toekomst. Veel (ex)collega’s zijn in dienst bij landelijke of regionale omroepen.</li> anderen kan ondersteunen en stimuleren.
<li>De kans om mee te bouwen aan onze organisatie en programma’s.</li> </div>
<li>Een enthousiast team met veel kennis</li> </div>
<li>Meer plannen dan we op dit moment kunnen uitvoeren</li>
<li>Een organisatie waar je je talenten kan ontdekken</li>
<li>Workshops en bijeenkomsten met collega’s</li>
</ul>
</div>
</div>
<div class="vraag"> <blockquote>
<button class="vraag-header">Aan welke voorwaarden moet ik voldoen?</button> Produceren, presenteren, reportages maken, monteren; ik kon het allemaal leren bij NH Gooi. Wil je iets met
<div class="antwoord"> radio, ben je van 'wel vrijwillig, maar niet vrijblijvend?' Dan wil ik graag mijn ervaringen met je delen
Je hebt een band met het Gooi. <span class="author">—&nbsp;&nbsp;Michel Stoeltie</span>
Je kunt zelfstandig werken </blockquote>
Je bent nieuwsgierig en ondernemend
Je wilt graag bij een omroep werken
</div>
</div>
<div class="vraag"> <div class="vraag">
<button class="vraag-header">Kan ik me zonder ervaring ook bij NH Gooi aanmelden?</button> <h4 class="vraag-header">Ik ben 62 jaar, kan ik me dan ook aanmelden?</h4>
<div class="antwoord"> <div class="antwoord">
Ja, de wil om te leren en een flinke dosis enthousiasme is genoeg. Uiteraard, wij hebben collega’s van 18 tot 72 jaar
</div> </div>
</div> </div>
<div class="vraag"> <div class="vraag">
<button class="vraag-header">Kan ik ook meerdere dingen doen bij NH Gooi?</button> <h4 class="vraag-header">Ik heb een parttimebaan, kan ik me aanmelden?</h4>
<div class="antwoord"> <div class="antwoord">
Ja, dat is geen probleem. Bij NH Gooi is (bijna) alles mogelijk. Het belangrijkste is dat je enthousiast bent en je er echt voor in wil zetten. Ja, als je wilt inzetten voor NH Gooi en we kunnen op je rekenen, dan ben je welkom.
</div> Hoeveel tijd je beschikbaar hebt en wanneer is minder belangrijk.
</div> </div>
</div>
<div class="vraag"> <div class="vraag">
<button class="vraag-header">Ik vind het leuk om mee richting te geven aan NH Gooi, kan dat ook?</button> <h4 class="vraag-header">Als ik meedoe, hoeveel uur per week ben ik dan bezig?</h4>
<div class="antwoord"> <div class="antwoord">
Absoluut! Voor de verschillende onderdelen zoeken we ook coördinatoren die mede richting willen geven en anderen kan ondersteunen en stimuleren. Of je veel of weinig tijd hebt, dat maakt niet uit. Wel vinden we het belangrijk, als je je in wilt
</div> zetten,
</div> dat we op je kunnen rekenen.
</div>
</div>
<blockquote> <div class="vraag">
Produceren, presenteren, reportages maken, monteren; ik kon het allemaal leren bij NH Gooi. Wil je iets met radio, ben je van 'wel vrijwillig, maar niet vrijblijvend?' Dan wil ik graag mijn ervaringen met je delen <h4 class="vraag-header">Wat kan ik verwachten van de begeleiding?</h4>
<span class="author">—&nbsp;&nbsp;Michel Stoeltie</span> <div class="antwoord">
</blockquote> Je wordt begeleid door een of meer collega’s van NH Gooi. Dit is afhankelijk wat en hoeveel je voor NH
Gooi
<div class="vraag"> wilt en kunt doen.
<button class="vraag-header">Ik ben 62 jaar, kan ik me dan ook aanmelden?</button> Jouw begeleider
<div class="antwoord"> Is jouw vraagbaak en kent de organisatie en weet wie je kunt benaderen voor specifieke vragen
Uiteraard, wij hebben collega’s van 18 tot 72 jaar Zet je op het spoor van dingen en mensen die voor jou interessant zijn
</div> Maar is geen persoonlijk assistent.
</div> </div>
</div>
<div class="vraag"> </div>
<button class="vraag-header">Ik heb een parttimebaan, kan ik me aanmelden?</button>
<div class="antwoord">
Ja, als je wilt inzetten voor NH Gooi en we kunnen op je rekenen, dan ben je welkom.
Hoeveel tijd je beschikbaar hebt en wanneer is minder belangrijk.
</div>
</div>
<div class="vraag">
<button class="vraag-header">Als ik meedoe, hoeveel uur per week ben ik dan bezig?</button>
<div class="antwoord">
Of je veel of weinig tijd hebt, dat maakt niet uit. Wel vinden we het belangrijk, als je je in wilt zetten, dat we op je kunnen rekenen.
</div>
</div>
<div class="vraag">
<button class="vraag-header">Wat kan ik verwachten van de begeleiding?</button>
<div class="antwoord">
Je wordt begeleid door een of meer collega’s van NH Gooi. Dit is afhankelijk wat en hoeveel je voor NH Gooi wilt en kunt doen.
Jouw begeleider
Is jouw vraagbaak en kent de organisatie en weet wie je kunt benaderen voor specifieke vragen
Zet je op het spoor van dingen en mensen die voor jou interessant zijn
Maar is geen persoonlijk assistent.
</div>
</div>
<style>
.vacature_row {
display: flex;
}
.column_13 {
flex: 1 0 33%;
padding: 4px;
}
.column_23 {
flex: 1 1 67%;
padding: 4px;
}
@media screen and (max-width: 479px) {
.vacature_row {
display: block;
}
}
blockquote {
font-size: 120%;
background-color: white;
margin: 0;
}
blockquote .author {
margin-top: 12px;
}
.joblist li, .antwoord li {
padding-top: 7px;
padding-bottom: 7px;
margin-top: 0;
background-repeat: no-repeat;
background-position: left 10px;
padding-left: 25px;
background-image: url("/images/icons/other/bullet_style_2.png");
}
.vraag {
padding: 3px;
margin-top: 3px;
margin-bottom: 3px;
}
.vraag a {
font-size: 150%;
}
.vraag a:before {
}
.vraag .antwoord {
display: none;
font-size: 12px;
color: black;
}
/* Style the buttons that are used to open and close the accordion panel */
.vraag-header {
background-color: #f0f0f0;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
border-left: 3px solid #1F3977;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .vraag-header:hover {
background-color: #c0c0c0;
}
/* Style the accordion panel. Note: hidden by default */
.vraag .antwoord {
padding: 18px 18px;
font-size: 100%;
line-height: 150%;
background-color: white;
display: none;
overflow: hidden;
}
button.vraag-header.active::after {
content: "\2212";
}
button.vraag-header::after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.page_header {
display: none;
}
</style>
<script>
var acc = document.getElementsByClassName("vraag-header");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
$(panel).slideUp();
} else {
$(panel).slideDown();
}
});
}
</script>
@endsection @endsection

261
resources/views/kennismakingsbijeenkomst.blade.php
View File

@@ -1,24 +1,36 @@
@extends('layouts/full') @extends('layouts/full')
@section('title') @section('title')
Meebouwen? Meebouwen?
@endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Home" href="/">Home</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li><a title="Vacatures" href="{{route('vacatures')}}">Vacatures</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>Ontmoet ons</li>
</ul>
@endsection @endsection
@section('content') @section('content')
@parent <div class="page_body margin_bottom">
@if(isset($antispam)) @if(isset($antispam))
<div style="border: solid 1px blue; padding: 3px; margin-bottom: 1em;"> <div style="border: solid 1px blue; padding: 3px; margin-bottom: 1em;">
<p>Oeps, de anti-spam waarde was incorrect! Helaas krijgen we zoveel spam binnen dat we je moeten vragen om een simpele rekensom op te lossen, voordat we je verzoek doorsturen.</p> <p>Oeps, de anti-spam waarde was incorrect! Helaas krijgen we zoveel spam binnen dat we je moeten vragen om
</div> een simpele rekensom op te lossen, voordat we je verzoek doorsturen.</p>
@endif </div>
@if(isset($bevestiging)) @endif
<div style="border: solid 1px blue; padding: 3px; margin-bottom: 1em;"> @if(isset($bevestiging))
<p>Dank je wel voor je aanmelding! Een bevestiging hiervan is gestuurd naar <code>{{ $bevestiging }}</code>.</p> <div style="border: solid 1px blue; padding: 3px; margin-bottom: 1em;">
</div> <p>Dank je wel voor je aanmelding! Een bevestiging hiervan is gestuurd naar <code>{{ $bevestiging }}</code>.
@endif </p>
</div>
@endif
<!-- <!--
<h3 class="page_margin_top">Programma informatiebijeenkomst NH Gooi 27 november 2021</h3> <h3 class="page_margin_top">Programma informatiebijeenkomst NH Gooi 27 november 2021</h3>
<table> <table>
<tr> <tr>
@@ -50,114 +62,139 @@
--> -->
<p> <p>
Als je het leuk vindt om met, bij en voor ons aan de slag te gaan en mee te bouwen aan een sterke streekomroep, laat dan hieronder je naam en contactgegevens achter. Geef ons ook alvast wat informatie waar je interesse naar uitgaat en wat je te bieden hebt. We nemen dan binnenkort contact met je op voor een persoonlijke kennismaking. Als je het leuk vindt om met, bij en voor ons aan de slag te gaan en mee te bouwen aan een sterke streekomroep,
</p> laat dan hieronder je naam en contactgegevens achter. Geef ons ook alvast wat informatie waar je interesse naar
uitgaat en wat je te bieden hebt. We nemen dan binnenkort contact met je op voor een persoonlijke kennismaking.
</p>
@if(!isset($bevestiging)) @if(!isset($bevestiging))
<h4 class="box_header"> <h4 class="box_header">
Aanmelden Aanmelden
</h4> </h4>
<p> <p>
Er gebeurt veel bij NH Gooi. Van radio en podcasts maken tot ICT en uitzendtechniek en van Tv-interviews produceren tot marketing en communicatie. Maar ook organisatorisch talent kunnen we goed gebruiken. Schrijf daarom zo concreet en volledig mogelijk op wat (op dit moment) je interesse hebt en waar je mogelijk al ervaring mee hebt. Er gebeurt veel bij NH Gooi. Van radio en podcasts maken tot ICT en uitzendtechniek en van Tv-interviews
</p> produceren tot marketing en communicatie. Maar ook organisatorisch talent kunnen we goed gebruiken. Schrijf
daarom zo concreet en volledig mogelijk op wat (op dit moment) je interesse hebt en waar je mogelijk al
ervaring mee hebt.
</p>
<form class="forr margin_top_15" id="form" method="post" action="/vacatures/ontmoet-ons" style="background: none;"> <form class="forr margin_top_15" id="form" method="post" action="/vacatures/ontmoet-ons"
{{ csrf_field() }} style="background: none;">
<fieldset style="display: inline;"> {{ csrf_field() }}
<p>Ja, ik maak graag kennis met NH Gooi!</p> <fieldset style="display: inline;">
</fieldset> <p>Ja, ik maak graag kennis met NH Gooi!</p>
<fieldset class=""> </fieldset>
<div class="block"> <fieldset class="">
<label for="name">Naam</label> <div class="block">
<input class="text_input hint" id="name" name="name" type="text" placeholder="Naam" required="required"> <label for="name">Naam</label>
</div> <input class="text_input hint" id="name" name="name" type="text" placeholder="Naam"
</fieldset> required="required">
<fieldset class=""> </div>
<div class="block"> </fieldset>
<label for="email">E-mailadres</label> <fieldset class="">
<input class="text_input hint" id="email" name="email" type="text" placeholder="Emailadres" required="required"> <div class="block">
</div> <label for="email">E-mailadres</label>
</fieldset> <input class="text_input hint" id="email" name="email" type="text" placeholder="Emailadres"
<fieldset class=""> required="required">
<div class="block"> </div>
<label for="phone">Telefoonnummer</label> </fieldset>
<input class="text_input hint" id="phone" name="phone" type="text" placeholder="Telefoonnummer" required="required"> <fieldset class="">
</div> <div class="block">
</fieldset> <label for="phone">Telefoonnummer</label>
<fieldset> <input class="text_input hint" id="phone" name="phone" type="text" placeholder="Telefoonnummer"
<div class="block"> required="required">
<p style="padding-bottom: 0;">Korte toelichting: wat wil je doen en welke ervaring heb je eventueel al?</p> </div>
</div> </fieldset>
<textarea name="message" placeholder="Toelichting" class="hint"></textarea> <fieldset>
</fieldset> <div class="block">
<fieldset class=""> <p style="padding-bottom: 0;">Korte toelichting: wat wil je doen en welke ervaring heb je eventueel
<div class="block"> al?</p>
<label for="phone">Anti-spam</label> </div>
<input class="text_input hint" id="antispam" name="antispam" type="text" placeholder="Uitkomst van de som" required="required"> <textarea class="texterea_input" name="message" placeholder="Toelichting" class="hint"></textarea>
<p style="">Helaas krijgen we ook veel spam binnen. Vul alsjeblieft in getallen in hoeveel <b>twee plus drie</b> is.</p> </fieldset>
</div> <fieldset class="">
</fieldset> <div class="block">
<fieldset> <label for="phone">Anti-spam</label>
<input type="hidden" name="action" value="contact_form"> <input class="text_input hint" id="antispam" name="antispam" type="text"
<input type="submit" name="submit" value="Aanmelden!" class="more active"> placeholder="Uitkomst van de som" required="required">
</fieldset> <p style="">Helaas krijgen we ook veel spam binnen. Vul alsjeblieft in getallen in hoeveel <b>twee
</form> plus drie</b> is.</p>
<p style="color: #333; font-size: 80%;">Privacy-statement: bovenstaande informatie wordt alleen gebruikt door geselecteerde medewerkers om contact met je op te nemen over je aanmelding en je informatie te sturen. Je gegevens worden verder niet opgeslagen en na de bijeenkomst danwel je tijdige afmelding verwijderd, tenzij we deze gegevens nog nodig hebben omdat je (vrijwillige) werkzaamheden wilt gaan verrichten bij NH Gooi.</p> </div>
@endif </fieldset>
<fieldset>
<input type="hidden" name="action" value="contact_form">
<input type="submit" name="submit" value="Aanmelden!" class="more active">
</fieldset>
</form>
<p style="color: #333; font-size: 80%;">Privacy-statement: bovenstaande informatie wordt alleen gebruikt door
geselecteerde medewerkers om contact met je op te nemen over je aanmelding en je informatie te sturen. Je
gegevens worden verder niet opgeslagen en na de bijeenkomst danwel je tijdige afmelding verwijderd, tenzij
we deze gegevens nog nodig hebben omdat je (vrijwillige) werkzaamheden wilt gaan verrichten bij NH Gooi.</p>
@endif
<style> </div>
table { width: 100%; }
td {
border-top: solid 1px #ddd;
vertical-align: top;
color: #444;
line-height: 150%;
}
li {
margin-left: 10px;
padding-top: 2px;
margin-top: 0;
padding-left: 25px;
}
td > ul > li {
background-repeat: no-repeat;
background-position: left 10px;
background-image: url("/images/icons/other/bullet_style_2.png");
}
fieldset .block { <style>
display: flex; .page_body table {
margin-bottom: 3px; width: 100%;
} }
fieldset label { .page_body td {
display: block; border-top: solid 1px #ddd;
flex: 0 1 150px; vertical-align: top;
margin-top: auto; color: #444;
margin-bottom: auto; line-height: 150%;
color: #777; }
}
fieldset input { .page_body li {
flex: 1 1; margin-left: 10px;
} padding-top: 2px;
margin-top: 0;
fieldset textarea { padding-left: 25px;
width: 100%; }
}
@media screen and (max-width: 479px) { .page_body td > ul > li {
fieldset .block { background-repeat: no-repeat;
flex-wrap: wrap; background-position: left 10px;
margin-top: 15px; background-image: url("/images/icons/other/bullet_style_2.png");
} }
fieldset label { .page_body fieldset {
} border: none;
} }
</style>
.page_body fieldset .block {
display: flex;
margin-bottom: 3px;
}
.page_body fieldset label {
display: block;
flex: 0 1 150px;
margin-top: auto;
margin-bottom: auto;
color: #777;
}
.page_body fieldset input {
flex: 1 1;
}
.page_body fieldset textarea {
width: 100%;
}
@media screen and (max-width: 479px) {
.page_body fieldset .block {
flex-wrap: wrap;
margin-top: 15px;
}
.page_body fieldset label {
}
}
</style>
@endsection @endsection

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

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

75
resources/views/partial/imageslist_small.blade.php
View File

@@ -1,39 +1,38 @@
@foreach($images as $item) <div class="row blog post_container">
@if($loop->index % 3 == 0) @foreach($images as $item)
<div class="row grid"> <div class="post col-12 col-md-4">
<ul> <div class="box">
@endif <a href="{{$imgBase . $item->images[0]->url}}" class="post_image prettyPhoto" rel="prettyPhoto"
<li class="post column column_1_3"> title="{{$item->images[0]->title}}">
<a href="{{$imgBase . $item->images[0]->url}}" class="post_image prettyPhoto" rel="prettyPhoto" title="{{$item->images[0]->title}}"> <img style="width: 100%" src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}'
<img src='{{$item->images && count($item->images) ? $imgBase . $item->images[0]->url : '/images/noimage.png'}}' alt='{{$item->images && count($item->images) ? $item->images[0]->title : $item->title}}'> alt='{{$item->images && count($item->images) ? $item->images[0]->title : $item->title}}'>
</a> </a>
<div class="post_content"> <div class="post_body">
<h5> <h2 class="post_title">
<a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a> <a href="{{url($item->url)}}" title="{{$item->title}}">{{$item->title}}</a>
</h5> </h2>
<ul class="post_details simple"> <ul class="post_details simple clearfix">
<li class="category"> <li class="category">
<!-- <a title="Regio: {{$item->region->title}}" href="{{url('beelden/regio/' . $item->region->slug)}}">{{$item->region->title}}</a> --> <!-- <a title="Regio: {{$item->region->title}}" href="{{url('beelden/regio/' . $item->region->slug)}}">{{$item->region->title}}</a> -->
<a title="Regio: {{$item->region->title}}" href=".">{{$item->region->title}}</a> <a title="Regio: {{$item->region->title}}" href=".">{{$item->region->title}}</a>
</li> </li>
@if($item->edited && ($item->edited != $item->published)) @if($item->edited && ($item->edited != $item->published))
<li class="date edited"> <li class="date edited">
{{Formatter::relativeDate($item->edited)}} bijgewerkt om {{$item->published->format('H:i')}} {{Formatter::relativeDate($item->edited)}} bijgewerkt
</li> om {{$item->published->format('H:i')}}
@else </li>
<li class="date"> @else
{{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}} <li class="date">
</li> {{Formatter::relativeDate($item->published)}} om {{$item->published->format('H:i')}}
@endif </li>
</ul> @endif
<p class="block-lead hidden-xs"> </ul>
{{$item->images[0]->title}} &bull; <p class="block-lead hidden-xs">
{{$item->content}} {{$item->images[0]->title}} &bull;
</p> {{$item->content}}
</div> </p>
</li> </div>
@if($loop->index % 3 == 2 || $loop->last) </div>
</ul> </div>
@endforeach
</div> </div>
@endif
@endforeach

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

@@ -1,10 +1,10 @@
<ul class='blog row'> <div>
@foreach($podcasts as $podcast) @foreach($podcasts as $podcast)
<?php <?php
$url = route('gemist.fragment') . $podcast->url; $url = route('gemist.fragment') . $podcast->url;
$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth; $popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
?> ?>
<li class="box featured"> <div class="box featured">
<div class="row"> <div class="row">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<a href="{{$url}}" title="{{$podcast->title}}"> <a href="{{$url}}" title="{{$podcast->title}}">
@@ -31,8 +31,8 @@
</a> </a>
</div> </div>
</div> </div>
</li> </div>
@endforeach @endforeach
</ul><!--/.row--> </div><!--/.row-->

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

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

53
resources/views/radioprogram.blade.php
View File

@@ -4,7 +4,9 @@
{{$program->name}} {{$program->name}}
@endsection @endsection
@section('page_class')grey_background page_container @endsection @section('page_class')
grey_background page_container
@endsection
@section('breadcrumb') @section('breadcrumb')
<ul class="bread_crumb"> <ul class="bread_crumb">
@@ -23,7 +25,7 @@
@section('sidebar') @section('sidebar')
@php($now = new \DateTimeImmutable()) @php($now = new \DateTimeImmutable())
<div id="komende_uitzendingen"> <div id="komende_uitzendingen">
<h4 class="box_header"><span>Komende week</span></h4> <h4 class="box_header extra_small"><span>Komende week</span></h4>
@if(($next = $program->next) && count($next)) @if(($next = $program->next) && count($next))
<div class="box full-width"> <div class="box full-width">
<ul class="blog podcasts"> <ul class="blog podcasts">
@@ -34,14 +36,15 @@
@if($n->starts < $now) @if($n->starts < $now)
<span class="post_date" title="Nu te horen tot {{$n->ends->format('H:i')}} uur."> <span class="post_date" title="Nu te horen tot {{$n->ends->format('H:i')}} uur.">
<i class="fa-regular fa-clock"></i> Nu te horen tot {{$n->ends->format('H:i')}} uur. <i class="fa-regular fa-clock"></i> Nu te horen tot {{$n->ends->format('H:i')}} uur.
</span> <br /> </span> <br/>
<a href="{{ $player = route('luister.live') }}" target="_radioplayer" <a href="{{ $player = route('luister.live') }}" target="_radioplayer"
class="action_button" class="action_button"
onclick="window.open('{{$player}}', '_radioplayer','width=400,height=400'); return false;"><span onclick="window.open('{{$player}}', '_radioplayer','width=400,height=400'); return false;"><span
class="fa fa-play"></span> <span>Luister live</span></a> class="fa fa-play"></span> <span>Luister live</span></a>
@break @break
@else @else
<span class="post_date" title="{{ Formatter::relativeDate( $n->starts, 'W d m' ) }} om {{ $n->starts->format('H:i') }} uur."> <span class="post_date"
title="{{ Formatter::relativeDate( $n->starts, 'W d m' ) }} om {{ $n->starts->format('H:i') }} uur.">
<i class="fa-regular fa-clock"></i> {{ Formatter::relativeDate( $n->starts, 'W d m' ) }} om {{ $n->starts->format('H:i') }} uur. <i class="fa-regular fa-clock"></i> {{ Formatter::relativeDate( $n->starts, 'W d m' ) }} om {{ $n->starts->format('H:i') }} uur.
</span> </span>
@endif @endif
@@ -58,12 +61,14 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<h4 class="box_header"><span>Terugluisteren</span></h4> <h4 class="box_header"><span>Terugluisteren</span></h4>
<div data-tabs> <div data-tabs>
<div class="tabs fit_content"> <div class="tabs">
<h4 data-tab-content-id="tab_broadcast" class="box_header active"><span>Uitzending</span></h4> <h4 data-tab-content-id="tab_broadcast" class="box_header flex-grow-1 extra_small active">
<h4 data-tab-content-id="tab_fragments" class="box_header"><span>Fragmenten</span></h4> <span>Uitzending</span></h4>
<h4 data-tab-content-id="tab_fragments" class="box_header extra_small"><span>Fragmenten</span></h4>
</div> </div>
<div id="tab_broadcast" class="box tab_content active"> <div id="tab_broadcast" class="box tab_content active">
<p class="page_body">U kunt uitzendingen tot twee weken geleden terugluisteren. <a href="#fragmenten">Fragmenten</a> blijven <p class="page_body">U kunt uitzendingen tot twee weken geleden terugluisteren. <a href="#fragmenten">Fragmenten</a>
blijven
onbeperkt beschikbaar.</p> onbeperkt beschikbaar.</p>
@if(($recent = $program->recent) && count($recent)) @if(($recent = $program->recent) && count($recent))
@@ -73,7 +78,8 @@
<li class="post"> <li class="post">
<p class="post_details simple"> <p class="post_details simple">
<span class="post_title">{{$r->name}}</span> <span class="post_title">{{$r->name}}</span>
<span class="post_date" title="{{ Formatter::relativeDate( $r->starts, 'W d m' ) }} om {{ $r->starts->format('H:i') }} uur."> <span class="post_date"
title="{{ Formatter::relativeDate( $r->starts, 'W d m' ) }} om {{ $r->starts->format('H:i') }} uur.">
<i class="fa-regular fa-clock"></i> {{ Formatter::relativeDate( $r->starts, 'W d m' ) }} om {{ $r->starts->format('H:i') }} uur. <i class="fa-regular fa-clock"></i> {{ Formatter::relativeDate( $r->starts, 'W d m' ) }} om {{ $r->starts->format('H:i') }} uur.
</span> </span>
@if($r->rerun || $r->nonstop) @if($r->rerun || $r->nonstop)
@@ -91,7 +97,8 @@
</div> </div>
<div id="tab_fragments" class="box tab_content"> <div id="tab_fragments" class="box tab_content">
<div class="clearfix"></div> <div class="clearfix"></div>
<p class="page_body">Fragmenten uit dit programma, zoals interviews, vindt u onder "Radio &ndash; Fragment gemist".</p> <p class="page_body">Fragmenten uit dit programma, zoals interviews, vindt u onder "Radio &ndash; Fragment
gemist".</p>
<p> <p>
<a href="{{ route('gemist.programma') . $program->url }}" class="action_button"> <a href="{{ route('gemist.programma') . $program->url }}" class="action_button">
<span class="fa fa-list"></span> <span class="fa fa-list"></span>
@@ -103,20 +110,26 @@
<div id="contact"> <div id="contact">
@if($program->email) @if($program->email)
<h4 class="box_header page_margin_top_section">Contact</h4> <div class="box">
<p><a href="mailto:{{$program->email}}@nhgooi.nl" class="action_button"> <h4 class="box_header page_margin_top_section">Contact</h4>
<span class="fa fa-envelope"></span> <p>
<span>{{$program->email}}@nhgooi.nl</a> <a href="mailto:{{$program->email}}@nhgooi.nl" class="action_button">
</a></p> <span class="fa fa-envelope"></span>
<span>{{$program->email}}@nhgooi.nl</a>
</a>
</p>
</div>
@endif @endif
</div> </div>
@if(($hosts = $program->hosts) && count($hosts)) @if(($hosts = $program->hosts) && count($hosts))
<ul class="list"> <div id="host" class="box">
@foreach($hosts as $host) <ul class="list">
<li class="bullet style_2">{{ Html::mailto($host->email . '@nhgooi.nl', $host->name) }}</li> @foreach($hosts as $host)
@endforeach <li><i class="fa-solid fa-user-tie"></i> {{ Html::mailto($host->email . '@nhgooi.nl', $host->name, ['class' => 'action_button']) }}</li>
</ul> @endforeach
</ul>
</div>
@endif @endif
</div><!--./left_content--> </div><!--./left_content-->
</div><!--./col--> </div><!--./col-->