revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Mobile UI improvements

Browse source
This commit is contained in:
Fabio Manganiello 2022-11-26 01:16:07 +01:00
parent f28f08dd1a
commit 37254cad1a
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
View file

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

7
platypush/backend/http/webapp/src/style/themes/light.scss
View file

@ -86,11 +86,12 @@ $active-bg: #8fefb7 !default;
$disabled-fg: rgb(155, 155, 155);
/// 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-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-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-border: 1px solid #b1ebba !default;
$nav-entry-hover-bg: $hover-bg !default;

9
platypush/backend/http/webapp/src/utils/Screen.vue
View file

@ -3,15 +3,18 @@ export default {
name: "Screen",
methods: {
isMobile() {
return window.matchMedia("only screen and (max-width: 760px)").matches
return window.matchMedia("only screen and (max-width: 768px)").matches
},
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() {
return window.matchMedia("only screen and (min-width: 1152px)").matches
return window.matchMedia("only screen and (min-width: 1024px)").matches
},
},
}