cuqmbr/auto.bus_razor
1
0
Fork 0
Code Issues Pull Requests Activity

feat: add routes' city list popup

Browse Source
This commit is contained in:
cuqmbr 2022-04-02 11:31:47 +03:00
parent aeb439e2bb
commit 00b5986080
2 changed files with 269 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
TicketOffice/Pages/Routes/Index.cshtml
View File

@ -128,7 +128,7 @@
<tr class="table-row">
<td class="num">
<div>@route.Number</div>
<div class="city-list-btn"><a class="city-list-btn">Маршрут</a></div>
<div class="city-list-btn"><a class="city-list-btn" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'inherit'">Маршрут</a></div>
</td>
<td class="city">
<div>@route.Cities.First().Name</div>
@ -180,3 +180,93 @@
}
</div>
@if (Model.Routes != null)
{
foreach (var route in Model.Routes)
{
<div class="popup-container" id="popup-city-list-@route.Id">
<div class="popup">
<div class="popup-header">
<div class="popup-header-center">
Автобус №@route.Number
</div>
</div>
<div class="popup-body">
<div class="popup-body-main">
<table>
<thead>
<tr class="tr-intermediate">
<th class="th-route">
Інформація
</th>
<th class="th-route">
Місто
</th>
<th class="th-route">
Час прибуття
</th>
<th class="th-route">
Час відправлення
</th>
</tr>
</thead>
<tbody>
<tr class="tr-departure">
<td class="td-route">
Відправлення
</td>
<td class="td-route">
@route.Cities.First().Name
</td>
<td class="td-route">
-
</td>
<td class="td-route">
@route.Cities.First().DepartureTime?.ToString("HH:mm")
</td>
</tr>
@for (int i = 1; i < route.Cities.Count - 1; i++)
{
<tr class="tr-intermediate">
<td class="td-route">
Проміжна станція
</td>
<td class="td-route">
@route.Cities.ToList()[i].Name
</td>
<td class="td-route">
@route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
</td>
<td class="td-route">
@route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
</td>
</tr>
}
<tr class="tr-arrival">
<td class="td-route">
Прибуття
</td>
<td class="td-route">
@route.Cities.Last().Name
</td>
<td class="td-route">
@route.Cities.Last().ArrivalTime?.ToString("HH:mm")
</td>
<td class="td-route">
-
</td>
</tr>
</tbody>
</table>
</div>
<div class="popup-body-footer">
<a class="link-btn-choose" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
</div>
</div>
</div>
</div>
}
}

71
TicketOffice/wwwroot/css/Routes.css
View File

@ -20,6 +20,8 @@ body {
margin: 2.5rem auto;
}
/* ~~~~~~ search block ~~~~~~ */
.search-block {
background: #eaeef1;
border-radius: 0.5rem;
@ -78,6 +80,8 @@ input.search-btn:hover {
opacity: 0.8;
}
/* ~~~~~~ route list table ~~~~~~ */
.route-list {
margin-top: 3rem;
}
@ -204,3 +208,70 @@ td.time, td.duration {
margin-top: 2rem;
line-height: 3rem;
}
/* ~~~~~~ popup route list ~~~~~~ */
.popup-container {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
display: none;
}
.popup {
width: 35rem;
height: 30rem;
background: #eaeef1;
position: fixed;
top: calc(50% - 15rem);
left: calc(50% - 17.5rem);
border-radius: 0.5rem;
box-shadow: 0 10px 15px 5px #6c6e6f;
}
.popup-header {
border-radius: 0.5rem 0.5rem 0 0;
height: 3rem;
background: #a1b0b9;
color: white;
font-weight: 700;
font-size: 1.1rem;
text-align: center;
line-height: 3rem;
}
.popup-body {
width: calc(100% - 2rem);
height: calc(100% - 5rem);
padding: 1rem 1rem;
}
.popup-body-main {
height: calc(100% - 4rem);
overflow-y: auto;
overflow-x: hidden;
}
tr.tr-intermediate {
font-weight: 500;
}
th.th-route, td.td-route {
height: 4rem;
line-height: 1.25rem;
text-align: center;
padding: 0 0.5rem;
}
tr.tr-departure, tr.tr-arrival {
font-weight: 700;
}
.popup-body-footer {
text-align: center;
margin-top: 1rem;
}