Fixed entities panel mobile layout

This commit is contained in:
Fabio Manganiello 2022-04-12 22:24:19 +02:00
parent 08c0779347
commit b35c761a43
Signed by: blacklight
GPG key ID: D90FBA7F76362774
4 changed files with 46 additions and 16 deletions

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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>