Do some quick mobile stylings

This commit is contained in:
Blue (Lukas Rieger) 2020-01-19 00:26:43 +01:00
parent c5485e6657
commit 5dc59b454b
7 changed files with 67 additions and 15 deletions

View File

@ -343,12 +343,17 @@ export default class Controls {
};
onTouchDown = event => {
if (event.pointerType === "mouse") return;
$(":focus").blur();
this.touchStart.x = this.targetPosition.x;
this.touchStart.y = this.targetPosition.z;
this.state = Controls.STATES.MOVE;
};
onTouchMove = event => {
if (event.pointerType === "mouse") return;
if (this.state !== Controls.STATES.MOVE) return;
this.touchDelta.x = event.deltaX;
@ -363,6 +368,8 @@ export default class Controls {
};
onTouchUp = event => {
if (event.pointerType === "mouse") return;
this.state = Controls.STATES.NONE;
};

View File

@ -1,6 +1,11 @@
#bluemap-compass {
width: 30px;
height: 30px;
width: 2rem;
height: 2rem;
#bluemap-compass-needle {
width: 100%;
height: 100%;
}
&:hover #bluemap-compass-needle {
filter: invert(1);

View File

@ -1,6 +1,6 @@
#bluemap-info {
width: 30px;
height: 30px;
width: 2rem;
height: 2rem;
text-align: center;
&::after {

View File

@ -1,5 +1,5 @@
#bluemap-mapmenu {
width: 200px;
width: 15rem;
cursor: pointer;
.selection, .dropdown li {

View File

@ -2,7 +2,7 @@
position: relative;
input {
width: 60px;
width: 4rem;
height: 100%;
border: none;
outline: none;

View File

@ -1,6 +1,11 @@
#bluemap-settings {
width: 30px;
height: 30px;
width: 2rem;
height: 2rem;
> img {
width: 100%;
height: 100%;
}
}
#bluemap-settings.active:not(:hover) {
@ -18,7 +23,7 @@
#bluemap-settings-quality {
width: 150px;
height: 30px;
height: 2rem;
}

View File

@ -10,17 +10,21 @@ html, body {
padding: 0;
font-size: 15px;
line-height: 15px;
line-height: 1rem;
font-family: Verdana,Helvetica,Arial,sans-serif;
color: #333333;
background-color: #dddddd;
@media (max-width: 900px) {
font-size: 17px;
}
}
.box {
color: #333333;
background-color: white;
box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.8);
box-shadow: 0 1px 4px 0 rgba(50, 50, 50, 0.8);
}
.button {
@ -37,7 +41,7 @@ html, body {
background-color: white;
position: relative;
transition: all 0.3s;
transition: background-color 0.3s;
}
.dropdown-container:hover {
@ -53,7 +57,7 @@ html, body {
overflow: hidden;
transition: all 0.3s;
max-height: 0px;
max-height: 0;
}
.dropdown-container:hover > .dropdown {
@ -104,9 +108,15 @@ html, body {
top: 10px;
right: 10px;
line-height: 30px;
line-height: 2rem;
display: flex;
@media (max-width: 900px) {
display: none;
}
}
#bluemap-topright > *:not(:last-child) {
@ -118,9 +128,34 @@ html, body {
top: 10px;
left: 10px;
line-height: 30px;
line-height: 2rem;
white-space: nowrap;
display: flex;
@media (max-width: 900px) {
top: 0;
left: 0;
width: 100%;
>:last-child {
flex-grow: 1;
}
}
@media (max-width: 500px) {
flex-wrap: wrap;
> :not(:first-child) {
flex-grow: 1;
}
>:last-child {
width: 100%;
border-top: solid 1px #dddddd;
}
}
}
#bluemap-topleft > *:not(:last-child) {