M assets/css/app.css => assets/css/app.css +6 -0
@@ 8,6 8,7 @@
h1 { @apply text-2xl font-bold mb-4 }
h2 { @apply text-xl font-bold mb-4 }
h3 { @apply text-lg font-bold mb-4 }
+ hr { @apply my-4 }
table { @apply border-collapse mb-4 }
tbody > tr:hover { @apply bg-gray-100 }
@@ 18,6 19,8 @@
form { @apply mb-4 }
select { @apply rounded h-10 }
+
+ section + section { @apply mt-4 }
}
@layer components {
@@ 92,4 95,7 @@
@apply px-3 text-gray-500;
content: ">";
}
+
+ .border-left-thin { border-left: 1px dotted gray }
+ .border-left-thick { border-left: 10px solid LightGray }
}
M lib/triglav_web/templates/home/data.html.eex => lib/triglav_web/templates/home/data.html.eex +11 -15
@@ 1,7 1,3 @@
-<style>
- .bl { border-left: 1px dotted gray }
-</style>
-
<main role="main" class="container">
<h1>Data overview</h1>
@@ 13,20 9,20 @@
<thead>
<tr>
<th rowspan="2">Updated at</th>
- <th colspan="3" class="bl">Nodes</th>
- <th colspan="3" class="bl">Ways</th>
- <th colspan="3" class="bl">Relations</th>
- <th rowspan="2" class="bl">Earliest timestamp</th>
+ <th colspan="3" class="border-left-thin">Nodes</th>
+ <th colspan="3" class="border-left-thin">Ways</th>
+ <th colspan="3" class="border-left-thin">Relations</th>
+ <th rowspan="2" class="border-left-thin">Earliest timestamp</th>
<th rowspan="2">Latest timestamp</th>
</tr>
<tr>
- <th class="bl">Add</th>
+ <th class="border-left-thin">Add</th>
<th>Del</th>
<th>Mod</th>
- <th class="bl">Add</th>
+ <th class="border-left-thin">Add</th>
<th>Del</th>
<th>Mod</th>
- <th class="bl">Add</th>
+ <th class="border-left-thin">Add</th>
<th>Del</th>
<th>Mod</th>
</tr>
@@ 35,16 31,16 @@
<%= for changes <- @replication_changes do %>
<tr>
<td><%= changes.tstamp %></td>
- <td class="bl"><%= changes.nodes_added %></td>
+ <td class="border-left-thin"><%= changes.nodes_added %></td>
<td><%= changes.nodes_deleted %></td>
<td><%= changes.nodes_modified %></td>
- <td class="bl"><%= changes.ways_added %></td>
+ <td class="border-left-thin"><%= changes.ways_added %></td>
<td><%= changes.ways_deleted %></td>
<td><%= changes.ways_modified %></td>
- <td class="bl"><%= changes.relations_added %></td>
+ <td class="border-left-thin"><%= changes.relations_added %></td>
<td><%= changes.relations_deleted %></td>
<td><%= changes.relations_modified %></td>
- <td class="bl"><%= changes.earliest_timestamp %></td>
+ <td class="border-left-thin"><%= changes.earliest_timestamp %></td>
<td><%= changes.latest_timestamp %></td>
</tr>
<% end %>
M lib/triglav_web/templates/hp/post_offices/index.html.eex => lib/triglav_web/templates/hp/post_offices/index.html.eex +5 -9
@@ 1,7 1,3 @@
-<style>
- .bl { border-left: 1px dotted gray }
-</style>
-
<main role="main" class="container">
<h1>HP Post Offices</h1>
@@ 14,8 10,8 @@
<thead>
<tr>
<th colspan="2">Hrvatska Pošta</th>
- <th rowspan="2" class="bl">Matched OSM node or way</th>
- <th rowspan="2" class="bl">Distance</th>
+ <th rowspan="2" class="border-left-thin">Matched OSM node or way</th>
+ <th rowspan="2" class="border-left-thin">Distance</th>
</tr>
<tr>
<th>Name</th>
@@ 29,15 25,15 @@
<td><%= mapping.post_office.street %></td>
<%= if mapping.node do %>
- <td class="bl"><%= osm_link(mapping.node, tags: [], name: true) %></td>
+ <td class="border-left-thin"><%= osm_link(mapping.node, tags: [], name: true) %></td>
<% end %>
<%= if mapping.way do %>
- <td class="bl"><%= osm_link(mapping.way, tags: [], name: true) %></td>
+ <td class="border-left-thin"><%= osm_link(mapping.way, tags: [], name: true) %></td>
<% end %>
<%= if !mapping.node and !mapping.way do %>
- <td class="bl text-gray">Not found</td>
+ <td class="border-left-thin text-gray-500">Not found</td>
<% end %>
<%= if mapping.distance && mapping.distance <= 50 do %>
M lib/triglav_web/templates/hps/tracks/detail.html.eex => lib/triglav_web/templates/hps/tracks/detail.html.eex +8 -33
@@ 1,34 1,5 @@
<link rel="stylesheet" type="text/css" href="<%= Routes.static_path(@conn, "/leaflet/leaflet.css") %>">
-<style type="text/css">
- #map {
- width: 100%;
- height: 400px;
- background-color: lemonchiffon;
- }
-
- #elevation {
- margin-top: 1rem;
- position: relative;
- width: 100%;
- padding-bottom: 20%;
- border: 1px solid gray;
- }
-
- #elevation-chart, #elevation-overlay {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-</style>
-
-<script id="elevations" type="application/json"><%= raw(@elevations) %></script>
-<script id="times" type="application/json"><%= raw(@times) %></script>
-<script id="distances" type="application/json"><%= raw(@distances) %></script>
-<script id="linestring" type="text/plain"><%= raw(@linestring) %></script>
-
<main role="main" class="container">
<h1>HPS Track <%= @track.route_no %>: <%= @track.name %></h1>
@@ 59,17 30,21 @@
</tr>
</table>
- <div id="map"></div>
+ <div id="map" class="w-full h-[400px] border border-gray-300"></div>
- <div id="elevation">
- <canvas id="elevation-chart">
+ <div id="elevation" class="mt-4 relative w-full pb-[25%] border border-gray-300">
+ <canvas id="elevation-chart" class="absolute w-full h-full top-0 left-0">
<p>Your browser doesn’t support HTML5 Canvas. If it did you'd see an elevation chart.</p>
</canvas>
- <canvas id="elevation-overlay">
+ <canvas id="elevation-overlay" class="absolute w-full h-full top-0 left-0">
<p>Your browser doesn’t support HTML5 Canvas. If it did you'd see an elevation chart.</p>
</canvas>
</div>
</main>
+<script id="elevations" type="application/json"><%= raw(@elevations) %></script>
+<script id="times" type="application/json"><%= raw(@times) %></script>
+<script id="distances" type="application/json"><%= raw(@distances) %></script>
+<script id="linestring" type="text/plain"><%= raw(@linestring) %></script>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/track.js") %>"></script>
M lib/triglav_web/templates/hps/tracks/index.html.eex => lib/triglav_web/templates/hps/tracks/index.html.eex +9 -11
@@ 13,12 13,8 @@
</option>
<% end %>
</select>
- <button class="button" type="submit">
- Go
- </button>
- <a href="?" class="button">
- Clear
- </a>
+ <button class="button" type="submit">Go</button>
+ <a href="?" class="button">Clear</a>
</form>
<% end %>
@@ 43,13 39,15 @@
<tr>
<td><%= track.ref %></td>
<td><%= track.route_no %></td>
- <td><a href="<%= Routes.hps_tracks_path(TriglavWeb.Endpoint, :detail, track.id) %>">
- <%= track.name %></a>
+ <td>
+ <a href="<%= Routes.hps_tracks_path(TriglavWeb.Endpoint, :detail, track.id) %>">
+ <%= track.name %>
+ </a>
</td>
<td><%= track.region %></td>
- <td class="text-right"><%= track.length %> km</td>
- <td class="text-right"><%= track.height_diff %> m</td>
- <td class="text-right"><%= track.walk_time %> min</td>
+ <td class="text-right whitespace-nowrap"><%= track.length %> km</td>
+ <td class="text-right whitespace-nowrap"><%= track.height_diff %> m</td>
+ <td class="text-right whitespace-nowrap"><%= track.walk_time %> min</td>
<td><a href="<%= track.url %>">www</a></td>
<td><a href="<%= track.gpx1_url %>">GPX1</a></td>
<td><a href="<%= track.gpx2_url %>">GPX2</a></td>
M lib/triglav_web/templates/layout/app.html.eex => lib/triglav_web/templates/layout/app.html.eex +7 -20
@@ 8,31 8,18 @@
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/assets/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/assets/app.js") %>"></script>
</head>
- <body>
+ <body class="font-mono text-sm">
<header>
- <nav class="topnav">
- <div class="container">
- <div class="topnav-title">
- <a href="/">Triglav</a>
- </div>
- <div class="topnav-links">
- <a href="/zet/routes">Routes</a>
- </div>
- <div class="topnav-links">
- <a href="/zet/stops">Stops</a>
- </div>
- <div class="topnav-links">
- <a href="/zet/errors/history">Errors</a>
- </div>
+ <nav class="bg-red-700">
+ <div class="container flex space-x-10 items-baseline">
+ <a class="text-xl text-white" href="/">Triglav</a>
+ <a class="uppercase text-base text-white" href="/zet/routes">Routes</a>
+ <a class="uppercase text-base text-white" href="/zet/stops">Stops</a>
+ <a class="uppercase text-base text-white" href="/zet/errors/history">Errors</a>
</div>
</nav>
</header>
- <section>
- <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
- <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
- </section>
-
<%= @inner_content %>
</body>
</html>
M lib/triglav_web/templates/zet/errors/index.html.eex => lib/triglav_web/templates/zet/errors/index.html.eex +3 -4
@@ 10,8 10,7 @@
Atom feed
</a>
-
- <table style="margin-top: 1rem; width: 100%;">
+ <table class="mt-4 w-full">
<thead>
<tr>
<th>Timestamp</th>
@@ 32,11 31,11 @@
<td><%= item.count %></td>
<%= if item.created_count > item.resolved_count do %>
- <td class="text-red">
+ <td class="text-red-700">
+ <%= item.created_count - item.resolved_count %>
</td>
<% else %>
- <td class="text-green">
+ <td class="text-green-700">
<%= if item.resolved_count > item.created_count do %>-<% end %>
<%= item.resolved_count - item.created_count %>
</td>
M lib/triglav_web/templates/zet/routes/detail.html.eex => lib/triglav_web/templates/zet/routes/detail.html.eex +28 -40
@@ 1,22 1,7 @@
<link rel="stylesheet" type="text/css" href="<%= Routes.static_path(@conn, "/leaflet/leaflet.css") %>">
-<style type="text/css">
- #routes-map {
- height: 600px;
- max-width: 1024px;
- margin: 1rem 0;
- }
-
- .bl { border-left: 10px solid lightgray }
-</style>
-
-<script id="trips-geojson" type="application/json">
- <%= raw(@trips_geojson) %>
-</script>
-
-<script id="zet-stops-geojson" type="application/json">
- <%= raw(@zet_stops_geojson) %>
-</script>
+<script id="trips-geojson" type="application/json"><%= raw(@trips_geojson) %></script>
+<script id="zet-stops-geojson" type="application/json"><%= raw(@zet_stops_geojson) %></script>
<main role="main" class="container-wide">
<ul class="breadcrumbs">
@@ 26,23 11,23 @@
<h1>#<%= @route.id %>: <%= @route.long_name %></h1>
- <div id="routes-map"></div>
+ <div id="routes-map" class="h-[600px] max-w-[1024px] my-4"></div>
<h2>OSM Relations</h2>
<section>
<%= render_relation_hierarchy(@hierarchy) %>
- <%= josm_load_objects(@relations) %>
+ <div class="mt-4"><%= josm_load_objects(@relations) %></div>
</section>
- <%= if length(@route_errors) > 0 or map_size(@relation_errors) > 0 do %>
- <section>
+ <section>
+ <%= if length(@route_errors) > 0 or map_size(@relation_errors) > 0 do %>
<h3>Errors</h3>
<%= if length(@route_errors) > 0 do %>
<ul>
<%= for error <- @route_errors do %>
<li>
- <span class="text-red"><%= render_error(error) %></span>
+ <span class="text-red-700"><%= render_error(error) %></span>
</li>
<% end %>
</ul>
@@ 55,17 40,17 @@
<%= osm_link(relation, tags: ["type"], name: true) %>
<ul>
<%= for error <- errors do %>
- <li><span class="text-red"><%= render_error(error) %></span></li>
+ <li><span class="text-red-700"><%= render_error(error) %></span></li>
<% end %>
</ul>
</li>
<% end %>
</ul>
<% end %>
- </section>
- <% else %>
- <p class="text-green">No errors found.</p>
- <% end %>
+ <% else %>
+ <p class="text-green-700">No errors found.</p>
+ <% end %>
+ </section>
<section>
<%= for trip <- @trips do %>
@@ 77,9 62,9 @@
<thead>
<tr>
<th colspan="6" class="text-center">OSM Platform</th>
- <th colspan="2" class="text-center bl">GTFS Stop</th>
+ <th colspan="2" class="text-center border-left-thick">GTFS Stop</th>
<%= if has_platform_errors do %>
- <th colspan="1" rowspan="2" class="text-center bl">Errors</th>
+ <th colspan="1" rowspan="2" class="text-center border-left-thick">Errors</th>
<% end %>
</tr>
<tr>
@@ 89,7 74,7 @@
<th>Stop ID</th>
<th>From route</th>
<th>JOSM</th>
- <th class="bl">ID</th>
+ <th class="border-left-thick">ID</th>
<th>Name</th>
</tr>
</thead>
@@ 109,16 94,16 @@
</td>
<td><%= josm_load_objects([member]) %></td>
<%= if platform.stop do %>
- <td class="bl"><%= platform.stop.id %></td>
+ <td class="border-left-thick"><%= platform.stop.id %></td>
<td><%= platform.stop.name %></td>
<% else %>
- <td class="bl"></td>
+ <td class="border-left-thick"></td>
<td></td>
<% end %>
<%= if has_platform_errors do %>
- <td class="bl">
+ <td class="border-left-thick">
<%= if length(errors) > 0 do %>
- <ul class="no-margin text-red">
+ <ul class="m-0 text-red-700">
<%= for error <- errors do %>
<li><%= render_error(error) %></li>
<% end %>
@@ 133,14 118,16 @@
<% colspan = if has_platform_errors, do: 9, else: 8 %>
<%= if trip.sample_trip_id do %>
<tr>
- <td colspan="<%= colspan %>" class="success text-green text-center">
- ✔ Matches ZET trip <b><%= trip.sample_trip_id %></b>
+ <td colspan="<%= colspan %>" class="success text-center">
+ <span class="text-green-700">✔</span>
+ Matches ZET trip <b><%= trip.sample_trip_id %></b>
</td>
</tr>
<% else %>
<tr>
<td class="error text-center" colspan="<%= colspan %>">
- ✖ No GTFS trip matched.
+ <span class="text-red-700">✖</span>
+ No GTFS trip matched.
<a href="<%= Routes.zet_routes_path(TriglavWeb.Endpoint, :match, @route.id, trip.relation.id) %>">
Find a match
</a>
@@ 197,12 184,13 @@
<tr>
<%= if trip.matched_relation do %>
<td class="success text-center" colspan="4">
- <span class="text-green">✔ Matches relation</span>
- <%= osm_link(trip.matched_relation) %>
+ <span class="text-green-700">✔</span>
+ Matches relation <%= osm_link(trip.matched_relation) %>
</td>
<% else %>
<td class="error text-center" colspan="4">
- ✖ No relation matched.
+ <span class="text-red-700">✖</span>
+ No relation matched.
</td>
<% end %>
</tr>
M lib/triglav_web/templates/zet/routes/index.html.eex => lib/triglav_web/templates/zet/routes/index.html.eex +6 -6
@@ 18,7 18,7 @@
<h2>Imported data</h2>
- <div style="display: flex">
+ <div class="flex">
<table>
<tr>
<th colspan="2">GTFS</th>
@@ 41,7 41,7 @@
</tr>
</table>
- <table style="margin-left: 1rem">
+ <table class="ml-4">
<tr>
<th colspan="2">OSM</th>
</tr>
@@ 86,10 86,10 @@
<td>
<%= render_relation_hierarchy(hierarchy) %>
</td>
- <td class="no-wrap <%= if counts.total == counts.matched and counts.unmatched == 0, do: "success" %>">
+ <td class="whitespace-nowrap <%= if counts.total == counts.matched and counts.unmatched == 0, do: "success" %>">
ZET: <%= counts.total %><br />
Matched: <%= counts.matched %><br />
- <span class="<%= if counts.unmatched > 0, do: "text-red" %>">
+ <span class="<%= if counts.unmatched > 0, do: "text-red-700" %>">
Unmatched: <%= counts.unmatched %>
</span>
</td>
@@ 99,12 99,12 @@
<ul>
<%= for error <- route_errors do %>
<li>
- <span class="text-red"><%= render_error(error) %></span>
+ <span class="text-red-700"><%= render_error(error) %></span>
</li>
<% end %>
</ul>
<% else %>
- <span class="text-green">OK!</span>
+ <span class="text-green-700">OK!</span>
<% end %>
</td>
</tr>
M lib/triglav_web/templates/zet/routes/match.html.eex => lib/triglav_web/templates/zet/routes/match.html.eex +1 -1
@@ 12,7 12,7 @@
<%= osm_link(@relation, tags: ["type"], name: true, josm: true) %>
- <hr style="margin: 1rem 0" />
+ <hr />
<%= for {row, index} <- Enum.with_index(@diffs) do %>
<h3>
M lib/triglav_web/templates/zet/stops/index.html.eex => lib/triglav_web/templates/zet/stops/index.html.eex +8 -12
@@ 1,7 1,3 @@
-<style>
- .bl { border-left: 1px dotted gray }
-</style>
-
<main role="main" class="container">
<h1>ZET Stops</h1>
@@ 13,19 9,19 @@
<%= josm_load_objects(@unmatched_platforms, title: "Open all in JOSM", relation_members: false) %>
- <table style="margin-top: 1rem; width: 100%;">
+ <table class="mt-4 w-full">
<thead>
<tr>
<th colspan="3">OSM Node</th>
- <th colspan="3" class="bl">Closest GTFS Stop</th>
- <th rowspan="2" class="bl">Distance</th>
- <th rowspan="2" class="bl">JOSM Actions</th>
+ <th colspan="3" class="border-left-thin">Closest GTFS Stop</th>
+ <th rowspan="2" class="border-left-thin">Distance</th>
+ <th rowspan="2" class="border-left-thin">JOSM Actions</th>
</tr>
<tr>
<th>ID</th>
<th>Name</th>
<th>JOSM</th>
- <th class="bl">ID</th>
+ <th class="border-left-thin">ID</th>
<th>Name</th>
<th>JOSM</th>
</tr>
@@ 36,16 32,16 @@
<td><%= osm_link(member) %></td>
<td><%= member.tags["name"] %></td>
<td><%= josm_load_objects([member], title: "Load") %></td>
- <td class="bl"><%= closest_stop.id %></td>
+ <td class="border-left-thin"><%= closest_stop.id %></td>
<td><%= closest_stop.name %></td>
<td>
<% {lon, lat} = closest_stop.geom.coordinates %>
<%= josm_zoom(lat, lon, title: "Zoom") %>
</td>
- <td class="bl <%= if round(distance) > 500 do %>bg-red<% end %>">
+ <td class="border-left-thin <%= if round(distance) > 500 do %>error<% end %>">
<%= round(distance) %>
</td>
- <td class="bl"><%= josm_add_tags(member, %{"gtfs:stop_id": closest_stop.id}) %></td>
+ <td class="border-left-thin"><%= josm_add_tags(member, %{"gtfs:stop_id": closest_stop.id}) %></td>
</tr>
<% end %>
</tbody>
M lib/triglav_web/views/osm_helpers.ex => lib/triglav_web/views/osm_helpers.ex +5 -5
@@ 30,14 30,14 @@ defmodule TriglavWeb.OsmHelpers do
|> Enum.map(&{&1, Relation.get_tag(relation, &1)})
~E"""
- <span class="osm-link">
- <img src="<%= image_url %>" alt="Relation" />
+ <span class="whitespace-nowrap">
+ <img class="h-4 inline-block" src="<%= image_url %>" alt="Relation" />
<a href="<%= target_url %>"><%= relation.id %></a>
<%= if name? do %>
<%= relation.tags["name"] %>
<% end %>
<%= if !Enum.empty?(tags) do %>
- <span class="tag text-smaller">
+ <span class="tag text-xs">
<%= for {k, v} <- tags do %>[<%= k %>=<%= v %>]<% end %>
</span>
<% end %>
@@ 72,7 72,7 @@ defmodule TriglavWeb.OsmHelpers do
<%= node.tags["name"] %>
<% end %>
<%= if !Enum.empty?(tags) do %>
- <span class="tag text-smaller">
+ <span class="tag">
<%= for {k, v} <- tags do %>[<%= k %>=<%= v %>]<% end %>
</span>
<% end %>
@@ 107,7 107,7 @@ defmodule TriglavWeb.OsmHelpers do
<%= way.tags["name"] %>
<% end %>
<%= if !Enum.empty?(tags) do %>
- <span class="tag text-smaller">
+ <span class="tag">
<%= for {k, v} <- tags do %>[<%= k %>=<%= v %>]<% end %>
</span>
<% end %>