zoe
/
starchart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

weh

This commit is contained in:
zoe 2023-08-24 21:12:26 +02:00
parent e2027bda80
commit 46cc9a22a9
4 changed files with 35 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/App.vue
View File

@ -1,28 +1,15 @@
<template>
<nav>
<!-- <nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
</nav> -->
<router-view />
</template>
<style lang="scss">
#app {
html {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
background-color: #2c3e50;
}
</style>

112
web/src/components/HelloWorld.vue
View File

@ -1,97 +1,5 @@
<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-typescript"
target="_blank"
rel="noopener"
>typescript</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>
<div class="hello"></div>
</template>
<script lang="ts">
@ -104,21 +12,3 @@ export default defineComponent({
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

24
web/src/components/SmallStar.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="star"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "SmallStar",
props: {
color: String,
},
});
</script>
<style scoped lang="scss">
.star {
border-radius: 24px;
margin: 12px;
width: 24px;
aspect-ratio: 1/1;
background-color: v-bind(color);
}
</style>

9
web/src/views/ChartView.vue
View File

@ -2,14 +2,17 @@
<div class="about">
<h1>This is an chart page</h1>
<h2 v-if="store.loading">loading...</h2>
<div v-for="star in store.protostars" :key="star.id">
<p :style="{ color: star.color }">*star here*</p>
</div>
<SmallStar
v-for="star in store.protostars"
:key="star.id"
:color="star.color"
/>
</div>
</template>
<script setup lang="ts">
import { useChartStore } from "@/state/stars";
import SmallStar from "@/components/SmallStar.vue";
const store = useChartStore();
store.fetchChart();
</script>