Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use px for media queries to work around iOS bugs

Browse Source
This commit is contained in:
James Lyne 2021-01-25 02:27:35 +00:00
parent 1cd6e27dbc
commit d721286ea3
6 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ChatBox.vue
View File

@ -190,13 +190,13 @@
border-bottom-right-radius: $global-border-radius;
}
@media (max-width: 25rem), (max-height: 30rem) {
@media (max-width: 400px), (max-height: 480px) {
bottom: 6.5rem;
left: 6.5rem;
max-width: calc(100% - 7rem);
}
@media (max-width: 20rem) {
@media (max-width: 320px) {
.chat__messages .message + .message {
margin-bottom: 0.7rem;
}

12
src/components/Sidebar.vue
View File

@ -124,7 +124,7 @@ export default defineComponent({
}
}
@media (max-width: 30rem) {
@media (max-width: 480px) {
flex-direction: column;
align-items: flex-end;
margin: 0;
@ -138,7 +138,7 @@ export default defineComponent({
}
}
@media (max-width: 25rem) {
@media (max-width: 400px) {
right: 0.5rem;
top: 0.5rem;
}
@ -176,21 +176,21 @@ export default defineComponent({
}
}
@media (max-width: 30rem) {
@media (max-width: 480px) {
padding-right: 7rem;
}
@media (max-width: 25rem), (max-height: 30rem) {
@media (max-width: 400px), (max-height: 480px) {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
}
@media (max-width: 25rem) {
@media (max-width: 400px) {
padding-right: 6.5rem;
}
@media (max-width: 20rem) {
@media (max-width: 320px) {
box-sizing: border-box;
width: 100%;
}

2
src/components/chat/ChatMessage.vue
View File

@ -106,7 +106,7 @@
font-style: italic;
}
@media (max-width: 20rem) {
@media (max-width: 320px) {
&.message--chat {
.message__sender:after {
content: none;

2
src/components/sidebar/FollowTarget.vue
View File

@ -118,7 +118,7 @@ export default defineComponent({
}
}
@media (max-width: 30rem), (max-height: 30rem) {
@media (max-width: 480px), (max-height: 480px) {
margin-top: 0;
}
}

12
src/scss/leaflet/_controls.scss
View File

@ -125,13 +125,13 @@
}
}
@media (max-width: 37.5rem) {
@media (max-width: 600px) {
.region {
display: none;
}
}
@media (max-width: 24rem) {
@media (max-width: 384px) {
.chunk {
display: none;
}
@ -186,7 +186,7 @@
margin: 0;
}
@media (max-width: 25rem), (max-height: 30rem) {
@media (max-width: 400px), (max-height: 480px) {
padding-left: 0.5rem;
}
}
@ -236,7 +236,7 @@
.leaflet-control-zoom {
flex-shrink: 0;
@media (max-width: 30rem) and (pointer: coarse), (max-height: 30rem) and (pointer: coarse), (max-height: 25rem) {
@media (max-width: 480px) and (pointer: coarse), (max-height: 480px) and (pointer: coarse), (max-height: 400px) {
display: none;
& + .leaflet-control {
@ -245,7 +245,7 @@
}
}
@media (max-width: 25rem), (max-height: 30rem) {
@media (max-width: 400px), (max-height: 480px) {
padding-top: 0.5rem;
bottom: 6.5rem;
}
@ -259,7 +259,7 @@
margin-left: 1rem;
}
@media (max-width: 25rem), (max-height: 30rem) {
@media (max-width: 400px), (max-height: 480px) {
padding-bottom: 0.5rem;
}
}

2
src/scss/style.scss
View File

@ -268,7 +268,7 @@ input {
}
}
@media (max-width: 30rem), (max-height: 30rem) {
@media (max-width: 480px), (max-height: 480px) {
transform: scale(calc((1/6)*5));
transform-origin: top center
}