0.0.142 routes

This commit is contained in:
SBD
2025-02-03 16:45:42 +03:00
parent 9e3888bccf
commit 93764163d4
10 changed files with 313 additions and 234 deletions

View File

@@ -1,12 +1,16 @@
.b_filter_routes{
--form-title-font-size: 24px;
padding: 20px;
background: #FFFFFF;
border-radius: 10px;
height: fit-content;
box-sizing: border-box;
.b_filter_routes_content{
box-sizing: border-box;
border-radius: 10px;
padding: 20px;
background: #FFFFFF;
}
.title{
font-size: var(--form-title-font-size);
font-weight: 700;
@@ -19,4 +23,18 @@
margin: 0 0 10px 0;
}
}
@media (max-width: 800px) {
--modal-width: calc(100% - 32px);
position: fixed;
top: 0;
left: 0;
.b_filter_routes_content{
width: var(--modal-width);
position: fixed;
top: 169px;
z-index: 100000000;
left: calc(50dvw - (var(--modal-width) / 2));
}
}
}

View File

@@ -12,4 +12,7 @@
display: grid;
grid-template-columns: 30% calc(100% - 30% - 41px);
gap: 41px;
@media (max-width: 800px) {
grid-template-columns: 1fr;
}
}

View File

@@ -68,4 +68,5 @@
display: var(--display);
cursor: pointer;
}
}

View File

