Skip to content
Snippets Groups Projects
Commit a590d3df authored by Markus Willman's avatar Markus Willman
Browse files

fix info page responsiveness and link disabling

parent dca995e8
No related branches found
No related tags found
No related merge requests found
...@@ -10,8 +10,11 @@ ...@@ -10,8 +10,11 @@
<style> <style>
.h-auto { height: auto; } .h-auto { height: auto; }
.info-card > #visitTurku { overflow-y: scroll; } .info-card > #visitTurku { overflow-y: scroll; }
.info-card > #twitter { height: 528px; } .info-card > #twitter { height: 598px; }
{% if g.is_kiosk %}
/* This particular trick only works with fixed height elements, ie. breaks responsiveness,
but kiosk mode need not be responsive, since the screen resolution is fixed */
.iframe-container { .iframe-container {
width: 100%; width: 100%;
height: 100px; height: 100px;
...@@ -30,6 +33,7 @@ ...@@ -30,6 +33,7 @@
.iframe-cover { .iframe-cover {
z-index: 1; z-index: 1;
} }
{% endif %}
</style> </style>
{% endblock head %} {% endblock head %}
...@@ -38,8 +42,11 @@ ...@@ -38,8 +42,11 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
{#
# FIXME: link disabling doesn't work with this particular widget (iframes need to die), using a CSS hack that disables all interaction, see above
# - the poblem is not having a reliable way to add an load hook to the iframe added by this widget
#}
<!-- Forecast7.com --> <!-- Forecast7.com -->
{# FIXME: link disabling doesn't work with this particular widget (iframes need to die), using a hack that disables all interaction, see CSS above #}
<div class="card info-card box-shadow h-auto"> <div class="card info-card box-shadow h-auto">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Säätiedot</h3> <h3 class="card-title">Säätiedot</h3>
...@@ -64,11 +71,8 @@ ...@@ -64,11 +71,8 @@
<div class="col-md-6"> <div class="col-md-6">
<!-- Twitter feed --> <!-- Twitter feed -->
<div class="card info-card box-shadow content-spaced"> <div class="card info-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Twiitit: Turkukaupunki</h3>
</div>
<div id="twitter"> <div id="twitter">
<a class="twitter-timeline" data-dnt="true" data-theme="light" data-chrome="noheader nofooter noscrollbar" data-height="528" href="https://twitter.com/Turkukaupunki?ref_src=twsrc%5Etfw"> <a class="twitter-timeline" data-dnt="true" data-height="598" data-theme="light" data-chrome="nofooter noscrollbar" href="https://twitter.com/Turkukaupunki?ref_src=twsrc%5Etfw">
Twiitit: Turkukaupunki Twiitit: Turkukaupunki
</a> </a>
</div> </div>
...@@ -139,7 +143,10 @@ ...@@ -139,7 +143,10 @@
twttr.events.bind('loaded', function (e) { twttr.events.bind('loaded', function (e) {
e.widgets.forEach(function (w) { e.widgets.forEach(function (w) {
// the twitter widget is loaded in an iframe, contents() is needed because of that // the twitter widget is loaded in an iframe, contents() is needed because of that
$('#' + w.id).contents().disableExternalLinks(); $(w).on('load', function () {
// Note: this may not fire, if the widget has already fully loaded, which is why we double up below
$(this).contents().disableExternalLinks();
}).contents().disableExternalLinks();
}); });
}); });
}); });
......
...@@ -166,10 +166,9 @@ ...@@ -166,10 +166,9 @@
// TODO: disable when not running on the display // TODO: disable when not running on the display
$.fn.disableExternalLinks = function(force = false) { $.fn.disableExternalLinks = function(force = false) {
// for some extra security the first condition is resolved when templates are compiled // for some extra security the first condition is resolved when templates are compiled
if ({{ (not g.is_kiosk)|tojson|safe }} && !force) if (({{ (not g.is_kiosk)|tojson|safe }} && !force) || this.data('links-disabled'))
return this; return this;
var target = this;
var handler = function (e) { var handler = function (e) {
e.preventDefault(); e.preventDefault();
$link = $(this); $link = $(this);
...@@ -184,7 +183,8 @@ ...@@ -184,7 +183,8 @@
}).modal(); }).modal();
}; };
target.on('click', 'a[href^="http"]:not([href*="' + location.hostname + '"])', handler); this.on('click', 'a[href^="http"]:not([href*="{{ request.host }}"])', handler);
this.data('links-disabled', true);
return this; return this;
}; };
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment