diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue index 208033a..451b735 100644 --- a/src/components/ChatBox.vue +++ b/src/components/ChatBox.vue @@ -130,8 +130,8 @@ .chat { @extend %panel; position: absolute; - bottom: 7rem; - left: 7rem; + bottom: calc((var(--ui-element-spacing) * 2) + var(--ui-button-size)); + left: calc((var(--ui-element-spacing) * 2) + var(--ui-button-size)); width: 50rem; max-width: calc(100% - 8rem); max-height: 20rem; @@ -199,8 +199,6 @@ } @media (max-width: 400px), (max-height: 480px) { - bottom: 6.5rem; - left: 6.5rem; max-width: calc(100% - 7rem); } diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index a117237..b9a5ca9 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -158,7 +158,7 @@ export default defineComponent({ bottom: 0; display: flex; flex-direction: column; - padding: 1rem; + padding: var(--ui-element-spacing); font-size: 1.5rem; will-change: transform; pointer-events: none; @@ -174,17 +174,17 @@ export default defineComponent({ flex-direction: row; align-items: center; justify-content: flex-end; - margin-bottom: 1rem; + margin-bottom: var(--ui-element-spacing); pointer-events: auto; align-self: flex-end; button { - width: 5rem; - height: 5rem; + width: var(--ui-button-size); + height: var(--ui-button-size); box-shadow: var(--box-shadow); & + button { - margin-left: 1rem; + margin-left: var(--ui-element-spacing); } } @@ -193,19 +193,14 @@ export default defineComponent({ align-items: flex-end; margin: 0; position: absolute; - right: 1rem; - top: 1rem; + right: var(--ui-element-spacing); + top: var(--ui-element-spacing); button + button { margin-left: 0; - margin-top: 1rem; + margin-top: var(--ui-element-spacing); } } - - @media (max-width: 400px), (max-height: 480px) { - right: 0.5rem; - top: 0.5rem; - } } .sidebar__content { @@ -233,7 +228,7 @@ export default defineComponent({ .sidebar__section { @extend %panel; - margin-bottom: 1rem; + margin-bottom: var(--ui-element-spacing); box-sizing: border-box; width: 100%; max-width: 25rem; @@ -309,12 +304,6 @@ export default defineComponent({ padding-top: 0.8rem; } - @media (max-width: 400px), (max-height: 480px) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.5rem; - } - @media (max-width: 400px) { padding-right: 6.5rem; padding-top: 0.3rem; diff --git a/src/leaflet/control/ChatControl.ts b/src/leaflet/control/ChatControl.ts index 63bf836..9dfa09d 100644 --- a/src/leaflet/control/ChatControl.ts +++ b/src/leaflet/control/ChatControl.ts @@ -31,7 +31,8 @@ export class ChatControl extends Control { onAdd() { const store = useStore(), - chatButton = DomUtil.create('button', 'leaflet-control-chat') as HTMLButtonElement; + chatButton = DomUtil.create('button', + 'leaflet-control-bottom leaflet-control-button leaflet-control-chat') as HTMLButtonElement; chatButton.type = 'button'; chatButton.title = store.state.messages.chatTitle; diff --git a/src/leaflet/control/LinkControl.ts b/src/leaflet/control/LinkControl.ts index 234d32b..25bc9e1 100644 --- a/src/leaflet/control/LinkControl.ts +++ b/src/leaflet/control/LinkControl.ts @@ -34,7 +34,8 @@ export class LinkControl extends Control { onAdd() { const store = useStore(), - linkButton = DomUtil.create('button', 'leaflet-control-link') as HTMLButtonElement, + linkButton = DomUtil.create('button', + 'leaflet-control-button leaflet-control-link') as HTMLButtonElement, copySuccessMessage = computed(() => store.state.messages.copyToClipboardSuccess), copyErrorMessage = computed(() => store.state.messages.copyToClipboardError); diff --git a/src/leaflet/control/LoadingControl.ts b/src/leaflet/control/LoadingControl.ts index 810d990..41be051 100644 --- a/src/leaflet/control/LoadingControl.ts +++ b/src/leaflet/control/LoadingControl.ts @@ -48,7 +48,8 @@ export class LoadingControl extends Control { constructor(options: LoadingControlOptions) { super(options); - this._loadingIndicator = DomUtil.create('div', 'leaflet-control-loading') as HTMLDivElement; + this._loadingIndicator = DomUtil.create('div', + 'leaflet-control-button leaflet-control-loading') as HTMLDivElement; } onAdd(map: Map) { diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index b8a5825..b55b1a9 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -41,8 +41,10 @@ .svg-icon { display: inline-block; - width: 3rem; - height: 3rem; + width: calc(var(--ui-button-size) - 1.6rem); + height: calc(var(--ui-button-size) - 1.6rem); + max-width: 3rem; + max-height: 3rem; pointer-events: none; &:only-child { diff --git a/src/scss/_notifications.scss b/src/scss/_notifications.scss index 742b0e8..f7f2f40 100644 --- a/src/scss/_notifications.scss +++ b/src/scss/_notifications.scss @@ -20,7 +20,7 @@ .notification { margin: 0 0.5rem 1rem; padding: 1rem 1.5rem; - min-height: 5rem; + min-height: var(--ui-button-size); font-size: 1.6rem; font-family: Raleway, sans-serif; color: var(--text-base); diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss index f6763f6..da7072e 100644 --- a/src/scss/leaflet/_controls.scss +++ b/src/scss/leaflet/_controls.scss @@ -76,15 +76,15 @@ .leaflet-control-layers-toggle { background-image: none; - width: 5rem; - height: 5rem; + width: var(--ui-button-size); + height: var(--ui-button-size); } .leaflet-top { .leaflet-bar a { - height: 5rem; - width: 5rem; - line-height: 5rem; + height: var(--ui-button-size); + width: var(--ui-button-size); + line-height: var(--ui-button-size); &:first-child { border-top-left-radius: var(--border-radius); @@ -99,13 +99,11 @@ } } -.leaflet-control-link, -.leaflet-control-chat, -.leaflet-control-loading, +.leaflet-control-button, .leaflet-control-layers-toggle { @extend %button; - width: 5rem; - height: 5rem; + width: var(--ui-button-size); + height: var(--ui-button-size); } .leaflet-control-coordinates { @@ -139,6 +137,12 @@ } } + @media (max-width: 480px), (max-height: 480px) { + .value { + font-size: 1.6rem; + } + } + @media (max-width: 384px) { .chunk { display: none; @@ -157,7 +161,7 @@ display: block; position: absolute; top: 0; - left: 6rem; + left: calc(var(--ui-element-spacing) + var(--ui-button-size)); overflow: auto; max-width: calc(100vw - 14rem); box-sizing: border-box; @@ -187,8 +191,8 @@ } .leaflet-control-logo { - width: 5rem; - height: 5rem; + width: var(--ui-button-size); + height: var(--ui-button-size); flex-shrink: 0; a { @@ -206,41 +210,33 @@ } .leaflet-left { - padding-left: 1rem; + padding-left: var(--ui-element-spacing); .leaflet-control { margin: 0; } - - @media (max-width: 400px), (max-height: 480px) { - padding-left: 0.5rem; - } } .leaflet-right { - padding-right: 1rem; + padding-right: var(--ui-element-spacing); .leaflet-control { margin: 0; } - - @media (max-width: 400px), (max-height: 480px) { - padding-right: 0.5rem; - } } .leaflet-top { - padding-top: 1rem; + padding-top: var(--ui-element-spacing); flex-direction: column; top: 0; - bottom: 7rem; + bottom: calc((var(--ui-element-spacing) * 2) + var(--ui-button-size)); align-items: flex-start; z-index: 1003; .leaflet-control { order: 2; - min-width: 5rem; - margin-bottom: 1rem; + min-width: var(--ui-button-size); + margin-bottom: var(--ui-element-spacing); &:first-child { margin-top: 0; @@ -257,9 +253,9 @@ box-shadow: var(--box-shadow); a { - width: 5rem; - height: 5rem; - line-height: 5rem; + width: var(--ui-button-size); + height: var(--ui-button-size); + line-height: var(--ui-button-size); } } @@ -272,14 +268,28 @@ margin-top: 0 !important; & + .leaflet-control-logo { - margin-top: 1rem !important; + margin-top: var(--ui-element-spacing) !important; + } + } + + .leaflet-control-bottom { + margin-top: auto; + + &:last-child { + margin-bottom: 0; + } + + & ~ .leaflet-control-bottom { + margin-top: 0; } } .leaflet-control-chat { - margin-top: auto; order: 1000; - margin-bottom: 0; + } + + .leaflet-control-login { + order: 900; } .leaflet-control-zoom { @@ -297,15 +307,10 @@ } } } - - @media (max-width: 400px), (max-height: 480px) { - padding-top: 0.5rem; - bottom: 6.5rem; - } } .leaflet-bottom { - padding-bottom: 1rem; + padding-bottom: var(--ui-element-spacing); align-items: stretch; z-index: 1002; @@ -319,11 +324,7 @@ } &.leaflet-left .leaflet-control { - margin-right: 1rem; - } - - @media (max-width: 400px), (max-height: 480px) { - padding-bottom: 0.5rem; + margin-right: var(--ui-element-spacing); } } diff --git a/src/scss/style.scss b/src/scss/style.scss index 89d2ba9..5173ddd 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -40,6 +40,16 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +:root { + --ui-button-size: 5rem; + --ui-element-spacing: 1rem; + + @media (max-width: 400px), (max-height: 480px) { + --ui-button-size: 4.4rem; + --ui-element-spacing: 0.7rem; + } +} + h1, h2, h3, h4, h5, h6 { font-weight: normal; margin-top: 0; @@ -303,7 +313,7 @@ input { &.clock--digital { justify-content: center; - height: 5rem; + height: var(--ui-button-size); width: auto; .clock__sun,