@@ -50,6 +50,9 @@
--route-number-margin-top: 5px;
--from-to-place-data-width: 205px;
@media (max-width: 1160px) {
--from-to-place-data-width: 100%;
}
background: var(--route-card-bg);
margin: var(--route-card-margin);
@@ -91,8 +94,6 @@
}
}
/* mobile end !!!*/
position: relative;
.card_owner_name{
@@ -157,6 +158,15 @@
overflow-wrap: break-word;
color: #27242499;
}
@media (max-width: 800px) {
div{
font-size: 10px;
}
img{
width: 24px;
height: 24px;
}
}
}
.route_clicked_msg_for_unregistered_user{
display: none;
@@ -213,139 +223,167 @@
}
}
}
.route_card_route_data{
margin-top: var(--route_card_route_data-margin-top);
display: flex;
justify-content: space-between;
gap: 60px;
.route_card_route_data_cont{
&.mobile{display: none}
@media (max-width: 1160px) {
display: none;
&.mobile{
display: grid;
grid-template-columns: 20px calc(100% - 30px);
gap: 10px;
.way_progress_line_container{
margin-top: 20px;
height: calc(100% - 20px);
.way_progress_round:first-of-type{
left: unset;
top: 0;
}
.way_progress_round:last-of-type{
right: unset;
top: calc(100% - 20px);
}
.way_progress_line{
background: linear-gradient(180deg, rgba(6, 91, 255, 1) 0%, rgba(69, 194, 38, 1) 100%);
height: calc(100% - 10px);
width: 4px;
}
.way_progress_arrows_line{
height: calc(100% - 10px);
width: 4px;
background-repeat: repeat-y;
background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg");
background-size: 4px;
}
}
.route_transport, .route_date_data{
&.route_transport{
margin-bottom: 0;
margin-top: 35px;
}
&.route_date_data{
margin-top: 0;
margin-bottom: 5px;
&:last-of-type{
margin-bottom: 39px;
display: block;
.route_card_route_data {
display: grid;
grid-template-columns: 20px calc(100% - 30px);
gap: 10px;
.way_progress_line_container {
margin-top: 20px;
height: calc(100% - 20px);
.way_progress_round:first-of-type {
left: unset;
top: 0;
}
.way_progress_round:last-of-type {
right: unset;
top: calc(100% - 20px);
}
.way_progress_line {
background: linear-gradient(180deg, rgba(6, 91, 255, 1) 0%, rgba(69, 194, 38, 1) 100%);
height: calc(100% - 10px);
width: 4px;
}
.way_progress_arrows_line {
height: calc(100% - 10px);
width: 4px;
background-repeat: repeat-y;
background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg");
background-size: 4px;
}
}
justify-content: left!important;
}
.arrival_to {
text-align: left!important;
.place_title{
width: 100%;
--max-width: var(--from-to-place-data-width)!important;
background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF var(--max-width))!important;
}
.route_transport, .route_date_data {
&.route_transport {
margin-bottom: 0;
margin-top: 35px;
}
&.route_date_data {
margin-top: 0;
margin-bottom: 5px;
&:last-of-type {
margin-bottom: 39px;
}
}
justify-content: left !important;
}
.arrival_to {
text-align: left !important;
}
}
}
}
.from_to_place_data{
width: var(--from-to-place-data-width);
@media (max-width: 992px) {
--big-font-size: 14px;
}
&:has(.arrival_to){
.place{justify-content: right}
} &:has(.departure_from){
.place{justify-content: left}
}
@media (max-width: 1160px) {.place{justify-content: left!important;}}
.label{
color: #27242499;
font-size: var(--big-font-size);
font-weight: 600;
margin-bottom: 10px;
&.departure_from{
text-align: left;
} &.arrival_to{
text-align: right;
.route_card_route_data{
margin-top: var(--route_card_route_data-margin-top);
display: flex;
justify-content: space-between;
gap: 60px;
.from_to_place_data{
width: var(--from-to-place-data-width);
@media (max-width: 992px) {
--big-font-size: 14px;
}
}
.place{
display: flex;
align-items: center;
gap: 10px;
.country{
&:has(.arrival_to){
.place{justify-content: right}
} &:has(.departure_from){
.place{justify-content: left}
}
@media (max-width: 1160px) {.place{justify-content: left!important;}}
.label{
color: #27242499;
font-size: var(--big-font-size);
font-weight: 600;
margin-bottom: 10px;
&.departure_from{
text-align: left;
} &.arrival_to{
text-align: right;
}
}
.place{
display: flex;
align-items: center;
gap: 5px;
gap: 10px;
.country{
display: flex;
align-items: center;
gap: 5px;
img{
width: 16px;
height: 12px;
display: block;
object-fit: contain;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}
.country_code{
color: #27242499;
font-size: var(--medium-font-size);
}
}
.place_title{
--max-width: calc(var(--from-to-place-data-width) - 45.3px);
font-size: var(--big-font-size);
font-weight: 800;
max-width: var(--max-width);
overflow: hidden;
white-space: nowrap;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF calc(var(--max-width) - 30px));
}
}
}
.route_way_data{
@media (max-width: 992px) {
--medium-font-size: 12px;
}
flex-grow: 1;
.route_transport{
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 10px;
margin-top: 8px;
.route_transport_name{
font-size: var(--medium-font-size);
font-weight: 600;
}
img{
width: 16px;
height: 12px;
display: block;
object-fit: contain;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}
.country_code{
color: #27242499;
font-size: var(--medium-font-size);
}
}
.place_title{
font-size: var(--big-font-size);
font-weight: 800;
color: #272424;
max-width: calc(100% - 45.3px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.route_way_data{
@media (max-width: 992px) {
--medium-font-size: 12px;
}
flex-grow: 1;
.route_transport{
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 10px;
margin-top: 8px;
.route_transport_name{
font-size: var(--medium-font-size);
font-weight: 600;
}
img{
height: 12px;
display: block;
}
}
}
}
.dates_inf_cont{
display: flex;
justify-content: space-between;
}
.way_progress_line_container{
position: relative;
width: 100%;

View File

@@ -1,4 +1,8 @@
$(document).ready(function() {
if (window.innerWidth < 800) {
$(".b_filter_routes").addClass('modal');
return;
}
let header_height = $("#header_bg")[0].offsetHeight;
let _scroll = new scroll({
attach_top: header_height + 20,

View File

@@ -19,7 +19,7 @@ class scroll{
$unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.getPropertyValue('margin-top');
$unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.split('p')
$unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.length > 0? $unnatach_bottom_el_margin_top[0] : 0;
this.$el.style.top = (window.scrollY - $unnatach_bottom_el_margin_top) + 'px';
this.$el.style.top = (window.scrollY - $unnatach_bottom_el_margin_top) + this.top + 'px';
this.$el.style.position = "absolute";
this.attached_by_bottom_el = true;
return;