diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/package-lock.json | 5 | ||||
| -rw-r--r-- | client/package.json | 1 | ||||
| -rw-r--r-- | client/src/App.vue | 65 | ||||
| -rw-r--r-- | client/src/components/Header.vue | 38 | ||||
| -rw-r--r-- | client/src/components/HelloWorld.vue | 58 | ||||
| -rw-r--r-- | client/src/main.js | 14 | ||||
| -rw-r--r-- | client/src/router/index.js | 6 | ||||
| -rw-r--r-- | client/src/views/About.vue | 5 | ||||
| -rw-r--r-- | client/src/views/Home.vue | 43 | ||||
| -rw-r--r-- | client/src/views/NewSmile.vue | 5 |
10 files changed, 141 insertions, 99 deletions
diff --git a/client/package-lock.json b/client/package-lock.json index a75a2f9..c79c10a 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -8966,6 +8966,11 @@ "renderkid": "^2.0.4" } }, + "primeflex": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.1.2.tgz", + "integrity": "sha512-q63sFNk3KPHSoM4EEEgo0MFTJSQhz4PZpJoQnVa8bcju/N7D8koloF9fniXV8UBlKFQzh0DLr5iFZ4c6FFXO4g==" + }, "primeicons": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-5.0.0.tgz", diff --git a/client/package.json b/client/package.json index 3f922be..4ac22db 100644 --- a/client/package.json +++ b/client/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "core-js": "^3.6.5", + "primeflex": "^3.1.2", "primeicons": "^5.0.0", "primevue": "^3.11.1", "vue": "^3.0.0", diff --git a/client/src/App.vue b/client/src/App.vue index 8e16cf8..5d44890 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -1,30 +1,55 @@ <template> -<div id="nav"> - <router-link to="/">Home</router-link> | - <router-link to="/about">About</router-link> +<Header /> +<div class="content-wrapper"> + <router-view /> </div> -<router-view/> </template> -<style> -#app { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; -} +<script> +import Header from '@/components/Header.vue' -#nav { - padding: 30px; +export default { + components: { + Header + } } +</script> -#nav a { - font-weight: bold; - color: #2c3e50; +<style> +body { + background-color: var(--surface-b); + font-family: "Iosevka Aile", sans-serif; + color: var(--text-color); } - -#nav a.router-link-exact-active { - color: #42b983; +.title { font-family: "Iosevka Etoile", serif; } +h1, h2, h3, h4, h5, h6 { + margin: 1.5rem 0 1rem 0; + font-family: "Iosevka Etoile", serif; + font-weight: 600; + line-height: 1.2; + color: inherit; +} +h1:first-child, h2:first-child, h3:first-child, +h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } +h1 { font-size: 2.5rem; } +h2 { font-size: 2rem; } +h3 { font-size: 1.75rem; } +h4 { font-size: 1.5rem; } +h5 { font-size: 1.25rem; } +h6 { font-size: 1rem; } +p { + line-height:1.5; + margin:0 0 1rem 0; +} +.content-wrapper { + padding: 0.8rem; +} +.card { + background: var(--surface-e); + padding: 2rem; + -webkit-box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12); + box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12); + border-radius: 4px; + margin-bottom: 2rem; } </style> diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue new file mode 100644 index 0000000..8ab29b2 --- /dev/null +++ b/client/src/components/Header.vue @@ -0,0 +1,38 @@ +<template> +<div> + <Menubar :model="items"> + <template #start> + <p id="header-title">Vela</p> + </template> + </Menubar> +</div> +</template> + +<script> +export default { + data() { + return { + items: [ + { + label:'Home', + icon:'pi pi-fw pi-home', + to:'/' + }, + { + label:'New Smile', + icon:'pi pi-fw pi-user-plus', + to:'/new' + }, + ] + } + } +} +</script> + +<style scoped> +#header-title { + margin: 0 1ch 0 0; + font-size: 150%; + font-family: "Iosevka Etoile", serif; +} +</style> diff --git a/client/src/components/HelloWorld.vue b/client/src/components/HelloWorld.vue deleted file mode 100644 index 649a596..0000000 --- a/client/src/components/HelloWorld.vue +++ /dev/null @@ -1,58 +0,0 @@ -<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-router" target="_blank" rel="noopener">router</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> - -<script> -export default { - name: 'HelloWorld', - props: { - msg: String - } -} -</script> - -<style scoped> -h3 { - margin: 40px 0 0; -} -ul { - list-style-type: none; - padding: 0; -} -li { - display: inline-block; - margin: 0 10px; -} -a { - color: #42b983; -} -</style> diff --git a/client/src/main.js b/client/src/main.js index 22d1619..13ce79d 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -1,15 +1,27 @@ import {createApp} from 'vue'; import App from './App.vue'; import router from './router' + import PrimeVue from 'primevue/config'; +import Menubar from 'primevue/menubar'; +import Divider from 'primevue/divider'; +import InputText from 'primevue/inputtext'; +import Button from 'primevue/button'; +import Card from 'primevue/card'; import 'primevue/resources/themes/lara-dark-blue/theme.css'; import 'primevue/resources/primevue.min.css'; import 'primeicons/primeicons.css'; +import 'primeflex/primeflex.css'; const app = createApp(App); - app.use(router); + app.use(PrimeVue); +app.component('Divider', Divider); +app.component('Menubar', Menubar); +app.component('InputText', InputText); +app.component('Button', Button); +app.component('Card', Card); app.mount('#app'); diff --git a/client/src/router/index.js b/client/src/router/index.js index 4300a69..f0d3113 100644 --- a/client/src/router/index.js +++ b/client/src/router/index.js @@ -8,12 +8,12 @@ const routes = [ component: Home }, { - path: '/about', - name: 'About', + path: '/new', + name: 'New Smile', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. - component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') + component: () => import(/* webpackChunkName: "about" */ '../views/NewSmile.vue') } ] diff --git a/client/src/views/About.vue b/client/src/views/About.vue deleted file mode 100644 index 3fa2807..0000000 --- a/client/src/views/About.vue +++ /dev/null @@ -1,5 +0,0 @@ -<template> - <div class="about"> - <h1>This is an about page</h1> - </div> -</template> diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue index 65a73a1..06ca2a3 100644 --- a/client/src/views/Home.vue +++ b/client/src/views/Home.vue @@ -1,17 +1,36 @@ <template> - <div class="home"> - <HelloWorld msg="Welcome to Your Vue.js App"/> +<div class="home"> + <p id="subtitle">Vela is a place to share smiles.</p> + + <div class="card"> + <div class="grid"> + <div class="col-12 md:col-8 lg:col-6"> + <p> + The idea is simple, users create a <em>Smile</em> and receive two + links: public, upload. They can share the public link with their + friends. The upload link should be kept private. + </p> + <p> + They can upload pictures of them or anything that they want to + share with the private link. Visitors on the public link can view + the <em>Smiles</em> but only once, pictures are deleted after it's + viewed once. + </p> + </div> + <div class="col-12 md:col-4 lg:col-6 flex align-items-center justify-content-center"> + <router-link to="/new"> + <Button label="New Smile" icon="pi pi-user-plus" iconPos="left" /> + </router-link> + </div> + </div> </div> +</div> </template> -<script> -// @ is an alias to /src -import HelloWorld from '@/components/HelloWorld.vue' - -export default { - name: 'Home', - components: { - HelloWorld - } +<style scoped> +#subtitle { + font-size: 1.5rem; + text-align: center; + margin: 2rem 0; } -</script> +</style> diff --git a/client/src/views/NewSmile.vue b/client/src/views/NewSmile.vue new file mode 100644 index 0000000..6927007 --- /dev/null +++ b/client/src/views/NewSmile.vue @@ -0,0 +1,5 @@ +<template> +<div class="new-smile"> + <h1>New Smile</h1> +</div> +</template> |