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