diff --git a/static/css/stylesheet.css b/static/css/stylesheet.css
index b52383b03c27341bf1213065322933a75be1d0a5..8a6aa4312304efd60ea17ca03402d0b725bfa283 100644
--- a/static/css/stylesheet.css
+++ b/static/css/stylesheet.css
@@ -8,10 +8,10 @@ body { padding: 0; margin: 0; font-size: 16px; }
.footer { min-height: 3.125rem; }
/* content spacing */
-.content-spaced { margin-bottom: 1.25rem; }
-.content-spaced-lg { margin-bottom: 2.5rem; }
-.remove-padding { padding: 0; }
-.remove-margin { margin: 0; }
+.content-spaced { margin-bottom: 1.25rem !important; }
+.content-spaced-lg { margin-bottom: 2.5rem !important; }
+.remove-padding { padding: 0 !important; }
+.remove-margin { margin: 0 !important; }
/* vertical center the content view (header + footer + content-spaced-lg) */
.align-items-center.align-vertical-center {
@@ -40,8 +40,8 @@ body { height: 100%; overflow-y: scroll; }
/* sticky footer and header: fixed position (for display units, doesn't scroll) */
.body-sticky-padding { z-index: 0; padding-top: calc(3.125rem + 1.25rem); padding-bottom: calc(3.125rem + 1.25rem); /* header/footer height + content-spaced-lg */ }
-.header-sticky { z-index: 1; position: fixed; top: 0; width: 100%; }
-.footer-sticky { z-index: 1; position: fixed; bottom: 0; width: 100%; }
+.header-sticky { z-index: 2; position: fixed; top: 0; width: 100%; }
+.footer-sticky { z-index: 2; position: fixed; bottom: 0; width: 100%; }
.body-sticky-padding .list-group-item:hover {
z-index: 0 !important;
@@ -272,7 +272,6 @@ th .text-muted {
height: 37.5rem;
background-color: #f7aa00;
border: 1px solid #f7aa00;
- margin-bottom: 1.875rem;
}
.info-card .card-header {
@@ -283,7 +282,6 @@ th .text-muted {
/* Föli application page*/
.app-card {
border: 1px solid #f7aa00;
- margin-top: 1.875rem;
}
.app-card .card-header {
diff --git a/templates/foli/app.html b/templates/foli/app.html
index c53196781ae5f34a7d375a7b461d75b1be43bc88..ab6c6d86b97f92d273b04495a57b57eb62dfb583 100644
--- a/templates/foli/app.html
+++ b/templates/foli/app.html
@@ -1,6 +1,6 @@
{% extends 'internal/base.html' %}
-{% set title = 'Föli-sovellus' %}
+{% set title = 'Föli-Äppi' %}
{% set sticky_banners = true %}
{% set localized = false %}
{% set content_lang = 'fi' %}
@@ -8,10 +8,10 @@
{% block content %}
<div class="container">
- <h1>Föli - Turun seudun joukkoliikenne</h1>
- <h2>Mobiilisovellus</h2>
+ <h1 class="text-foli text-shadow">Föli - Turun seudun joukkoliikenne</h1>
+ <h2 class="text-shadow">Mobiilisovellus</h2>
- <div class="card app-card box-shadow">
+ <div class="card app-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Bussilippu kännykällä</h3>
</div>
@@ -30,7 +30,7 @@
</div>
</div>
- <div class="card app-card box-shadow">
+ <div class="card app-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Mobiililiput</h3>
</div>
@@ -75,7 +75,7 @@
</div>
</div>
- <div class="card app-card box-shadow">
+ <div class="card app-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Matkakortin lataaminen mobiilisovelluksella</h3>
</div>
@@ -101,7 +101,7 @@
</div>
</div>
- <div class="card app-card box-shadow">
+ <div class="card app-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Mobiilikausilippu kokeilukäytössä</h3>
</div>
@@ -159,10 +159,12 @@
</p>
</div>
</div>
- <h4 style="margin-top: 30px;">
- Sovelluksen on tehnyt iQ Payments Oy. Turun seudun joukkoliikenne Fölin mobiilimaksamisen mahdollistava
- sovellus palkittiin parhaana mobiilimaksamisen sovelluksena Slush-tapahtumassa syksyllä 2015.
- </h4>
+ <div class="text-center">
+ <small class="text-shadow">
+ Sovelluksen on tehnyt iQ Payments Oy. Turun seudun joukkoliikenne Fölin mobiilimaksamisen mahdollistava
+ sovellus palkittiin parhaana mobiilimaksamisen sovelluksena Slush-tapahtumassa syksyllä 2015.
+ </small>
+ </div>
</div>
{% endblock content %}
diff --git a/templates/foli/index.html b/templates/foli/index.html
index 2fed1842cc09ab919304c6f825aa464dcd7042b0..0befdc0bca21373f7e36acd8b5b7c1ebfb0f7fcb 100644
--- a/templates/foli/index.html
+++ b/templates/foli/index.html
@@ -8,10 +8,10 @@
{% block content %}
<div class="container">
- <h1>Föli - Turun seudun joukkoliikenne</h1>
+ <h1 class="text-foli text-shadow">Föli - Turun seudun joukkoliikenne</h1>
+ <h2 class="text-shadow">Hinnat</h2>
- <h2>Hinnat</h2>
- <div class="card foli-card box-shadow" style="margin-bottom: 20px; margin-top: 20px;">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-body">
<p style="margin: 0;">
Bussissa voit ostaa kertalipun tai ladata matkakortin käteisellä. Samalla lipulla tai matkakortilla
@@ -19,9 +19,10 @@
</p>
</div>
</div>
+
<div class="card-columns">
<!-- Single ticket prices -->
- <div class="card foli-card box-shadow">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Kertaliput</h3>
</div>
@@ -57,7 +58,7 @@
</table>
</div>
<!-- Foli card prices -->
- <div class="card foli-card box-shadow">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Arvokortit</h3>
</div>
@@ -148,7 +149,7 @@
</div>
</div>
<!-- Foli season pass prices -->
- <div class="card foli-card box-shadow">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Kausikortit</h3>
</div>
@@ -270,7 +271,7 @@
</table>
</div>
<!-- Foli double card prices -->
- <div class="card foli-card box-shadow">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Tuplakortit</h3>
</div>
@@ -308,7 +309,7 @@
</table>
</div>
<!-- Tourist cards -->
- <div class="card foli-card box-shadow">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Matkailijakortit</h3>
</div>
@@ -345,7 +346,7 @@
</table>
</div>
<!-- Mobile tickets -->
- <div class="card foli-card box-shadow">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Mobiililippu</h3>
</div>
@@ -358,7 +359,7 @@
</div>
</div>
<!-- Sale and service locations -->
- <div class="card foli-card box-shadow">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Myynti- ja palvelupisteet</h3>
</div>
@@ -390,7 +391,7 @@
</div>
</div>
<!-- Foli card top-up locations -->
- <div class="card foli-card box-shadow">
+ <div class="card foli-card box-shadow content-spaced">
<div class="card-header">
<h3 class="card-title">Latauspisteet</h3>
</div>
diff --git a/templates/index.html b/templates/index.html
index 965ed4f1fc2caee898b7457edfc215bfe3f378de..3f46acad1f67526a786dca2462c02c037a1d45f0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -57,7 +57,7 @@
<div class="card menu-card bg-foli text-center box-shadow">
<img class="card-img-top" src="{{ util.static_url('img/application_placeholder.png') }}" alt="{{ _("Card Image") }}">
<div class="card-body">
- <a role="button" href="{{ util.view_url('foli/app') }}" class="btn btn-lg btn-primary">{{ _("Föli application") }}</a>
+ <a role="button" href="{{ util.view_url('foli/app') }}" class="btn btn-lg btn-primary">{{ _("Föli App") }}</a>
</div>
</div>
</div>
diff --git a/templates/info.html b/templates/info.html
index 9c22c465115f81247978172154eabf9f26861e95..824e1454c77f52ae77b46445222f5745f0dddfe9 100644
--- a/templates/info.html
+++ b/templates/info.html
@@ -5,33 +5,70 @@
{% set localized = false %}
{% set content_lang = 'fi' %}
+{% block head %}
+ {{- super() }}
+ <style>
+ .h-auto { height: auto; }
+ .info-card > #visitTurku { overflow-y: scroll; }
+ .info-card > #twitter { height: 528px; }
+
+ .iframe-container {
+ width: 100%;
+ height: 100px;
+ position: relative;
+ }
+ .iframe-area, .iframe-cover {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ .iframe-area {
+ z-index: 0;
+ }
+ .iframe-cover {
+ z-index: 1;
+ }
+ </style>
+{% endblock head %}
+
{% block content %}
<div class="container">
<div class="row">
<div class="col-12">
<!-- Forecast7.com -->
- <!-- Automatic height overrides the 600px height from stylesheet.css -->
- <div class="card info-card box-shadow" style="height: auto;">
+ {# 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-header">
- <h3 class="card-title">Forecast7.com -sää</h3>
+ <h3 class="card-title">Säätiedot</h3>
</div>
- <div id="forecast7">
- <a class="weatherwidget-io" href="https://forecast7.com/en/60d4522d27/turku/" data-label_1="TURKU" data-label_2="Sää" data-theme="original">TURKU Sää</a>
- <script>
- !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = 'https://weatherwidget.io/js/widget.min.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'weatherwidget-io-js');
- </script>
+ <div class="iframe-container">
+ <div class="iframe-area">
+ <div id="forecast7">
+ <a class="weatherwidget-io" href="https://forecast7.com/en/60d4522d27/turku/" data-label_1="TURKU" data-label_2="Sää" data-theme="original">TURKU Sää</a>
+ <script>
+ !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = 'https://weatherwidget.io/js/widget.min.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'weatherwidget-io-js');
+ </script>
+ </div>
+ </div>
+ <div class="iframe-cover"> </div>
</div>
</div>
+ <small class="source-link pull-right text-shadow content-spaced">Lähde: <a class="text-dark" href="https://forecast7.com/en/60d4522d27/turku/">Forecast7.com</a></small>
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- Twitter feed -->
- <div class="card info-card box-shadow">
+ <div class="card info-card box-shadow content-spaced">
+ <div class="card-header">
+ <h3 class="card-title">Twiitit: Turkukaupunki</h3>
+ </div>
<div id="twitter">
- <a class="twitter-timeline" data-height="600" data-dnt="true" data-theme="light" href="https://twitter.com/Turkukaupunki?ref_src=twsrc%5Etfw">
+ <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">
Twiitit: Turkukaupunki
</a>
</div>
@@ -43,7 +80,7 @@
<div class="card-header">
<h3 class="card-title">Visit Turku -uutiset</h3>
</div>
- <div id="visitTurku" class="list-group list-group-flush" style="overflow-y: scroll"></div>
+ <div id="visitTurku" class="list-group list-group-flush"></div>
</div>
</div>
</div>
@@ -83,18 +120,20 @@
{
limit: 10,
layoutTemplate: '{entries}',
+ // using the raw body here would give a better user experience, but it is a security risk and can result in broken HTML
entryTemplate: `
<a href="{url}" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-foli">{title}</h5>
</div>
- <p class="mb-1">{body}</p>
+ <p class="mb-1">{bodyPlain}</p>
<small class="pull-right">{author} - {date}</small>
</a>`
}
).disableExternalLinks();
$('#twitter').disableExternalLinks(); // in case the widget fails to load disable the link in the container as a placeholder
+ $('small.source-link').disableExternalLinks();
twttr.ready(function (twttr) {
twttr.events.bind('loaded', function (e) {
diff --git a/templates/internal/base.html b/templates/internal/base.html
index 6c40f2add4816ab41e5b4ffc080e9e8b338ae691..d5563545e37e8168a74187a234605824740d3c92 100644
--- a/templates/internal/base.html
+++ b/templates/internal/base.html
@@ -70,7 +70,7 @@
<main class="container main" role="main">
<div class="content-spaced-lg">
{% if not localized and g.lang_code != content_lang %}
- <div class="alert alert-info alert-dismissible show" role="alert">
+ <div class="alert alert-info alert-dismissible box-shadow show" role="alert">
{{ _("The content for this view is not available for your selected language, the contents are displayed below in their original language.") }}
<!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
diff --git a/templates/map.html b/templates/map.html
index 0c0f96a211c49c3f92c15d560b194d39fe12b17d..46539269a1b2e65ba22755ba5b433412f8ffb7c6 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -46,13 +46,17 @@
<!-- draw the map -->
<div class="card border-foli box-shadow">
<div class="card-body p-0">
-
<div class="embed-responsive embed-responsive-{% if not g.is_kiosk %}16by9{% else %}1by1{% endif %}">
<!-- include the map in this div -->
<div id="map-canvas"></div>
</div>
</div>
</div>
+ <div class="text-center">
+ <small class="text-shadow">
+ {{ _("Location information is updated with a 10-30 second delay. Due to network conditions, latency or lost location updates buses may at times appear to move in an unrealistic way.") }}
+ </small>
+ </div>
{% endblock content %}
diff --git a/templates/timetables.html b/templates/timetables.html
index 18f43d445c71e38be4a557da5583fe95c185a6cf..ea900dd8736d61a73bbf23d9a1db278c606138c9 100644
--- a/templates/timetables.html
+++ b/templates/timetables.html
@@ -36,7 +36,7 @@
<div class="row content-spaced-lg">
<div class="col text-center">
- <small class="text-shadow">{{ _("Information last updated a minute ago") }}</small>
+ <small class="text-shadow">{{ _("Information last updated: ") }} {{ util.time_short(server_time(isoDate = False, tz = stop_info.stop_timezone)) }}</small>
</div>
</div>