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

add a hack to disable weather widget links, update twitter widget 

- change CSS, card bottom margins now use content-spaced on all pages
parent 9f6f0c15
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
static/css/stylesheet.css
+ 6
− 8
View file @ ab5d4e20
...@@ -8,10 +8,10 @@ body { padding: 0; margin: 0; font-size: 16px; } ...@@ -8,10 +8,10 @@ body { padding: 0; margin: 0; font-size: 16px; }
.footer { min-height: 3.125rem; } .footer { min-height: 3.125rem; }
/* content spacing */ /* content spacing */
.content-spaced { margin-bottom: 1.25rem; } .content-spaced { margin-bottom: 1.25rem !important; }
.content-spaced-lg { margin-bottom: 2.5rem; } .content-spaced-lg { margin-bottom: 2.5rem !important; }
.remove-padding { padding: 0; } .remove-padding { padding: 0 !important; }
.remove-margin { margin: 0; } .remove-margin { margin: 0 !important; }
/* vertical center the content view (header + footer + content-spaced-lg) */ /* vertical center the content view (header + footer + content-spaced-lg) */
.align-items-center.align-vertical-center { .align-items-center.align-vertical-center {
...@@ -40,8 +40,8 @@ body { height: 100%; overflow-y: scroll; } ...@@ -40,8 +40,8 @@ body { height: 100%; overflow-y: scroll; }
/* sticky footer and header: fixed position (for display units, doesn't 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 */ } .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%; } .header-sticky { z-index: 2; position: fixed; top: 0; width: 100%; }
.footer-sticky { z-index: 1; position: fixed; bottom: 0; width: 100%; } .footer-sticky { z-index: 2; position: fixed; bottom: 0; width: 100%; }
.body-sticky-padding .list-group-item:hover { .body-sticky-padding .list-group-item:hover {
z-index: 0 !important; z-index: 0 !important;
...@@ -272,7 +272,6 @@ th .text-muted { ...@@ -272,7 +272,6 @@ th .text-muted {
height: 37.5rem; height: 37.5rem;
background-color: #f7aa00; background-color: #f7aa00;
border: 1px solid #f7aa00; border: 1px solid #f7aa00;
margin-bottom: 1.875rem;
} }
.info-card .card-header { .info-card .card-header {
...@@ -283,7 +282,6 @@ th .text-muted { ...@@ -283,7 +282,6 @@ th .text-muted {
/* Föli application page*/ /* Föli application page*/
.app-card { .app-card {
border: 1px solid #f7aa00; border: 1px solid #f7aa00;
margin-top: 1.875rem;
} }
.app-card .card-header { .app-card .card-header {
......
templates/foli/app.html
+ 13
− 11
View file @ ab5d4e20
{% extends 'internal/base.html' %} {% extends 'internal/base.html' %}
{% set title = 'Föli-sovellus' %} {% set title = 'Föli-Äppi' %}
{% set sticky_banners = true %} {% set sticky_banners = true %}
{% set localized = false %} {% set localized = false %}
{% set content_lang = 'fi' %} {% set content_lang = 'fi' %}
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<h1>Föli - Turun seudun joukkoliikenne</h1> <h1 class="text-foli text-shadow">Föli - Turun seudun joukkoliikenne</h1>
<h2>Mobiilisovellus</h2> <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"> <div class="card-header">
<h3 class="card-title">Bussilippu kännykällä</h3> <h3 class="card-title">Bussilippu kännykällä</h3>
</div> </div>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</div> </div>
</div> </div>
<div class="card app-card box-shadow"> <div class="card app-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Mobiililiput</h3> <h3 class="card-title">Mobiililiput</h3>
</div> </div>
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<div class="card app-card box-shadow"> <div class="card app-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Matkakortin lataaminen mobiilisovelluksella</h3> <h3 class="card-title">Matkakortin lataaminen mobiilisovelluksella</h3>
</div> </div>
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</div> </div>
</div> </div>
<div class="card app-card box-shadow"> <div class="card app-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Mobiilikausilippu kokeilukäytössä</h3> <h3 class="card-title">Mobiilikausilippu kokeilukäytössä</h3>
</div> </div>
...@@ -159,10 +159,12 @@ ...@@ -159,10 +159,12 @@
</p> </p>
</div> </div>
</div> </div>
<h4 style="margin-top: 30px;"> <div class="text-center">
<small class="text-shadow">
Sovelluksen on tehnyt iQ Payments Oy. Turun seudun joukkoliikenne Fölin mobiilimaksamisen mahdollistava Sovelluksen on tehnyt iQ Payments Oy. Turun seudun joukkoliikenne Fölin mobiilimaksamisen mahdollistava
sovellus palkittiin parhaana mobiilimaksamisen sovelluksena Slush-tapahtumassa syksyllä 2015. sovellus palkittiin parhaana mobiilimaksamisen sovelluksena Slush-tapahtumassa syksyllä 2015.
</h4> </small>
</div>
</div> </div>
{% endblock content %} {% endblock content %}
templates/foli/index.html
+ 12
− 11
View file @ ab5d4e20
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
{% block content %} {% block content %}
<div class="container"> <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 content-spaced">
<div class="card foli-card box-shadow" style="margin-bottom: 20px; margin-top: 20px;">
<div class="card-body"> <div class="card-body">
<p style="margin: 0;"> <p style="margin: 0;">
Bussissa voit ostaa kertalipun tai ladata matkakortin käteisellä. Samalla lipulla tai matkakortilla Bussissa voit ostaa kertalipun tai ladata matkakortin käteisellä. Samalla lipulla tai matkakortilla
...@@ -19,9 +19,10 @@ ...@@ -19,9 +19,10 @@
</p> </p>
</div> </div>
</div> </div>
<div class="card-columns"> <div class="card-columns">
<!-- Single ticket prices --> <!-- Single ticket prices -->
<div class="card foli-card box-shadow"> <div class="card foli-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Kertaliput</h3> <h3 class="card-title">Kertaliput</h3>
</div> </div>
...@@ -57,7 +58,7 @@ ...@@ -57,7 +58,7 @@
</table> </table>
</div> </div>
<!-- Foli card prices --> <!-- Foli card prices -->
<div class="card foli-card box-shadow"> <div class="card foli-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Arvokortit</h3> <h3 class="card-title">Arvokortit</h3>
</div> </div>
...@@ -148,7 +149,7 @@ ...@@ -148,7 +149,7 @@
</div> </div>
</div> </div>
<!-- Foli season pass prices --> <!-- Foli season pass prices -->
<div class="card foli-card box-shadow"> <div class="card foli-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Kausikortit</h3> <h3 class="card-title">Kausikortit</h3>
</div> </div>
...@@ -270,7 +271,7 @@ ...@@ -270,7 +271,7 @@
</table> </table>
</div> </div>
<!-- Foli double card prices --> <!-- Foli double card prices -->
<div class="card foli-card box-shadow"> <div class="card foli-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Tuplakortit</h3> <h3 class="card-title">Tuplakortit</h3>
</div> </div>
...@@ -308,7 +309,7 @@ ...@@ -308,7 +309,7 @@
</table> </table>
</div> </div>
<!-- Tourist cards --> <!-- Tourist cards -->
<div class="card foli-card box-shadow"> <div class="card foli-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Matkailijakortit</h3> <h3 class="card-title">Matkailijakortit</h3>
</div> </div>
...@@ -345,7 +346,7 @@ ...@@ -345,7 +346,7 @@
</table> </table>
</div> </div>
<!-- Mobile tickets --> <!-- Mobile tickets -->
<div class="card foli-card box-shadow"> <div class="card foli-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Mobiililippu</h3> <h3 class="card-title">Mobiililippu</h3>
</div> </div>
...@@ -358,7 +359,7 @@ ...@@ -358,7 +359,7 @@
</div> </div>
</div> </div>
<!-- Sale and service locations --> <!-- Sale and service locations -->
<div class="card foli-card box-shadow"> <div class="card foli-card box-shadow content-spaced">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Myynti- ja palvelupisteet</h3> <h3 class="card-title">Myynti- ja palvelupisteet</h3>
</div> </div>
...@@ -390,7 +391,7 @@ ...@@ -390,7 +391,7 @@
</div> </div>
</div> </div>
<!-- Foli card top-up locations --> <!-- 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"> <div class="card-header">
<h3 class="card-title">Latauspisteet</h3> <h3 class="card-title">Latauspisteet</h3>
</div> </div>
......
templates/index.html
+ 1
− 1
View file @ ab5d4e20
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<div class="card menu-card bg-foli text-center box-shadow"> <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") }}"> <img class="card-img-top" src="{{ util.static_url('img/application_placeholder.png') }}" alt="{{ _("Card Image") }}">
<div class="card-body"> <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> </div>
</div> </div>
......
templates/info.html
+ 51
− 12
View file @ ab5d4e20
...@@ -5,17 +5,47 @@ ...@@ -5,17 +5,47 @@
{% set localized = false %} {% set localized = false %}
{% set content_lang = 'fi' %} {% 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 %} {% block content %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<!-- Forecast7.com --> <!-- Forecast7.com -->
<!-- Automatic height overrides the 600px height from stylesheet.css --> {# 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" style="height: auto;"> <div class="card info-card box-shadow h-auto">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Forecast7.com -sää</h3> <h3 class="card-title">Säätiedot</h3>
</div> </div>
<div class="iframe-container">
<div class="iframe-area">
<div id="forecast7"> <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> <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> <script>
...@@ -23,15 +53,22 @@ ...@@ -23,15 +53,22 @@
</script> </script>
</div> </div>
</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> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<!-- Twitter feed --> <!-- 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"> <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 Twiitit: Turkukaupunki
</a> </a>
</div> </div>
...@@ -43,7 +80,7 @@ ...@@ -43,7 +80,7 @@
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Visit Turku -uutiset</h3> <h3 class="card-title">Visit Turku -uutiset</h3>
</div> </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> </div>
</div> </div>
...@@ -83,18 +120,20 @@ ...@@ -83,18 +120,20 @@
{ {
limit: 10, limit: 10,
layoutTemplate: '{entries}', 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: ` entryTemplate: `
<a href="{url}" class="list-group-item list-group-item-action flex-column align-items-start"> <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"> <div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-foli">{title}</h5> <h5 class="mb-1 text-foli">{title}</h5>
</div> </div>
<p class="mb-1">{body}</p> <p class="mb-1">{bodyPlain}</p>
<small class="pull-right">{author} - {date}</small> <small class="pull-right">{author} - {date}</small>
</a>` </a>`
} }
).disableExternalLinks(); ).disableExternalLinks();
$('#twitter').disableExternalLinks(); // in case the widget fails to load disable the link in the container as a placeholder $('#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.ready(function (twttr) {
twttr.events.bind('loaded', function (e) { twttr.events.bind('loaded', function (e) {
......
templates/internal/base.html
+ 1
− 1
View file @ ab5d4e20
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<main class="container main" role="main"> <main class="container main" role="main">
<div class="content-spaced-lg"> <div class="content-spaced-lg">
{% if not localized and g.lang_code != content_lang %} {% 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.") }} {{ _("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"> <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
......
templates/map.html
+ 5
− 1
View file @ ab5d4e20
...@@ -46,13 +46,17 @@ ...@@ -46,13 +46,17 @@
<!-- draw the map --> <!-- draw the map -->
<div class="card border-foli box-shadow"> <div class="card border-foli box-shadow">
<div class="card-body p-0"> <div class="card-body p-0">
<div class="embed-responsive embed-responsive-{% if not g.is_kiosk %}16by9{% else %}1by1{% endif %}"> <div class="embed-responsive embed-responsive-{% if not g.is_kiosk %}16by9{% else %}1by1{% endif %}">
<!-- include the map in this div --> <!-- include the map in this div -->
<div id="map-canvas"></div> <div id="map-canvas"></div>
</div> </div>
</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 %} {% endblock content %}
......
templates/timetables.html
+ 1
− 1
View file @ ab5d4e20
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="row content-spaced-lg"> <div class="row content-spaced-lg">
<div class="col text-center"> <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>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment