From 1a0d95c232ba1486d08348197c91a08f567aab78 Mon Sep 17 00:00:00 2001
From: RoopeLehtonen <rosale@utu.fi>
Date: Sun, 25 Feb 2018 19:23:16 +0200
Subject: [PATCH] =?UTF-8?q?Updated=20styling=20for=20f=C3=B6li=20and=20inf?=
=?UTF-8?q?o=20pages.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
static/css/stylesheet.css | 31 +++++++++++++++
templates/foli.html | 79 +++++++++++++++++----------------------
templates/info.html | 11 +++---
3 files changed, 71 insertions(+), 50 deletions(-)
diff --git a/static/css/stylesheet.css b/static/css/stylesheet.css
index 24fd81e..93f0686 100644
--- a/static/css/stylesheet.css
+++ b/static/css/stylesheet.css
@@ -29,6 +29,11 @@ body { height: 100%; overflow-y: scroll; }
@media only screen and (max-width: 768px) {
.flex-grow { width: 100%; }
+
+ /* Column count for the F�li info page */
+ .card-columns {
+ column-count: 1;
+ }
}
/* sticky footer and header: fixed position (for display units, doesn't scroll) */
@@ -244,6 +249,27 @@ body {
right: 0;
}
+/* F�li info page cards */
+.foli-card {
+ border: 1px solid #FF9900;
+}
+.foli-card .card-header {
+ background-color: #FF9900;
+}
+th .text-muted {
+ font-size: 14px;
+ font-style: normal;
+ margin: 0;
+}
+
+/* Info page cards */
+.info-card {
+ height: 600px;
+ background-color: #FF9900;
+ border: 1px solid #FF9900;
+ margin-bottom: 30px;
+}
+
/* larger screen layout */
@media (min-width: 768px) {
.header { min-height: 33.63rem; /* 33.63rem = 538.5px, font-size 16 (half of the current image height) */ }
@@ -268,4 +294,9 @@ body {
width: 80px;
height: 55px;
}
+
+ /* Column count for the F�li info page */
+ .card-columns {
+ column-count: 2;
+ }
}
diff --git a/templates/foli.html b/templates/foli.html
index 8a42b2e..ee26e49 100644
--- a/templates/foli.html
+++ b/templates/foli.html
@@ -12,9 +12,9 @@
<h2>Hinnat</h2>
<p>Bussissa voit ostaa kertalipun tai ladata matkakortin käteisellä. Samalla lipulla tai matkakortilla on vaihtoaikaa 2 tuntia.</p>
- <div class="card-columns" style="column-count: 2;">
+ <div class="card-columns">
<!-- Single ticket prices -->
- <div class="card">
+ <div class="card foli-card">
<div class="card-header">
<h3 class="card-title">Kertaliput</h3>
</div>
@@ -50,14 +50,14 @@
</table>
</div>
<!-- Foli card prices -->
- <div class="card">
+ <div class="card foli-card">
<div class="card-header">
<h3 class="card-title">Arvokortit</h3>
</div>
<div class="card-body">
<h4 class="card-title">Haltijakohtainen</h4>
</div>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
<th colspan="3">Aikuiset (≥ 20 v)</th>
@@ -79,7 +79,7 @@
<div class="card-body">
<h4 class="card-title">Henkilökohtaiset</h4>
</div>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
<th colspan="3">Lapset (alle 15 v)</th>
@@ -98,10 +98,10 @@
</tr>
</tbody>
</table>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
- <th colspan="3">Nuoret (15-19 v) ja opiskelijat</th>
+ <th colspan="3">Nuoret (15-19 v) ja opiskelijat<br /><p class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</p></th>
</tr>
</thead>
<tbody>
@@ -117,13 +117,10 @@
</tr>
</tbody>
</table>
- <div class="card-body">
- <p class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</p>
- </div>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
- <th colspan="3">Seniorit (≥ 65 v) ja vammaiset</th>
+ <th colspan="3">Seniorit (≥ 65 v) ja vammaiset<br /><p class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</p></th>
</tr>
</thead>
<tbody>
@@ -139,22 +136,19 @@
</tr>
</tbody>
</table>
- <div class="card-body">
- <p class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</p>
- </div>
<div class="card-footer">
<p>*ma-pe klo 9:00-12:59, **klo 23:00-04:00</p>
</div>
</div>
<!-- Foli season pass prices -->
- <div class="card">
+ <div class="card foli-card">
<div class="card-header">
<h3 class="card-title">Kausikortit</h3>
</div>
<div class="card-body">
<h4 class="card-title">Haltijakohtaiset</h4>
</div>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
<th colspan="4">Aikuiset (≥ 20 v)</th>
@@ -187,7 +181,7 @@
</tr>
</tbody>
</table>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
<th colspan="3">Haltijakohtainen erikoiskortti</th>
@@ -204,7 +198,7 @@
<div class="card-body">
<h4 class="card-title">Henkilökohtaiset</h4>
</div>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
<th colspan="4">Lapset (alle 15 v)</th>
@@ -225,10 +219,10 @@
</tr>
</tbody>
</table>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
- <th colspan="4">Nuoret (15-19 v) ja opiskelijat</th>
+ <th colspan="4">Nuoret (15-19 v) ja opiskelijat<br /><p class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</p></th>
</tr>
</thead>
<tbody>
@@ -244,15 +238,12 @@
<td>33 €</td>
<td>8</td>
</tr>
- <tr>
- <td colspan="4" class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</td>
- </tr>
</tbody>
</table>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
- <th colspan="4">Seniorit (≥ 65 v) ja vammaiset</th>
+ <th colspan="4">Seniorit (≥ 65 v) ja vammaiset<br /><p class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</p></th>
</tr>
</thead>
<tbody>
@@ -268,21 +259,18 @@
<td>33 €</td>
<td>8</td>
</tr>
- <tr>
- <td colspan="4" class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</td>
- </tr>
</tbody>
</table>
</div>
<!-- Foli double card prices -->
- <div class="card">
+ <div class="card foli-card">
<div class="card-header">
<h3 class="card-title">Tuplakortit</h3>
</div>
<div class="card-body">
<h4 class="card-title">Haltijakohtainen</h4>
</div>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
<th colspan="2">Aikuiset (≥ 20 v)</th>
@@ -298,10 +286,10 @@
<div class="card-body">
<h4 class="card-title">Henkilökohtaiset</h4>
</div>
- <table class="table">
+ <table class="table table-striped">
<thead>
<tr>
- <th colspan="2">Nuoret (15-19 v) ja opiskelijat</th>
+ <th colspan="2">Nuoret (15-19 v) ja opiskelijat<br /><p class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</p></th>
</tr>
</thead>
<tbody>
@@ -309,21 +297,18 @@
<td>30 pv</td>
<td>36 €</td>
</tr>
- <tr>
- <td colspan="2" class="text-muted">- Henkikirjoilla tai asunto-osoite Turussa, Kaarinassa, Raisiossa, Naantalissa, Liedossa tai Ruskolla.</td>
- </tr>
</tbody>
</table>
</div>
<!-- Tourist cards -->
- <div class="card">
+ <div class="card foli-card">
<div class="card-header">
<h3 class="card-title">Matkailijakortit</h3>
</div>
<div class="card-body">
- <p>Myydään myös Turku Touringin matkailuneuvonnassa, Aurakatu 4. Ei myydä busseissa.</p>
+ <p>Myydään myös Turku Touringin matkailuneuvonnassa osoitteessa Aurakatu 4. Ei myydä busseissa.</p>
</div>
- <table class="table">
+ <table class="table table-striped">
<tbody>
<tr>
<td>1 vrk</td>
@@ -353,7 +338,7 @@
</table>
</div>
<!-- Mobile tickets -->
- <div class="card">
+ <div class="card foli-card">
<div class="card-header">
<h3 class="card-title">Mobiililippu</h3>
</div>
@@ -361,13 +346,15 @@
<p>
Mobiilisovelluksessa myydään aikuisten ja lasten kertalippuja sekä erimittaisia matkailijatuotteita.
Maksutapoina ovat IQ-maksu, pankki- tai luottokortti sekä matkapuhelinmaksu. Hintaan lisätään
- maksutapalisä. Ohjeet sovelluksen lataamiseen löydät sivun ylälaidan linkistä "Mobiilisovellus".
+ maksutapalisä. Ohjeet sovelluksen lataamiseen löydät etusivun linkistä "Mobiilisovellus".
</p>
</div>
</div>
<!-- Sale and service locations -->
- <div class="card">
- <div class="card-header">Myynti- ja palvelupisteet</div>
+ <div class="card foli-card">
+ <div class="card-header">
+ <h3 class="card-title">Myynti- ja palvelupisteet</h3>
+ </div>
<div class="card-body">
<div class="row">
<div class="col-4">Turku:</div>
@@ -396,8 +383,10 @@
</div>
</div>
<!-- Foli card top-up locations -->
- <div class="card">
- <div class="card-header">Latauspisteet</div>
+ <div class="card foli-card">
+ <div class="card-header">
+ <h3 class="card-title">Latauspisteet</h3>
+ </div>
<div class="card-body">
<div class="col">Turun kaupunginkirjasto</div>
<div class="col">Sokos Wiklund</div>
diff --git a/templates/info.html b/templates/info.html
index 5a8ca9e..b72f55c 100644
--- a/templates/info.html
+++ b/templates/info.html
@@ -10,13 +10,13 @@
<div class="container">
<div class="row">
<div class="col-md-6">
- <div class="card" style="height:600px; margin-bottom: 30px;">
+ <div class="card info-card">
<a class="twitter-timeline" data-height="600" data-dnt="true" data-theme="light" href="https://twitter.com/Turkukaupunki?ref_src=twsrc%5Etfw">Tweets by Turkukaupunki</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<div class="col-md-6">
- <div class="card" style="height: 600px; background-color: #FF9900; margin-bottom: 30px;">
+ <div class="card info-card">
<div class="card-header">
<h3 class="card-title">Visit Turku -uutiset</h3>
</div>
@@ -27,7 +27,7 @@
<div class="row">
<div class="col-md-6">
- <div class="card" style="height:600px; background-color: #FF9900; overflow: auto; margin-bottom: 30px;">
+ <div class="card info-card" style="overflow: auto;">
<div class="card-header">
<h3 class="card-title">AccuWeather</h3>
</div>
@@ -36,9 +36,10 @@
<script type="text/javascript" src="https://oap.accuweather.com/launch.js"></script>
</div>
</div>
- <div class="col-6">
+ <div class="col-md-6">
+ <!-- Empty spot for another card. -->
</div>
</div>
</div>
- {% endblock content %}
+{% endblock content %}
--
GitLab