forked from platypush/platypush
Fixed entities panel mobile layout
This commit is contained in:
parent
08c0779347
commit
b35c761a43
4 changed files with 46 additions and 16 deletions
|
@ -59,7 +59,7 @@ export default {
|
||||||
display: none;
|
display: none;
|
||||||
& + label {
|
& + label {
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
display: block;
|
display: inline-flex;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: box-shadow .4s;
|
transition: box-shadow .4s;
|
||||||
|
|
|
@ -3,11 +3,11 @@
|
||||||
<Loading v-if="loading" />
|
<Loading v-if="loading" />
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div class="col-11">
|
<div class="col-11 left">
|
||||||
<Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
|
<Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-1 pull-right">
|
<div class="col-1 right">
|
||||||
<button title="Refresh" @click="refresh">
|
<button title="Refresh" @click="refresh">
|
||||||
<i class="fa fa-sync-alt" />
|
<i class="fa fa-sync-alt" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -230,8 +230,8 @@ export default {
|
||||||
this.entities[entityId] = {
|
this.entities[entityId] = {
|
||||||
...event.entity,
|
...event.entity,
|
||||||
meta: {
|
meta: {
|
||||||
...(event.entity?.meta || {}),
|
|
||||||
...(this.entities[entityId]?.meta || {}),
|
...(this.entities[entityId]?.meta || {}),
|
||||||
|
...(event.entity?.meta || {}),
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -266,8 +266,6 @@ export default {
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: $default-fg-2;
|
color: $default-fg-2;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@ -287,17 +285,28 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: $default-bg-2;
|
background: $default-bg-2;
|
||||||
box-shadow: $border-shadow-bottom;
|
box-shadow: $border-shadow-bottom;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.right {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 0.5em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.groups-canvas {
|
.groups-canvas {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - #{$selector-height});
|
height: calc(100% - #{$selector-height});
|
||||||
display: flex;
|
overflow: auto;
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.groups-container {
|
.groups-container {
|
||||||
overflow: auto;
|
|
||||||
@include from($desktop) {
|
@include from($desktop) {
|
||||||
column-count: var(--groups-per-row);
|
column-count: var(--groups-per-row);
|
||||||
}
|
}
|
||||||
|
@ -310,10 +319,16 @@ export default {
|
||||||
padding: $main-margin 0;
|
padding: $main-margin 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
|
|
||||||
|
@include from ($tablet) {
|
||||||
padding: $main-margin;
|
padding: $main-margin;
|
||||||
|
}
|
||||||
|
|
||||||
.frame {
|
.frame {
|
||||||
max-height: calc(100% - #{2 * $main-margin});
|
@include from($desktop) {
|
||||||
|
max-height: calc(100vh - #{$header-height} - #{$main-margin});
|
||||||
|
}
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="entities-selectors-container">
|
<div class="entities-selectors-container">
|
||||||
<div class="selector">
|
<div class="selector">
|
||||||
<Dropdown title="Group by" icon-class="fas fa-layer-group"
|
<Dropdown title="Group by" icon-class="fas fa-eye" ref="groupingSelector">
|
||||||
:text="prettifyGroupingName(value.grouping)" ref="groupingSelector">
|
|
||||||
<DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
|
<DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
|
||||||
:item-class="{selected: value?.grouping === g}"
|
:item-class="{selected: value?.grouping === g}"
|
||||||
@click="onGroupingChanged(g)" />
|
@click="onGroupingChanged(g)" />
|
||||||
|
@ -180,7 +179,7 @@ export default {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
::v-deep(.dropdown-container) {
|
:deep(.dropdown-container) {
|
||||||
button {
|
button {
|
||||||
color: $default-hover-fg;
|
color: $default-hover-fg;
|
||||||
}
|
}
|
||||||
|
@ -188,7 +187,13 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep(.dropdown-container) {
|
@media (max-width: 330px) {
|
||||||
|
.search-bar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.dropdown-container) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
@ -208,6 +213,10 @@ export default {
|
||||||
border: 0;
|
border: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
|
.col-1.icon {
|
||||||
|
width: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: #ffffff00;
|
background: #ffffff00;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="switch">
|
<div class="switch-container">
|
||||||
<div class="col-10 label">
|
<div class="col-10 label">
|
||||||
<div class="name" v-text="value.name" />
|
<div class="name" v-text="value.name" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -52,4 +52,10 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "vars";
|
@import "vars";
|
||||||
|
|
||||||
|
.switch-container {
|
||||||
|
.switch {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue