RanchiMall/ranchimall
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.9.4

Browse Source 
Floor indicator mobile optimizations
This commit is contained in:
sairaj mote 2021-04-04 18:42:36 +05:30
parent a184c4e386
commit a38dd6a031
3 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/main.css
View File

@ -478,7 +478,7 @@ ul {
position: relative;
position: -webkit-sticky;
position: sticky;
top: 2rem;
top: 1rem;
height: 40vh;
z-index: 5;
grid-template-columns: 2rem 1fr;
@ -523,6 +523,10 @@ ul {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 0.5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.floor-label--active {
opacity: 1;
@ -753,6 +757,32 @@ table {
.hide-on-mobile {
display: none;
}
.floor-label {
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.floor-label .floor-title {
opacity: 0;
-webkit-transform: translateX(-1rem);
transform: translateX(-1rem);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.floor-label--active {
opacity: 1;
}
.floor-label--active .floor-title {
opacity: 1;
-webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
-webkit-transform: none;
transform: none;
}
}
@media only screen and (min-width: 640px) {
body {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

19
css/main.scss
View File

@ -381,7 +381,7 @@ ul{
#floor_line_map{
position: relative;
position: sticky;
top: 2rem;
top: 1rem;
height: 40vh;
z-index: 5;
grid-template-columns: 2rem 1fr;
@ -415,6 +415,7 @@ ul{
padding-bottom: 1rem;
transition: opacity 0.3s;
opacity: 0.5;
user-select: none;
&--active{
opacity: 1;
.floor-title{
@ -624,6 +625,22 @@ table{
.hide-on-mobile{
display: none;
}
.floor-label{
transition: transform 0.3s;
.floor-title{
opacity: 0;
transform: translateX(-1rem);
transition: opacity 0.3s, transform 0.3s;
}
&--active{
opacity: 1;
.floor-title{
opacity: 1;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
transform: none;
}
}
}
}
@media only screen and (min-width: 640px) {
body{