Added standard NoItems component to handle visualization of no-results divs

This commit is contained in:
Fabio Manganiello 2022-04-10 14:27:32 +02:00
parent 58861afb1c
commit f301fd7e69
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 56 additions and 2 deletions

View file

@ -0,0 +1,51 @@
<template>
<div class="no-items-container">
<div class="no-items fade-in">
<slot />
</div>
</div>
</template>
<script>
export default {
name: "NoItems",
}
</script>
<style lang="scss" scoped>
.no-items-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.no-items {
min-width: 100%;
max-width: 100%;
@include from($tablet) {
min-width: 80%;
}
@include from($desktop) {
min-width: 50%;
max-width: 35em;
}
@include from($fullhd) {
min-width: 33%;
}
background: $background-color;
margin: 1em;
padding: 1em;
font-size: 1.5em;
color: $no-items-color;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1em;
box-shadow: $border-shadow-bottom;
}
}
</style>

View file

@ -7,7 +7,8 @@
</div>
<div class="groups-canvas">
<div class="groups-container">
<NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
<div class="groups-container" v-else>
<div class="group fade-in" v-for="group in displayGroups" :key="group.name">
<div class="frame">
<div class="header">
@ -43,6 +44,7 @@
import Utils from "@/Utils"
import Loading from "@/components/Loading";
import Icon from "@/components/elements/Icon";
import NoItems from "@/components/elements/NoItems";
import Entity from "./Entity.vue";
import Selector from "./Selector.vue";
import icons from '@/assets/icons.json'
@ -50,7 +52,7 @@ import meta from './meta.json'
export default {
name: "Entities",
components: {Loading, Icon, Entity, Selector},
components: {Loading, Icon, Entity, Selector, NoItems},
mixins: [Utils],
data() {

View file

@ -11,6 +11,7 @@ $default-fg: black !default;
$default-fg-2: #23513a !default;
$default-fg-3: #195331b3 !default;
$header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
$no-items-color: #555555;
//// Notifications
$notification-bg: rgba(185, 255, 193, 0.9) !default;