Add scroll to top function

Add share buttons to news item
Add logo to footer
This commit is contained in:
Jorit Tijsen
2024-03-20 15:13:59 +01:00
parent 180c5d01be
commit 25b3d41bf1
15 changed files with 184 additions and 20 deletions

View File

@@ -0,0 +1,6 @@
$(function () {
$('.scroll_top').click(function (e) {
e.preventDefault();
$("html, body").stop().animate({scrollTop: 0}, 500, 'swing');
});
});

48
resources/assets/js/functions/share.js vendored Normal file
View File

@@ -0,0 +1,48 @@
(function ($) {
/**
* @param {object} _options
*/
$.fn.share = function (_options) {
var options = {
type: '',
types: {
facebook: {
url: 'https://www.facebook.com/sharer/sharer.php?u=',
textOption: false
},
twitter_x: {
url: 'https://twitter.com/share?url=',
textOption: 'text='
},
},
excerptClass: 'excerpt'
};
$.extend(options, _options);
this.click(function (e) {
e.preventDefault();
var type = options.types[options.type];
if (type !== undefined) {
var extra = '';
if (type.textOption) {
var text = $('.' + options.excerptClass).text();
if (text.length + location.href.length > 278) {
text = text.substring(0, 278 - (location.href.length + 3)) + '...';
}
extra = '&' + type.textOption + encodeURI(text);
}
window.open(type.url + encodeURI(location.href) + extra, "pop", "width=600, height=400, scrollbars=no");
} else {
console.error(options.type + ' is unknown');
}
});
};
}(jQuery));
$(function () {
$('[data-share]').each(function () {
$(this).share({type: $(this).data('share')});
});
});

View File

@@ -18,4 +18,13 @@
width: fit-content;
margin: 0 auto;
}
}
&.btn_facebook_share {
background-image: none;
background-color: #0f259d;
}
&.btn_twitter_x_share {
background-image: none;
background-color: #5ba8f4;
}
}

View File

@@ -69,10 +69,22 @@
.footer_menu2 {
@include reset-list;
float: left;
margin-bottom: 20px;
li {
float: left;
margin-right: 40px;
padding: 9px 0;
&:first-child {
padding: 0;
}
.logo {
display: block;
width: 115px;
height: 41px;
}
a {
text-decoration: underline;

View File

@@ -91,6 +91,7 @@
}
@media (max-width: 768px) {
h2 a, h5 a {
display: block;
font-size: 16px;
line-height: 1.17;
}

View File

@@ -17,7 +17,7 @@
.post_tags {
@include reset-list;
height: 31px;
margin-top: 20px;
margin: 20px 0;
li {
float: left;

View File

@@ -88,8 +88,6 @@
@yield('page')
</div><!--/.page-->
<a class="scroll_top_floater" href="#top" title="Scroll naar boven"></a>
<!-- Footer -->
<div class="footer_container">
<div class="footer_menu">
@@ -134,7 +132,7 @@
<div class="row">
<div class="col-12">
<ul class="footer_menu2">
<li>Logo</li>
<li><a href="{{url('/')}}" class="logo"><img src="/images/logo-NHGooi-diap.svg"/></a></li>
<li><a href="{{url('disclaimer')}}">Disclaimer</a></li>
<li><a href="{{url('privacy-verklaring')}}">Privacy verklaring</a></li>
<li><a href="{{url('cookie-statement')}}">Cookie statement</a></li>

View File

@@ -133,7 +133,6 @@
@include('widgets/share')
--}}
<div class="row page_margin_top">
{{--
<ul class="taxonomies tags left clearfix">
@if($news->keywords)
@@ -145,15 +144,28 @@
@endif
</ul>
--}}
<ul class="post_tags clearfix">
<li>Tags:</li>
<li>
<a href="{{route('nieuws.thema', $news->theme->slug)}}" title="Zoek meer nieuws met het thema {{$news->theme->title}}">{{$news->theme->title}}</a>
</li>
<li>
<a href="{{route('nieuws.regio', $news->region->slug)}}" title="Zoek meer nieuws uit de regio {{$news->region->title}}">{{$news->region->title}}</a>
</li>
</ul>
<ul class="post_tags clearfix">
<li>Tags:</li>
<li>
<a href="{{route('nieuws.thema', $news->theme->slug)}}" title="Zoek meer nieuws met het thema {{$news->theme->title}}">{{$news->theme->title}}</a>
</li>
<li>
<a href="{{route('nieuws.regio', $news->region->slug)}}" title="Zoek meer nieuws uit de regio {{$news->region->title}}">{{$news->region->title}}</a>
</li>
</ul>
<div class="share_buttons row">
<div class="col-12 col-md-auto">
<a data-share="facebook" href="javascript:void(0)" class="btn btn_facebook_share">
<i class="fa-brands fa-facebook-f"></i>
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>