0.0.142 routes
This commit is contained in:
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,4 +12,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: 30% calc(100% - 30% - 41px);
|
||||
gap: 41px;
|
||||
@media (max-width: 800px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -68,4 +68,5 @@
|
||||
display: var(--display);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user