mirror of https://github.com/lissy93/dashy
That's all looking great, lets call it a night for today
This commit is contained in:
Alicia Sykes
parent
cfdb34a891
commit
2456352d2a
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="collapsable">
|
||||
<input id="collapsible" class="toggle" type="checkbox" checked>
|
||||
<label for="collapsible" class="lbl-toggle" tabindex="0">
|
||||
<input :id="`collapsible-${uniqueKey}`" class="toggle" type="checkbox" checked>
|
||||
<label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="0">
|
||||
<h2>{{ title }}</h2>
|
||||
</label>
|
||||
<div class="collapsible-content">
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
export default {
|
||||
name: 'CollapsableContainer',
|
||||
props: {
|
||||
uniqueKey: String,
|
||||
title: String
|
||||
}
|
||||
}
|
||||
|
|
@ -25,7 +26,7 @@ export default {
|
|||
<style scoped lang="scss">
|
||||
|
||||
.collapsable {
|
||||
min-width: 350px;
|
||||
width: 310px;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
|
|
@ -33,7 +34,7 @@ export default {
|
|||
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;
|
||||
|
||||
|
||||
.wrap-collabsible {
|
||||
margin-bottom: 1.2rem 0;
|
||||
}
|
||||
|
|
@ -101,7 +102,7 @@ export default {
|
|||
}
|
||||
|
||||
.collapsible-content .content-inner {
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ export default {
|
|||
.item {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
color: #1CA8DD;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 8px;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -6,16 +6,10 @@
|
|||
<ItemGroup
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
:id="item.id"
|
||||
:groupId="item.id"
|
||||
:title="item.name"
|
||||
:items="item.items"
|
||||
/>
|
||||
<ItemGroup title="External Infrastructure"/>
|
||||
<ItemGroup title="Utilities"/>
|
||||
|
||||
<Collapsable title="Server Management">
|
||||
<p>Lorem Ipsum</p>
|
||||
</Collapsable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -23,14 +17,12 @@
|
|||
<script>
|
||||
|
||||
import ItemGroup from '@/components/ItemGroup.vue'
|
||||
import Collapsable from '@/components/Collapsable.vue';
|
||||
import * as linkData from './../data/item-data.json'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
ItemGroup,
|
||||
Collapsable,
|
||||
ItemGroup
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue