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 {
@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);
}

29
src/components/Sidebar.vue
View File

@ -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;

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

@ -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;

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

@ -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);

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

@ -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) {

6
src/scss/_mixins.scss
View File

@ -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 {

2
src/scss/_notifications.scss
View File

@ -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);

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

@ -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);
}
}

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;
}
: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,