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

refactor: decouple different types of popups

Browse Source
This commit is contained in:
cuqmbr 2022-05-13 11:41:44 +03:00
parent 9bcba8ac5c
commit a1a53156a4
6 changed files with 347 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
TicketOffice/Pages/Auth/Account.cshtml
View File

@ -7,8 +7,8 @@
CultureInfo.CurrentCulture = CultureInfo.GetCultureInfo("uk-UA"); CultureInfo.CurrentCulture = CultureInfo.GetCultureInfo("uk-UA");
} }
<link rel="stylesheet" href="~/css/CityListPopup.css"/>
<link rel="stylesheet" href="~/css/Account.css"/> <link rel="stylesheet" href="~/css/Account.css"/>
<link rel="stylesheet" href="~/css/Popup.css"/>
<div class="section"> <div class="section">
<div class="section-header">Придбані квитки</div> <div class="section-header">Придбані квитки</div>
@ -59,84 +59,82 @@
</div> </div>
</div> </div>
<div class="popup-container" id="popup-city-list-@ticket.Id"> <div class="popup-container-city-list" id="popup-city-list-@ticket.Id">
<div class="popup"> <div class="popup-city-list">
<div class="popup-header"> <div class="popup-header-city-list">
Автобус №@ticket.Route.Number Автобус №@ticket.Route.Number
</div> </div>
<div class="popup-body"> <div class="popup-body-city-list">
<div class="popup-body-main"> <table class="city-list">
<table>
<thead> <thead>
<tr class="tr-intermediate"> <tr class="tr-intermediate city-list">
<th class="th-route"> <th class="th-route city-list">
Інформація Інформація
</th> </th>
<th class="th-route"> <th class="th-route city-list">
Місто Місто
</th> </th>
<th class="th-route"> <th class="th-route city-list">
Час прибуття Час прибуття
</th> </th>
<th class="th-route"> <th class="th-route city-list">
Час відправлення Час відправлення
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="tr-departure"> <tr class="tr-departure city-list">
<td class="td-route"> <td class="td-route city-list">
Відправлення Відправлення
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@ticket.Route.Cities.First().Name @ticket.Route.Cities.First().Name
</td> </td>
<td class="td-route"> <td class="td-route city-list">
- -
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@ticket.Route.Cities.First().DepartureTime?.ToString("HH:mm") @ticket.Route.Cities.First().DepartureTime?.ToString("HH:mm")
</td> </td>
</tr> </tr>
@for (int i = 1; i < ticket.Route.Cities.Count - 1; i++) @for (int i = 1; i < ticket.Route.Cities.Count - 1; i++)
{ {
<tr class="tr-intermediate"> <tr class="tr-intermediate city-list">
<td class="td-route"> <td class="td-route city-list">
Проміжна станція Проміжна станція
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@ticket.Route.Cities.ToList()[i].Name @ticket.Route.Cities.ToList()[i].Name
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@ticket.Route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm") @ticket.Route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@ticket.Route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm") @ticket.Route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
</td> </td>
</tr> </tr>
} }
<tr class="tr-arrival"> <tr class="tr-arrival city-list">
<td class="td-route"> <td class="td-route city-list">
Прибуття Прибуття
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@ticket.Route.Cities.Last().Name @ticket.Route.Cities.Last().Name
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@ticket.Route.Cities.Last().ArrivalTime?.ToString("HH:mm") @ticket.Route.Cities.Last().ArrivalTime?.ToString("HH:mm")
</td> </td>
<td class="td-route"> <td class="td-route city-list">
- -
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="popup-body-footer"> <div class="popup-footer-city-list">
<a class="popup-footer-button" onclick="document.getElementById('popup-city-list-@ticket.Id').style.display = 'none'">Закрити</a> <a class="popup-footer-button-city-list" onclick="document.getElementById('popup-city-list-@ticket.Id').style.display = 'none'">Закрити</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -150,3 +148,7 @@
<div class="section"> <div class="section">
<div class="section-header">Керування аккаунтом</div> <div class="section-header">Керування аккаунтом</div>
</div> </div>
@* <div class="popup-container-info"> *@
@* <div class="popup-info"></div> *@
@* </div> *@

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

