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