remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 (about) better design and a welcom page.

Browse Source
This commit is contained in:
Julien Calixte
2021-03-14 19:16:46 +01:00
parent 698c865b39
commit cc1827a55d
3 changed files with 102 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/WelcomeWorld.vue
View File

@@ -1,16 +1,104 @@
<template> <template>
<div class="welcome-world"></div> <div class="welcome-world">
<h1 class="title is-1">About "Lite notes"</h1>
<ol>
<li>
Take notes on VS code (<a
href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#review-details"
target="_blank"
rel="noopener noreferrer"
>this extension</a
>
may be necessary)
</li>
<li>
Push to GitHub
</li>
<li>
Read it here
</li>
<li>
Share it with an URL
</li>
</ol>
<form @submit.prevent>
<div class="columns is-mobile is-centered is-vcentered">
https://github.com/
<div class="column">
<div class="field">
<div class="control">
<input
class="input"
type="text"
v-model="userInput"
placeholder="user"
/>
</div>
</div>
</div>
/
<div class="column">
<div class="field">
<div class="control">
<input
class="input"
type="text"
v-model="repoInput"
placeholder="repo"
/>
</div>
</div>
</div>
<div class="column">
<button type="submit" class="button is-primary" @click="submit">
go
</button>
</div>
</div>
</form>
<footer>
<p>
This web app is clearly inspired by
<a
href="https://notes.andymatuschak.org/About_these_notes"
target="_blank"
rel="noopener noreferrer"
>Andy Matuschak's website</a
>. May this app be useful to everyone.
</p>
<p>
Made with love by
<a
href="http://github.com/jcalixte"
target="_blank"
rel="noopener noreferrer"
>Julien</a
>
</p>
</footer>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import { useForm } from '@/hooks/useForm.hook'
export default defineComponent({ export default defineComponent({
name: 'WelcomeWord' name: 'WelcomeWord',
setup() {
return { ...useForm() }
}
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.welcome-world { .welcome-world {
margin: auto;
display: flex;
flex-direction: column;
} }
</style> </style>

5
src/styles/app.scss
View File

@@ -1,5 +1,9 @@
@charset "utf-8"; @charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
$primary: #2C3A47;
$link: #58B19F;
@import '~bulma/bulma.sass'; @import '~bulma/bulma.sass';
html { html {
@@ -10,7 +14,6 @@ html {
body { body {
font-family: 'Courier Prime', monospace; font-family: 'Courier Prime', monospace;
height: 100vh; height: 100vh;
// width: 5000px;
} }
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {

38
src/views/Home.vue
View File

@@ -1,31 +1,6 @@
<template> <template>
<div v-if="!user || !repo" :key="routeKey"> <div class="home content" v-if="!user || !repo">
Bonjour <welcome-world />
<form @submit.prevent>
<div class="columns is-mobile is-centered is-vcentered">
<div class="column">
<div class="field">
<label class="label">user</label>
<div class="control">
<input class="input" type="text" v-model="userInput" />
</div>
</div>
</div>
<div class="column">/</div>
<div class="column">
<div class="field">
<label class="label">repo</label>
<div class="control">
<input class="input" type="text" v-model="repoInput" />
</div>
</div>
</div>
</div>
<button type="submit" class="button is-primary" @click="submit">
y aller
</button>
</form>
</div> </div>
<div v-else-if="notFound"> <div v-else-if="notFound">
<hr /> <hr />
@@ -64,16 +39,20 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, defineAsyncComponent, computed, toRefs } from 'vue' import { defineComponent, defineAsyncComponent, computed, toRefs } from 'vue'
import { useNote } from '@/hooks/useNote.hook' import { useNote } from '@/hooks/useNote.hook'
import { useForm } from '@/hooks/useForm.hook'
const StackedNote = defineAsyncComponent(() => const StackedNote = defineAsyncComponent(() =>
import('@/components/StackedNote.vue') import('@/components/StackedNote.vue')
) )
const WelcomeWorld = defineAsyncComponent(() =>
import('@/components/WelcomeWorld.vue')
)
export default defineComponent({ export default defineComponent({
name: 'Home', name: 'Home',
components: { components: {
StackedNote StackedNote,
WelcomeWorld
}, },
props: { props: {
user: { type: String, required: false, default: '' }, user: { type: String, required: false, default: '' },
@@ -84,7 +63,6 @@ export default defineComponent({
return { return {
...useNote(refProps.user, refProps.repo), ...useNote(refProps.user, refProps.repo),
...useForm(),
routeKey: computed(() => `${props.user}-${props.repo}`) routeKey: computed(() => `${props.user}-${props.repo}`)
} }
} }