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; border-bottom-right-radius: $global-border-radius;
} }
@media (max-width: 25rem), (max-height: 30rem) { @media (max-width: 400px), (max-height: 480px) {
bottom: 6.5rem; bottom: 6.5rem;
left: 6.5rem; left: 6.5rem;
max-width: calc(100% - 7rem); max-width: calc(100% - 7rem);
} }
@media (max-width: 20rem) { @media (max-width: 320px) {
.chat__messages .message + .message { .chat__messages .message + .message {
margin-bottom: 0.7rem; 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; flex-direction: column;
align-items: flex-end; align-items: flex-end;
margin: 0; margin: 0;
@ -138,7 +138,7 @@ export default defineComponent({
} }
} }
@media (max-width: 25rem) { @media (max-width: 400px) {
right: 0.5rem; right: 0.5rem;
top: 0.5rem; top: 0.5rem;
} }
@ -176,21 +176,21 @@ export default defineComponent({
} }
} }
@media (max-width: 30rem) { @media (max-width: 480px) {
padding-right: 7rem; padding-right: 7rem;
} }
@media (max-width: 25rem), (max-height: 30rem) { @media (max-width: 400px), (max-height: 480px) {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-left: 0.5rem; padding-left: 0.5rem;
} }
@media (max-width: 25rem) { @media (max-width: 400px) {
padding-right: 6.5rem; padding-right: 6.5rem;
} }
@media (max-width: 20rem) { @media (max-width: 320px) {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
} }

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

@ -106,7 +106,7 @@
font-style: italic; font-style: italic;
} }
@media (max-width: 20rem) { @media (max-width: 320px) {
&.message--chat { &.message--chat {
.message__sender:after { .message__sender:after {
content: none; 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; 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 { .region {
display: none; display: none;
} }
} }
@media (max-width: 24rem) { @media (max-width: 384px) {
.chunk { .chunk {
display: none; display: none;
} }
@ -186,7 +186,7 @@
margin: 0; margin: 0;
} }
@media (max-width: 25rem), (max-height: 30rem) { @media (max-width: 400px), (max-height: 480px) {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
} }
@ -236,7 +236,7 @@
.leaflet-control-zoom { .leaflet-control-zoom {
flex-shrink: 0; 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; display: none;
& + .leaflet-control { & + .leaflet-control {
@ -245,7 +245,7 @@
} }
} }
@media (max-width: 25rem), (max-height: 30rem) { @media (max-width: 400px), (max-height: 480px) {
padding-top: 0.5rem; padding-top: 0.5rem;
bottom: 6.5rem; bottom: 6.5rem;
} }
@ -259,7 +259,7 @@
margin-left: 1rem; margin-left: 1rem;
} }
@media (max-width: 25rem), (max-height: 30rem) { @media (max-width: 400px), (max-height: 480px) {
padding-bottom: 0.5rem; 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: scale(calc((1/6)*5));
transform-origin: top center transform-origin: top center
} }