--- a/templates/ajovuoro.html Tue Jun 13 00:47:24 2017 +0300
+++ b/templates/ajovuoro.html Tue Jun 20 09:37:43 2017 +0300
@@ -3,29 +3,37 @@
<link rel="icon" type="image/png" href="/static/favicon.png" />
<link rel="stylesheet" type="text/css" href="/static/style.css" />
<meta charset='UTF-8' />
-
<style>
- #aikataulu
- {
- margin: auto;
- }
- #aikataulu td
- {
- text-align: center;
- }
- #aikataulu .sarake-pysäkki
+ .sarake-pysäkki, .sarake-pysäkkiviite, .sarake-alue
{
text-align: left;
}
td, th, body
{
font-size: 24pt;
- }
- .sarake-aika, .sarake-tunniste
+ }/*
+ body
+ {
+ background: url('/static/tausta-bussi.png') no-repeat center center fixed;
+ background-size: cover;
+ }*/
+ </style>
+ <script>
+ function openTab(event, category)
{
- width: 15%;
- }
- </style>
+ var tabcontent = document.getElementsByClassName("tab");
+ for (var i = 0; i < tabcontent.length; i++)
+ tabcontent[i].style.display = "none";
+
+ var tablinks = document.getElementsByClassName("tab-button");
+ for (var i = 0; i < tablinks.length; i++)
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+
+ document.getElementById(category).style.display = "block";
+ event.currentTarget.className += " active";
+ window.scrollTo(0, 0);
+ }
+ </script>
<title>{{linja}} {{selite}}</title>
</head>
<body>
@@ -33,24 +41,49 @@
{% if yö %}
🌙
{% endif %}
- <!--Ajo {{numero}}: -->{{linja}} {{selite}}</h1>
- <table id='aikataulu' cellspacing='0'>
- <tr>
- <th class='sarake-aika'>Aika</th>
- <th class='sarake-pysäkkiviite'>Pysäkki</th>
- <th class='sarake-pysäkki'>Nimi</th>
- </tr>
- {% for rivi in reitti %}
- <tr>
- <td class='sarake-aika'>{{rivi['aika']}}</td>
- <td class='sarake-pysäkkiviite'>
- <a href="/pysäkki/{{rivi['tunniste']}}"><img src='/static/pysäkki.png' height='24' /> {{rivi['tunniste']}}</a>
- </td>
- <td class='sarake-pysäkki'>
- <a href="/pysäkki/{{rivi['tunniste']}}">{{rivi['nimi']}}</a>
- </td>
- </tr>
- {% endfor %}
- </table>
+ {{linja}} {{selite}}</h1>
+ <nav>
+ <div class="tab-bar">
+ <span></span>
+ <button class="tab-button active" onclick="openTab(event, 'tab-overview')">Reitti</button>
+ <button class="tab-button" onclick="openTab(event, 'tab-stops')">Pysäkit</button>
+ <span></span>
+ </div>
+ </nav>
+ <center>Ajomatka: {{'%.1f' % length}}km</center>
+ <div id="tab-overview" class="tab">
+ <table class='aikataulu' cellspacing='0'>
+ <tr>
+ <th class='sarake-aika'>Aika</th>
+ <th class='sarake-alue'>Alue</th>
+ </tr>
+ {% for rivi in suppea_reitti %}
+ <tr>
+ <td class='sarake-aika'>{{rivi['aika']}}</td>
+ <td class='sarake-alue'>{{rivi['alue']}}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
+ <div id="tab-stops" class="tab" style="display: none">
+ <table class='aikataulu' cellspacing='0'>
+ <tr>
+ <th class='sarake-aika'>Aika</th>
+ <th class='sarake-pysäkkiviite'>Pysäkki</th>
+ <th class='sarake-pysäkki'>Nimi</th>
+ </tr>
+ {% for rivi in reitti %}
+ <tr>
+ <td class='sarake-aika'>{{rivi['aika']}}</td>
+ <td class='sarake-pysäkkiviite'>
+ <a href="/pysäkki/{{rivi['tunniste']}}"><img src='/static/pysäkki.png' height='24' /> {{rivi['tunniste']}}</a>
+ </td>
+ <td class='sarake-pysäkki'>
+ <a href="/pysäkki/{{rivi['tunniste']}}">{{rivi['nimi']}}</a>
+ </td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
</body>
</html>