sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.46 w route card

Browse Source
This commit is contained in:
SBD
2025-01-17 20:49:35 +03:00
parent 01ffddf9ef
commit 3c1f03de26
2 changed files with 194 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
static/v2/css/widgets/w_route_card.css
View File

@@ -1,5 +1,11 @@
.w_route_card {
padding: 20px;
--route-date_splitter-bg: #F1F1F1;
--route-date_splitter-width: 134px;
--route-date_splitter-height: 1.5px;
--route-date_splitter-margin: 5px 0;
--route-card-bg: #FFFFFF;
--route-card-margin: 20px 0;
--route-card-box_shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2);
@@ -116,6 +122,51 @@
justify-content: space-between;
gap: 60px;
&.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;
}
}
.route_transport, .route_date_data{
&.route_transport{
margin-bottom: 0;
margin-top: 35px;
}
&.route_date_data{
margin-top: 0;
margin-bottom: 39px;
}
justify-content: left!important;
}
.arrival_to {
text-align: left!important;
}
}
}
.from_to_place_data{
.label{
color: #27242499;
@@ -142,6 +193,7 @@
height: 12px;
display: block;
object-fit: contain;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}
.country_code{
color: #27242499;
@@ -173,48 +225,48 @@
display: block;
}
}
.way_progress_line_container{
position: relative;
width: 100%;
height: 15px;
.way_progress_round{
height: 20px;
width: 20px;
background: #FFFFFF;
border-radius: 100%;
position: absolute;
top: -10px;
z-index: 11;
&:first-of-type{
border: 3px solid #065BFF;
left: 0;
}
&:last-of-type{
border: 3px solid #45C226;
right: 0;
}
}
.way_progress_line{
width: calc(100% - 10px);
margin-left: 10px;
height: 4px;
position: absolute;
top: 2px;
z-index: 1;
background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%);
}
.way_progress_arrows_line{
width: calc(100% - 10px);
margin-left: 10px;
height: 4px;
position: absolute;
top: 2px;
z-index: 10;
background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow.svg");
background-repeat: repeat-x;
background-size: 10px;
}
}
}
.way_progress_line_container{
position: relative;
width: 100%;
height: 15px;
.way_progress_round{
height: 20px;
width: 20px;
background: #FFFFFF;
border-radius: 100%;
position: absolute;
top: -10px;
z-index: 11;
&:first-of-type{
border: 3px solid #065BFF;
left: 0;
}
&:last-of-type{
border: 3px solid #45C226;
right: 0;
}
}
.way_progress_line{
width: calc(100% - 10px);
margin-left: 10px;
height: 4px;
position: absolute;
top: 2px;
z-index: 1;
background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%);
}
.way_progress_arrows_line{
width: calc(100% - 10px);
margin-left: 10px;
height: 4px;
position: absolute;
top: 2px;
z-index: 10;
background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow.svg");
background-repeat: repeat-x;
background-size: 10px;
}
}
.route_card_actions_container{
@@ -222,6 +274,14 @@
display: flex;
justify-content: space-between;
align-items: center;
&.mobile{display: none;}
@media (max-width: 1160px) {
display: none;
&.mobile{
display: block;
.delete_route{text-align: center}
}
}
.delete_route{
cursor: pointer;
color: #27242499;
@@ -237,6 +297,12 @@
}
}
.route_btn{
@media (max-width: 1160px) {
&.phone{display: none;};
&.mobile{display: block;}
}
&.mobile{display: none;}
cursor: pointer;
&.solid{
--route-btn-width: 222px;
@@ -300,4 +366,16 @@
font-weight: 600;
}
}
.route_date_splitter{
background: var(--route-date_splitter-bg);
width: var(--route-date_splitter-width);
height: var(--route-date_splitter-height);
margin: var(--route-date_splitter-margin);
}
.container_actions_mobile{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 21px;
margin: 20px 0;
}
}