Improved UI on mobile.

This commit is contained in:
Fabio Manganiello 2023-05-06 12:34:27 +02:00
parent 6e939bbe62
commit 4f78d61223
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
5 changed files with 196 additions and 63 deletions

View file

@ -1,14 +1,14 @@
<template>
<div class="entity device-container">
<div class="head">
<div class="col-1 icon">
<div class="icon">
<EntityIcon
:entity="value"
:loading="loading"
:error="error" />
</div>
<div class="col-11 label">
<div class="label">
<div class="name" v-text="value.name" />
</div>
</div>

View file

@ -58,7 +58,7 @@ export default {
computed: {
hasChildren() {
return !!Object.keys(this.children).length
return !!Object.keys(this.children || {}).length
},
isCollapsed() {
@ -172,54 +172,4 @@ export default {
<style lang="scss" scoped>
@import "common";
.entity-container-wrapper {
&.with-children:not(.collapsed) {
box-shadow: 0 3px 4px 0 $default-shadow-color;
}
}
.entity-container {
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0 !important;
border-bottom: $default-border-3;
&.with-children:not(.collapsed) {
@include expanded-entity();
}
&:hover {
background: $hover-bg;
}
.adjuster {
cursor: pointer;
width: 100%;
&.with-children {
width: calc(100% - $collapse-toggler-width - 0.5em);
}
}
}
.blink {
animation: blink-animation 1s steps(20, start);
}
@keyframes blink-animation {
0% {
background: initial
}
50% {
background: $active-bg;
}
100% {
background: initial
}
}
</style>

View file

@ -409,7 +409,7 @@ export default {
font-weight: 400;
button {
background: #ffffff00;
background: transparent;
border: 0;
&:hover {
@ -447,6 +447,10 @@ export default {
}
.groups-container {
@include until(#{$tablet - 1}) {
background: $default-bg-2;
}
@include until(#{$desktop - 1}) {
display: flex;
flex-direction: column;
@ -463,10 +467,13 @@ export default {
max-width: 600px;
max-height: 100%;
position: relative;
padding: $main-margin 0;
display: flex;
break-inside: avoid;
@include until(#{$tablet - 1}) {
padding: 0;
}
@include from($tablet) {
padding: $main-margin;
}
@ -480,8 +487,11 @@ export default {
flex-direction: column;
flex-grow: 1;
position: relative;
box-shadow: $group-shadow;
border-radius: 1em;
@include from($tablet) {
border-radius: 1em;
box-shadow: $group-shadow;
}
}
.header {
@ -490,7 +500,14 @@ export default {
display: table;
background: $header-bg;
box-shadow: $header-shadow;
border-radius: 1em 1em 0 0;
@include until(#{$tablet - 1}) {
border-bottom: 1px solid $border-color-2;
}
@include from($tablet) {
border-radius: 1em 1em 0 0;
}
.section {
height: 100%;
@ -510,23 +527,60 @@ export default {
text-align: center;
}
}
.title {
text-transform: capitalize;
@include until(#{$tablet - 1}) {
font-weight: bold;
}
}
}
.body {
background: $default-bg-2;
max-height: calc(100% - #{$header-height});
overflow: auto;
flex-grow: 1;
.entity-frame:last-child {
border-radius: 0 0 1em 1em;
@include until(#{$tablet - 1}) {
background: $default-bg-4;
}
@include from($tablet) {
background: $default-bg-2;
}
.entity-frame {
background: $background-color;
@include until(#{$tablet - 1}) {
margin: 0.75em 0.25em;
border: $default-border-2;
border-radius: 1em;
}
@include from($tablet) {
&:last-child {
border-radius: 0 0 1em 1em;
}
}
}
}
}
:deep(.modal) {
@include until($tablet) {
width: 95%;
@include until(#{$tablet - 1}) {
width: calc(100% - 1em);
.table-row {
border-bottom: 1px solid $border-color-2;
}
}
.table-row {
.value {
overflow: auto;
}
}
.content {

View file

@ -363,6 +363,8 @@ export default {
</script>
<style lang="scss" scoped>
@import "common";
:deep(.modal) {
.body {
padding: 0;
@ -467,5 +469,16 @@ export default {
max-height: 5em;
}
}
@include until(#{$tablet - 1}) {
.entity-container-wrapper {
&.collapsed {
border-radius: 0;
box-shadow: none;
border-bottom: $default-border;
}
}
}
}
</style>

View file

@ -6,6 +6,64 @@ $collapse-toggler-width: 2em;
background: $selected-bg;
font-weight: bold;
box-shadow: 0 0 3px 2px $default-shadow-color;
@include until(#{$tablet - 1}) {
border-radius: 1em;
}
}
.entity-container {
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0 !important;
@include until(#{$tablet - 1}) {
border-radius: 1em;
&:not(:last-child) {
border-bottom: $default-border-3;
}
}
@include from($tablet) {
border-bottom: $default-border-3;
}
&.with-children:not(.collapsed) {
@include expanded-entity();
}
&:hover {
background: $hover-bg;
}
.adjuster {
cursor: pointer;
width: 100%;
&.with-children {
width: calc(100% - $collapse-toggler-width - 0.5em);
}
}
}
@include until(#{$tablet - 1}) {
.entity-container {
.children {
border-radius: 0 0 1em 1em;
}
}
.child {
&:not(:last-child) {
.entity-container {
border-bottom: $default-border-3;
border-radius: 0;
}
}
}
}
.entity {
@ -176,3 +234,61 @@ $collapse-toggler-width: 2em;
}
}
}
.entity-container-wrapper {
&.with-children:not(.collapsed) {
box-shadow: 0 3px 4px 0 $default-shadow-color;
@include until(#{$tablet - 1}) {
border-radius: 1em;
}
@include from($tablet) {
.children .child:last-child {
box-shadow: 0 3px 4px 0 $default-shadow-color;
}
}
}
@include until(#{$tablet - 1}) {
box-shadow: 0 3px 4px 0 $default-shadow-color;
&.collapsed {
border-radius: 1em;
}
.children {
.entity-container-wrapper {
border-radius: 0;
box-shadow: none;
&.with-children:not(.collapsed) {
border-radius: 1em;
box-shadow: 0 3px 4px 0 $default-shadow-color;
}
&:last-child {
border-radius: 0 0 1em 1em;
}
}
}
}
}
.blink {
animation: blink-animation 1s steps(20, start);
}
@keyframes blink-animation {
0% {
background: initial
}
50% {
background: $active-bg;
}
100% {
background: initial
}
}