--- a/templates/stop_display.html Wed Dec 06 22:47:45 2017 +0200
+++ b/templates/stop_display.html Thu Dec 07 16:55:44 2017 +0200
@@ -23,12 +23,14 @@
vertical-align: middle;
}
- .next-leave-table
+ .next-leave-list
{
width: 100%;
}
- .next-leave-time, .next-leave-destination, .next-leave-route
+ .next-leave-time,
+ .next-leave-places li.next-leave-destination,
+ .next-leave-route
{
font-weight: bold;
font-size: 10vmin;
@@ -36,21 +38,26 @@
.next-leave-time
{
- width: 25%;
- text-align: left
+ text-align: left;
}
.next-leave-route
{
- width: 25%;
+ border: 0.5vmin solid black;
+ border-radius: 100%;
+ padding: 8px;
+ min-width: 12vmin;
+ min-height: 12vmin;
+ text-align: center;
+ background: #ffd90f;
}
- .next-leave-destination
+ .next-leave-places
{
- width: 50%;
+ text-align: center;
}
- .via
+ .next-leave-places li
{
list-style: none;
font-size: 6vmin;
@@ -58,11 +65,6 @@
font-weight: normal;
}
- .next-leave-table
- {
- text-align: center;
- }
-
#other-leaves
{
width: 100%;
@@ -169,7 +171,6 @@
}
}
</style>
-
<script>
num_visible_leaves = 3;
num_imminent_leaves = {{num_imminent_leaves}};
@@ -222,9 +223,11 @@
<body onload='cycle_leaves()'>
<h1><img src="../static/pysäkki.png" height="128" /><span id='stop-name'>{{ref}} {{name}}</span></h1>
<div class='next-leave'>
- <table class='next-leave-table'>
+ <ul class='next-leave-list'>
{% for schedule_entry in schedule[:num_imminent_leaves] %}
- <tbody id="leave-{{schedule_entry['index']}}">
+ <li id="leave-{{schedule_entry['index']}}">
+
+ <table>
<tr>
<td class='next-leave-time'>
{% if schedule_entry['imminent'] %}
@@ -233,25 +236,29 @@
{{schedule_entry['time']}}​
{% endif %}
</td>
- <td class='next-leave-route'>{{schedule_entry['route']}}</td>
- <td class='next-leave-destination'>{{schedule_entry['sign']['destination']}}
- <span class='via'><br />
- {% if num_imminent_leaves > 1 and schedule_entry['sign']['via'][0] and schedule_entry['sign']['via'][1] %}
- {{schedule_entry['sign']['via'][0]}} - {{schedule_entry['sign']['via'][1]}}
- {% for entry in schedule_entry['sign']['via'][2:] %}<br />{{entry}}{% endfor %}</span>
- {% else %}
- {% for entry in schedule_entry['sign']['via'] %}{{entry}}<br />{% endfor %}</span>
- {% endif %}
- </th>
+ <td rowspan="2">
+ <ul class="next-leave-places">
+ <li class='next-leave-destination'>
+ {{schedule_entry['sign']['destination']}}</li>
+ {% for entry in schedule_entry['sign']['via'] %}
+ <li>{{entry}}</li>
+ {% endfor %}
+ </ul>
+ </td>
</tr>
- </tbody>
+ <tr>
+ <td><span class='next-leave-route'>{{schedule_entry['route']}}</span></td>
+ </tr>
+ </table>
+
+ </li>
{% endfor %}
- </table>
+ </ul>
</div>
{% if schedule[num_imminent_leaves] %}
<div id='other-leaves'>
<table cellspacing="0">
- {% for halt in schedule[num_imminent_leaves:] %}
+ {% for halt in schedule[num_imminent_leaves:num_imminent_leaves + 2] %}
<tr id="leave-{{halt['index']}}" style='display: none'>
<td class='other-leave-time'>{{halt['time']}}</td>
<td class='other-leave-route'>{{halt['route']}}</td>