Brendon/dashy
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/dashy.git synced 2026-06-15 16:20:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

That's all looking great, lets call it a night for today

Browse Source
This commit is contained in:
Alicia Sykes
2019-08-17 06:23:16 +01:00
parent cfdb34a891
commit 2456352d2a
4 changed files with 32 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ItemGroup.vue
+23 -54
View File
@@ -1,82 +1,51 @@
<template>
<div class="item-group-outer">
<h2>{{ title }}</h2>
<div class="item-group-inner">
<span v-if="!items || items.length < 1" class="no-items">
No Items to Show Yet
</span>
<div v-else class="there-are-items">
<Item
v-for="item in items"
:key="item.id"
:id="item.id"
:title="item.title"
:description="item.description"
:icon="item.icon"
/>
</div>
</div>
</div>
<Collapsable :title="title" :uniqueKey="groupId">
<div v-if="!items || items.length < 1" class="no-items">
No Items to Show Yet
</div>
<div v-else class="there-are-items">
<Item
v-for="item in items"
:key="item.id"
:id="item.id"
:title="item.title"
:description="item.description"
:icon="item.icon"
/>
</div>
</Collapsable>
</template>
<script>
import Item from '@/components/Item.vue'
import Collapsable from '@/components/Collapsable.vue'
export default {
name: 'ItemGroup',
props: {
groupId: String,
title: String,
items: Array
},
components: {
Collapsable,
Item
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.item-group-outer {
width: 300px;
height: 500px;
border-radius: 10px;
padding: 5px;
display: flex;
flex-direction: column;
background: #1CA8DD;
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
box-shadow: 1px 1px 2px #130f23;
h2 {
color: #2f323ae6;
font-size: 1.5em;
margin: 0.4em;
text-shadow: 1px 1px 2px #056bc1;
}
}
.item-group-inner {
color: #1CA8DD;
background: #2f323ae6;
height: 100%;
width: 100%;
text-align: left;
border-radius: 0 0 10px 10px;
display: flex;
justify-content: space-evenly;
flex-direction: column;
}
.no-items {
background: #607d8b33;
width: 100px;
text-align: center;
margin: 0 auto;
padding: 0.8em;
border-radius: 10px;
box-shadow: 1px 1px 2px #373737;
text-align: center;
cursor: default;
border-radius: 10px;
background: #607d8b33;
color: #1CA8DD;
box-shadow: 1px 1px 2px #373737;
}
.there-are-items {