zhangyuheng/BlueMap
1
0
Fork 0
forked from mirror/BlueMap
Code Pull Requests Activity

Do some quick mobile stylings

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
BlueMapCore/src/main/webroot/js/libs/Controls.js
View File

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

9
BlueMapCore/src/main/webroot/style/modules/compass.scss
View File

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

4
BlueMapCore/src/main/webroot/style/modules/info.scss
View File

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

2
BlueMapCore/src/main/webroot/style/modules/mapmenu.scss
View File

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

2
BlueMapCore/src/main/webroot/style/modules/position.scss
View File

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

11
BlueMapCore/src/main/webroot/style/modules/settings.scss
View File

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

47
BlueMapCore/src/main/webroot/style/style.scss
View File

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