@ -11,7 +11,8 @@
<link rel="stylesheet" href="~/css/Routes.css"/> <link rel="stylesheet" href="~/css/Routes.css"/>
<link rel="stylesheet" href="~/css/Popup.css"/> <link rel="stylesheet" href="~/css/CityListPopup.css"/>
<link rel="stylesheet" href="~/css/TicketOrderPopup.css"/>
<div class="wrapper"> <div class="wrapper">
@ -193,84 +194,82 @@
{ {
foreach (var route in Model.Routes) foreach (var route in Model.Routes)
{ {
<div class="popup-container" id="popup-city-list-@route.Id"> <div class="popup-container-city-list" id="popup-city-list-@route.Id">
<div class="popup"> <div class="popup-city-list">
<div class="popup-header"> <div class="popup-header-city-list">
Автобус №@route.Number Автобус №@route.Number
</div> </div>
<div class="popup-body"> <div class="popup-body-city-list">
<div class="popup-body-main"> <table class="city-list">
<table>
<thead> <thead>
<tr class="tr-intermediate"> <tr class="tr-intermediate city-list">
<th class="th-route"> <th class="th-route city-list">
Інформація Інформація
</th> </th>
<th class="th-route"> <th class="th-route city-list">
Місто Місто
</th> </th>
<th class="th-route"> <th class="th-route city-list">
Час прибуття Час прибуття
</th> </th>
<th class="th-route"> <th class="th-route city-list">
Час відправлення Час відправлення
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="tr-departure"> <tr class="tr-departure city-list">
<td class="td-route"> <td class="td-route city-list">
Відправлення Відправлення
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@route.Cities.First().Name @route.Cities.First().Name
</td> </td>
<td class="td-route"> <td class="td-route city-list">
- -
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@route.Cities.First().DepartureTime?.ToString("HH:mm") @route.Cities.First().DepartureTime?.ToString("HH:mm")
</td> </td>
</tr> </tr>
@for (int i = 1; i < route.Cities.Count - 1; i++) @for (int i = 1; i < route.Cities.Count - 1; i++)
{ {
<tr class="tr-intermediate"> <tr class="tr-intermediate city-list">
<td class="td-route"> <td class="td-route city-list">
Проміжна станція Проміжна станція
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@route.Cities.ToList()[i].Name @route.Cities.ToList()[i].Name
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm") @route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm") @route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
</td> </td>
</tr> </tr>
} }
<tr class="tr-arrival"> <tr class="tr-arrival city-list">
<td class="td-route"> <td class="td-route city-list">
Прибуття Прибуття
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@route.Cities.Last().Name @route.Cities.Last().Name
</td> </td>
<td class="td-route"> <td class="td-route city-list">
@route.Cities.Last().ArrivalTime?.ToString("HH:mm") @route.Cities.Last().ArrivalTime?.ToString("HH:mm")
</td> </td>
<td class="td-route"> <td class="td-route city-list">
- -
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="popup-body-footer"> <div class="popup-footer-city-list">
<a class="popup-footer-button" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a> <a class="popup-footer-button-city-list" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -281,9 +280,7 @@
{ {
foreach (var route in Model.Routes) foreach (var route in Model.Routes)
{ {
<div class="popup-container" id="popup-ticket-@route.Id" style='display:@(Model.Ticket is not null && Model.Ticket.RouteId == route <div class="popup-container-ticket-order" id="popup-ticket-@route.Id" style='display:@(Model.Ticket is not null && Model.Ticket.RouteId == route.Id ? "inherit" : "none")'>
.Id
? "inherit" : "none")'>
<div class="ticket"> <div class="ticket">
<div class="ticket-header"> <div class="ticket-header">
Купити квиток Купити квиток
@ -378,14 +375,14 @@
</div> </div>
</div> </div>
<div class="ticket-body-footer"> <div class="ticket-body-footer">
<a class="popup-footer-link-button" onclick="document.getElementById('popup-ticket-@route.Id').style.display = 'none'">Закрити</a> <a class="popup-footer-link-button-ticket-order" onclick="document.getElementById('popup-ticket-@route.Id').style.display = 'none'">Закрити</a>
@if (HttpContext.Session.GetString("UserId") != null) @if (HttpContext.Session.GetString("UserId") != null)
{ {
<input class="popup-footer-button" type="submit" form="ticket-form-@route.Id" value="Купити"> <input class="popup-footer-button-ticket-order" type="submit" form="ticket-form-@route.Id" value="Купити">
} }
else else
{ {
<a class="popup-footer-link-button" href="/Auth/Login">Авторизуватись</a> <a class="popup-footer-link-button-ticket-order" href="/Auth/Login">Авторизуватись</a>
} }
</div> </div>
</div> </div>

6
TicketOffice/wwwroot/css/Account.css
View File

@ -9,6 +9,8 @@ body {
margin: 0; margin: 0;
} }
/* Sections */
.section { .section {
width: 70rem; width: 70rem;
margin: 1.5rem auto; margin: 1.5rem auto;
@ -27,6 +29,8 @@ body {
margin: 2rem 0; margin: 2rem 0;
} }
/* Tickets in section */
.tickets { .tickets {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -100,6 +104,8 @@ body {
opacity: 0.8; opacity: 0.8;
} }
/* Misc */
.link-btn { .link-btn {
line-height: 2.5rem; line-height: 2.5rem;
padding: 0 1rem; padding: 0 1rem;

42
TicketOffice/wwwroot/css/Popup.css → TicketOffice/wwwroot/css/CityListPopup.css
View File

@ -1,4 +1,4 @@
.popup-container { .popup-container-city-list {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -9,7 +9,7 @@
display: none; display: none;
} }
.popup { .popup-city-list {
width: 40rem; width: 40rem;
height: 30rem; height: 30rem;
background: #eaeef1; background: #eaeef1;
@ -20,7 +20,7 @@
box-shadow: 0 10px 15px 5px #6c6e6f; box-shadow: 0 10px 15px 5px #6c6e6f;
} }
.popup-header { .popup-header-city-list {
border-radius: 0.5rem 0.5rem 0 0; border-radius: 0.5rem 0.5rem 0 0;
height: 3rem; height: 3rem;
background: #a1b0b9; background: #a1b0b9;
@ -31,14 +31,11 @@
line-height: 3rem; line-height: 3rem;
} }
.popup-body { .popup-body-city-list {
width: calc(100% - 2rem); width: calc(100% - 2rem);
height: calc(100% - 5rem); height: calc(100% - 7.5rem);
padding: 1rem 1rem; padding: 0 1rem;
} margin-top: 0.5rem;
.popup-body-main {
height: calc(100% - 4rem);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
@ -64,12 +61,14 @@ tr.tr-departure, tr.tr-arrival {
font-weight: 700; font-weight: 700;
} }
.popup-body-footer { .popup-footer-city-list {
text-align: center; display: flex;
margin-top: 1rem; justify-content: center;
align-items: center;
height: 4rem;
} }
.popup-footer-link-button { .popup-footer-link-button-city-list {
line-height: 2.5rem; line-height: 2.5rem;
padding: 0 1rem; padding: 0 1rem;
margin: 0 0.5rem; margin: 0 0.5rem;
@ -83,7 +82,7 @@ tr.tr-departure, tr.tr-arrival {
text-decoration: none; text-decoration: none;
} }
.popup-footer-button { .popup-footer-button-city-list {
line-height: 2.5rem; line-height: 2.5rem;
padding: 0 1rem; padding: 0 1rem;
margin: 0 0.5rem; margin: 0 0.5rem;
@ -98,19 +97,20 @@ tr.tr-departure, tr.tr-arrival {
text-decoration: none; text-decoration: none;
} }
.popup-footer-button:hover, .popup-footer-link-button:hover { .popup-footer-button-city-list:hover,
.popup-footer-link-button-city-list:hover {
opacity: 0.8; opacity: 0.8;
} }
/* table */ /* table */
table { table.city-list {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
border: 1px solid #d7dce1; border: 1px solid #d7dce1;
} }
th { th.city-list {
height: 6rem; height: 6rem;
line-height: 1.6rem; line-height: 1.6rem;
background: #e6e9ed; background: #e6e9ed;
@ -122,16 +122,16 @@ th {
color: #777a7e; color: #777a7e;
} }
tr { tr.city-list {
line-height: 5rem; line-height: 5rem;
background-color: white; background-color: white;
} }
tr:hover { tr.city-list:hover {
background-color: #dee9f4; background-color: #dee9f4;
} }
td { td.city-list {
padding: 0 1rem; padding: 0 1rem;
border: 1px solid #d7dce1; border: 1px solid #d7dce1;
text-align: center; text-align: center;

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

@ -9,12 +9,6 @@ body {
margin: 0; margin: 0;
} }
/*@media (min-width: 768px) {
html {
font-size: 16px;
}
}*/
.wrapper { .wrapper {
width: 78rem; width: 78rem;
margin: 2.5rem auto; margin: 2.5rem auto;
@ -205,130 +199,3 @@ td.time, td.duration {
margin-top: 2rem; margin-top: 2rem;
line-height: 3rem; line-height: 3rem;
} }
/* ~~~~~~ ticket ordering popup ~~~~~~ */
.ticket {
width: 50rem;
height: 20rem;
background: #eaeef1;
position: fixed;
top: calc(50% - 10rem);
left: calc(50% - 25rem);
border-radius: 0.5rem;
box-shadow: 0 10px 15px 5px #6c6e6f;
}
.ticket-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;
}
.ticket-body {
width: calc(100% - 2rem);
height: calc(100% - 5rem);
padding: 1rem 1rem;
}
.ticket-body-main {
height: calc(100% - 4rem);
overflow-y: auto;
overflow-x: hidden;
text-align: center;
}
form.ticket-form {
}
div.ticket-input-item {
display: inline-block;
width: 15rem;
height: 5rem;
line-height: 4.7rem;
text-align: left;
vertical-align: top;
}
input.ticket-input-firstname, input.ticket-input-lastname,
select.ticket-place-select {
display: flex;
font-size: 1.5rem;
color: #262626;
font-weight: 500;
box-sizing: border-box;
background: #dfe3e5;
border: 1px solid #b8bfc7;
box-shadow: 0 1px 0 0 #fff;
border-radius: .3rem;
padding: 0 1rem;
margin-top: 0.25rem;
text-align: left;
width: 100%;
height: 3rem;
}
input.ticket-input-firstname:read-only, input.ticket-input-lastname:read-only,
select.ticket-place-select:disabled {
background: #bcbfc0;
outline: none;
color: #7a7c7d;
}
select {
-webkit-appearance: menulist-button;
color: #262626;
}
select:invalid {
color: #7a7c7d;
}
div.ticket-validation-error {
color: #777a7e;
text-align: center;
font-size: 0.9rem;
font-weight: 700;
line-height: 1rem;;
margin: 0.25rem 0 0 0;
}
div.ticket-info div {
font-weight: 700;
font-size: 1.1rem;
text-align: justify;
line-height: 1.4rem;
}
div.ticket-info-line {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #c5c7cc;
margin-bottom: 0.4rem;
}
div.ticket-info-line-left {
display: inline-flex;
justify-content: right;
}
div.ticket-info-line-right {
width: 70%;
display: inline-flex;
justify-content: left;
}
div.ticket-info-line-right-block {
display: inline-flex;
}
.ticket-body-footer {
text-align: center;
margin-top: 1rem;
}

171
TicketOffice/wwwroot/css/TicketOrderPopup.css Normal file
View File

@ -0,0 +1,171 @@
/* ~~~~~~ ticket ordering popup ~~~~~~ */
.popup-container-ticket-order {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
display: none;
}
.ticket {
width: 50rem;
height: 20rem;
background: #eaeef1;
position: fixed;
top: calc(50% - 10rem);
left: calc(50% - 25rem);
border-radius: 0.5rem;
box-shadow: 0 10px 15px 5px #6c6e6f;
}
.ticket-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;
}
.ticket-body {
width: calc(100% - 2rem);
height: calc(100% - 5rem);
padding: 1rem 1rem;
}
.ticket-body-main {
height: calc(100% - 4rem);
overflow-y: auto;
overflow-x: hidden;
text-align: center;
}
form.ticket-form {
}
div.ticket-input-item {
display: inline-block;
width: 15rem;
height: 5rem;
line-height: 4.7rem;
text-align: left;
vertical-align: top;
}
input.ticket-input-firstname, input.ticket-input-lastname,
select.ticket-place-select {
display: flex;
font-size: 1.5rem;
color: #262626;
font-weight: 500;
box-sizing: border-box;
background: #dfe3e5;
border: 1px solid #b8bfc7;
box-shadow: 0 1px 0 0 #fff;
border-radius: .3rem;
padding: 0 1rem;
margin-top: 0.25rem;
text-align: left;
width: 100%;
height: 3rem;
}
input.ticket-input-firstname:read-only, input.ticket-input-lastname:read-only,
select.ticket-place-select:disabled {
background: #bcbfc0;
outline: none;
color: #7a7c7d;
}
select {
-webkit-appearance: menulist-button;
color: #262626;
}
select:invalid {
color: #7a7c7d;
}
div.ticket-validation-error {
color: #777a7e;
text-align: center;
font-size: 0.9rem;
font-weight: 700;
line-height: 1rem;;
margin: 0.25rem 0 0 0;
}
div.ticket-info div {
font-weight: 700;
font-size: 1.1rem;
text-align: justify;
line-height: 1.4rem;
}
div.ticket-info-line {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #c5c7cc;
margin-bottom: 0.4rem;
}
div.ticket-info-line-left {
display: inline-flex;
justify-content: right;
}
div.ticket-info-line-right {
width: 70%;
display: inline-flex;
justify-content: left;
}
div.ticket-info-line-right-block {
display: inline-flex;
}
.ticket-body-footer {
text-align: center;
margin-top: 1rem;
}
.popup-footer-link-button-ticket-order {
line-height: 2.5rem;
padding: 0 1rem;
margin: 0 0.5rem;
display: inline-block;
color: #1d4965;
font-weight: 500;
background: linear-gradient(0deg,#79b6db,#b3dbf2);
border: none;
border-radius: .3rem;
cursor: pointer;
text-decoration: none;
}
.popup-footer-button-ticket-order {
line-height: 2.5rem;
padding: 0 1rem;
margin: 0 0.5rem;
display: inline-block;
color: #1d4965;
font-weight: 700;
font-size: 1rem;
background: linear-gradient(0deg,#79b6db,#b3dbf2);
border: none;
border-radius: .3rem;
cursor: pointer;
text-decoration: none;
}
.popup-footer-button-ticket-order:hover,
.popup-footer-link-button-ticket-order:hover {
opacity: 0.8;
}