josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Right, that's the first quater done

Browse Source
This commit is contained in:
Alicia Sykes
2019-07-20 21:50:29 +01:00
parent cbd0d714be
commit b7b8addd83
9 changed files with 210 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="footer">
Developed by <a :href="authorUrl">{{authorName}}</a>.
Licensed under <a :href="licenseUrl">{{license}}</a>
{{ showCopyright? '©': '' }} {{date}}.
Get the <a :href="repoUrl">Source Code</a>.
</div>
</template>
<script>
export default {
name: 'Footer',
props: {
authorName: { type: String, default: 'Alicia Sykes' },
authorUrl: { type: String, default: 'https://aliciasykes.com' },
license: { type: String, default: 'MIT' },
licenseUrl: { type: String, default: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17' },
date: { type: String, default: `${new Date().getFullYear()}` },
showCopyright: { type: Boolean, default: true },
repoUrl: { type: String, default: 'https://github.com/lissy93/panel' }
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.footer, .footer a {
color: #5e6474;
}
.footer a:hover {
color: #9F86FF;
}
</style>

28
src/components/HelloWorld.vue
View File

@@ -1,33 +1,7 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>

64
src/components/ItemGroup.vue Normal file
View File

@@ -0,0 +1,64 @@
<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>
</div>
</template>
<script>
export default {
name: 'ItemGroup',
props: {
title: String,
items: Array
}
}
</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%;
border-radius: 0 0 10px 10px;
display: flex;
justify-content: space-evenly;
flex-direction: column;
text-align: center;
}
.no-items {
background: #607d8b33;
width: 100px;
text-align: center;
margin: 0 auto;
padding: 0.8em;
border-radius: 10px;
box-shadow: 1px 1px 2px #373737;
}
</style>