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>