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

Some style refactoring

Browse Source 
- Use CSS variables for UI element size/spacing
- Make buttons smaller on smaller screens
- Reduce location size on smaller screens
- Add common leaflet-control-button class for all button-y controls
This commit is contained in:
James Lyne 2021-08-24 15:59:31 +01:00
parent ec1a85523e
commit 89c56e176b
9 changed files with 78 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ChatBox.vue
View File

@ -130,8 +130,8 @@
.chat { .chat {
@extend %panel; @extend %panel;
position: absolute; position: absolute;
bottom: 7rem; bottom: calc((var(--ui-element-spacing) * 2) + var(--ui-button-size));
left: 7rem; left: calc((var(--ui-element-spacing) * 2) + var(--ui-button-size));
width: 50rem; width: 50rem;
max-width: calc(100% - 8rem); max-width: calc(100% - 8rem);
max-height: 20rem; max-height: 20rem;
@ -199,8 +199,6 @@
} }
@media (max-width: 400px), (max-height: 480px) { @media (max-width: 400px), (max-height: 480px) {
bottom: 6.5rem;
left: 6.5rem;
max-width: calc(100% - 7rem); max-width: calc(100% - 7rem);
} }

29
src/components/Sidebar.vue
View File

@ -158,7 +158,7 @@ export default defineComponent({
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem; padding: var(--ui-element-spacing);
font-size: 1.5rem; font-size: 1.5rem;
will-change: transform; will-change: transform;
pointer-events: none; pointer-events: none;
@ -174,17 +174,17 @@ export default defineComponent({
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 1rem; margin-bottom: var(--ui-element-spacing);
pointer-events: auto; pointer-events: auto;
align-self: flex-end; align-self: flex-end;
button { button {
width: 5rem; width: var(--ui-button-size);
height: 5rem; height: var(--ui-button-size);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
& + button { & + button {
margin-left: 1rem; margin-left: var(--ui-element-spacing);
} }
} }
@ -193,19 +193,14 @@ export default defineComponent({
align-items: flex-end; align-items: flex-end;
margin: 0; margin: 0;
position: absolute; position: absolute;
right: 1rem; right: var(--ui-element-spacing);
top: 1rem; top: var(--ui-element-spacing);
button + button { button + button {
margin-left: 0; 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 { .sidebar__content {
@ -233,7 +228,7 @@ export default defineComponent({
.sidebar__section { .sidebar__section {
@extend %panel; @extend %panel;
margin-bottom: 1rem; margin-bottom: var(--ui-element-spacing);
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 25rem; max-width: 25rem;
@ -309,12 +304,6 @@ export default defineComponent({
padding-top: 0.8rem; 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) { @media (max-width: 400px) {
padding-right: 6.5rem; padding-right: 6.5rem;
padding-top: 0.3rem; padding-top: 0.3rem;

3
src/leaflet/control/ChatControl.ts
View File

@ -31,7 +31,8 @@ export class ChatControl extends Control {
onAdd() { onAdd() {
const store = useStore(), 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.type = 'button';
chatButton.title = store.state.messages.chatTitle; chatButton.title = store.state.messages.chatTitle;

3
src/leaflet/control/LinkControl.ts
View File

@ -34,7 +34,8 @@ export class LinkControl extends Control {
onAdd() { onAdd() {
const store = useStore(), 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), copySuccessMessage = computed(() => store.state.messages.copyToClipboardSuccess),
copyErrorMessage = computed(() => store.state.messages.copyToClipboardError); copyErrorMessage = computed(() => store.state.messages.copyToClipboardError);

3
src/leaflet/control/LoadingControl.ts
View File

@ -48,7 +48,8 @@ export class LoadingControl extends Control {
constructor(options: LoadingControlOptions) { constructor(options: LoadingControlOptions) {
super(options); 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) { onAdd(map: Map) {

6
src/scss/_mixins.scss
View File

@ -41,8 +41,10 @@
.svg-icon { .svg-icon {
display: inline-block; display: inline-block;
width: 3rem; width: calc(var(--ui-button-size) - 1.6rem);
height: 3rem; height: calc(var(--ui-button-size) - 1.6rem);
max-width: 3rem;
max-height: 3rem;
pointer-events: none; pointer-events: none;
&:only-child { &:only-child {

2
src/scss/_notifications.scss
View File

@ -20,7 +20,7 @@
.notification { .notification {
margin: 0 0.5rem 1rem; margin: 0 0.5rem 1rem;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
min-height: 5rem; min-height: var(--ui-button-size);
font-size: 1.6rem; font-size: 1.6rem;
font-family: Raleway, sans-serif; font-family: Raleway, sans-serif;
color: var(--text-base); color: var(--text-base);

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

@ -76,15 +76,15 @@
.leaflet-control-layers-toggle { .leaflet-control-layers-toggle {
background-image: none; background-image: none;
width: 5rem; width: var(--ui-button-size);
height: 5rem; height: var(--ui-button-size);
} }
.leaflet-top { .leaflet-top {
.leaflet-bar a { .leaflet-bar a {
height: 5rem; height: var(--ui-button-size);
width: 5rem; width: var(--ui-button-size);
line-height: 5rem; line-height: var(--ui-button-size);
&:first-child { &:first-child {
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius);
@ -99,13 +99,11 @@
} }
} }
.leaflet-control-link, .leaflet-control-button,
.leaflet-control-chat,
.leaflet-control-loading,
.leaflet-control-layers-toggle { .leaflet-control-layers-toggle {
@extend %button; @extend %button;
width: 5rem; width: var(--ui-button-size);
height: 5rem; height: var(--ui-button-size);
} }
.leaflet-control-coordinates { .leaflet-control-coordinates {
@ -139,6 +137,12 @@
} }
} }
@media (max-width: 480px), (max-height: 480px) {
.value {
font-size: 1.6rem;
}
}
@media (max-width: 384px) { @media (max-width: 384px) {
.chunk { .chunk {
display: none; display: none;
@ -157,7 +161,7 @@
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 6rem; left: calc(var(--ui-element-spacing) + var(--ui-button-size));
overflow: auto; overflow: auto;
max-width: calc(100vw - 14rem); max-width: calc(100vw - 14rem);
box-sizing: border-box; box-sizing: border-box;
@ -187,8 +191,8 @@
} }
.leaflet-control-logo { .leaflet-control-logo {
width: 5rem; width: var(--ui-button-size);
height: 5rem; height: var(--ui-button-size);
flex-shrink: 0; flex-shrink: 0;
a { a {
@ -206,41 +210,33 @@
} }
.leaflet-left { .leaflet-left {
padding-left: 1rem; padding-left: var(--ui-element-spacing);
.leaflet-control { .leaflet-control {
margin: 0; margin: 0;
} }
@media (max-width: 400px), (max-height: 480px) {
padding-left: 0.5rem;
}
} }
.leaflet-right { .leaflet-right {
padding-right: 1rem; padding-right: var(--ui-element-spacing);
.leaflet-control { .leaflet-control {
margin: 0; margin: 0;
} }
@media (max-width: 400px), (max-height: 480px) {
padding-right: 0.5rem;
}
} }
.leaflet-top { .leaflet-top {
padding-top: 1rem; padding-top: var(--ui-element-spacing);
flex-direction: column; flex-direction: column;
top: 0; top: 0;
bottom: 7rem; bottom: calc((var(--ui-element-spacing) * 2) + var(--ui-button-size));
align-items: flex-start; align-items: flex-start;
z-index: 1003; z-index: 1003;
.leaflet-control { .leaflet-control {
order: 2; order: 2;
min-width: 5rem; min-width: var(--ui-button-size);
margin-bottom: 1rem; margin-bottom: var(--ui-element-spacing);
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@ -257,9 +253,9 @@
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
a { a {
width: 5rem; width: var(--ui-button-size);
height: 5rem; height: var(--ui-button-size);
line-height: 5rem; line-height: var(--ui-button-size);
} }
} }
@ -272,14 +268,28 @@
margin-top: 0 !important; margin-top: 0 !important;
& + .leaflet-control-logo { & + .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 { .leaflet-control-chat {
margin-top: auto;
order: 1000; order: 1000;
margin-bottom: 0; }
.leaflet-control-login {
order: 900;
} }
.leaflet-control-zoom { .leaflet-control-zoom {
@ -297,15 +307,10 @@
} }
} }
} }
@media (max-width: 400px), (max-height: 480px) {
padding-top: 0.5rem;
bottom: 6.5rem;
}
} }
.leaflet-bottom { .leaflet-bottom {
padding-bottom: 1rem; padding-bottom: var(--ui-element-spacing);
align-items: stretch; align-items: stretch;
z-index: 1002; z-index: 1002;
@ -319,11 +324,7 @@
} }
&.leaflet-left .leaflet-control { &.leaflet-left .leaflet-control {
margin-right: 1rem; margin-right: var(--ui-element-spacing);
}
@media (max-width: 400px), (max-height: 480px) {
padding-bottom: 0.5rem;
} }
} }

12
src/scss/style.scss
View File

@ -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; 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 { h1, h2, h3, h4, h5, h6 {
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
@ -303,7 +313,7 @@ input {
&.clock--digital { &.clock--digital {
justify-content: center; justify-content: center;
height: 5rem; height: var(--ui-button-size);
width: auto; width: auto;
.clock__sun, .clock__sun,