Mobile UI improvements

This commit is contained in:
Fabio Manganiello 2022-11-26 01:16:07 +01:00
parent f28f08dd1a
commit 37254cad1a
Signed by: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 15 additions and 6 deletions

View file

@ -345,6 +345,7 @@ export default {
background: $default-bg-2; background: $default-bg-2;
box-shadow: $border-shadow-bottom; box-shadow: $border-shadow-bottom;
position: relative; position: relative;
z-index: 1;
.right { .right {
position: absolute; position: absolute;
@ -363,6 +364,10 @@ export default {
width: 100%; width: 100%;
height: calc(100% - #{$selector-height}); height: calc(100% - #{$selector-height});
overflow: auto; overflow: auto;
@include until($tablet) {
padding: 0.5em;
}
} }
.groups-container { .groups-container {

View file

@ -86,11 +86,12 @@ $active-bg: #8fefb7 !default;
$disabled-fg: rgb(155, 155, 155); $disabled-fg: rgb(155, 155, 155);
/// Navigator /// Navigator
$nav-bg: rgba(245, 245, 245, 0.9) !default; $nav-bg: rgb(245, 245, 245) !default;
$nav-bg-collapsed-mobile: white !default;
$nav-fg: #5a5e5b !default; $nav-fg: #5a5e5b !default;
$nav-toggler-bg: rgba(235, 235, 235, 0.9) !default; $nav-toggler-bg: rgb(235, 235, 235) !default;
$nav-toggler-shadow: 0 0 1px 2px #c9cdca !default; $nav-toggler-shadow: 0 0 1px 2px #c9cdca !default;
$nav-footer-bg: rgba(240, 240, 240, 0.9) !default; $nav-footer-bg: rgb(240, 240, 240) !default;
$nav-entry-selected-bg: $selected-bg !default; $nav-entry-selected-bg: $selected-bg !default;
$nav-entry-selected-border: 1px solid #b1ebba !default; $nav-entry-selected-border: 1px solid #b1ebba !default;
$nav-entry-hover-bg: $hover-bg !default; $nav-entry-hover-bg: $hover-bg !default;

View file

@ -3,15 +3,18 @@ export default {
name: "Screen", name: "Screen",
methods: { methods: {
isMobile() { isMobile() {
return window.matchMedia("only screen and (max-width: 760px)").matches return window.matchMedia("only screen and (max-width: 768px)").matches
}, },
isTablet() { isTablet() {
return !this.isMobile() && window.matchMedia("only screen and (max-width: 960px)").matches return (
!this.isMobile() &&
window.matchMedia("only screen and (max-width: 1023px)").matches
)
}, },
isDesktop() { isDesktop() {
return window.matchMedia("only screen and (min-width: 1152px)").matches return window.matchMedia("only screen and (min-width: 1024px)").matches
}, },
}, },
} }