benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-04-19 23:37:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

small ui/ux improvments

Browse source
This commit is contained in:
Benny Samir Hierl 2022-02-07 20:32:18 +01:00
parent e0abc98b19
commit 258a30c35a
5 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -7,10 +7,7 @@
<title>Wunschlisten</title> <title>Wunschlisten</title>
</head> </head>
<body> <body>
<div <div id="app"></div>
id="app"
class="bg-white dark:bg-stone-900 text-black dark:text-white/75"
></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

6
src/App.vue
View file

@ -1,7 +1,9 @@
<template> <template>
<div class="h-screen max-w-[900px] mx-auto"> <div
class="h-screen bg-white dark:bg-stone-900 text-black dark:text-white/75 p-4"
>
<Header /> <Header />
<main class="h-full"> <main class="h-full max-w-[900px] mx-auto">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<template v-if="Component"> <template v-if="Component">
<div <div

11
src/components/Header.vue
View file

@ -1,12 +1,17 @@
<template> <template>
<header class="py-4 flex flex-row-reverse opacity-60"> <header
<div @click="toggleMode"><IconLightDark class="h-6 w-6" /></div> class="flex flex-row justify-end items-center opacity-60 mb-2 space-x-2"
>
<div @click="toggleMode">
<IconLightDark class="h-6 w-6 cursor-pointer" />
</div>
<!-- <div><IconMenu class="h-8 w-8 cursor-pointer"></IconMenu></div> -->
</header> </header>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useColorMode } from '@vueuse/core' import { useColorMode } from '@vueuse/core'
import { IconLightDark } from '@/components/icons' import { IconLightDark, IconMenu } from '@/components/icons'
const mode = useColorMode() const mode = useColorMode()
const toggleMode = () => { const toggleMode = () => {

8
src/components/icons/IconMenu.vue Normal file
View file

@ -0,0 +1,8 @@
<template>
<svg viewBox="0 0 24 24">
<path
d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"
fill="currentColor"
></path>
</svg>
</template>

1
src/components/icons/index.ts
View file

@ -5,3 +5,4 @@ export { default as IconLink } from './IconLink.vue'
export { default as IconSpinner } from './IconSpinner.vue' export { default as IconSpinner } from './IconSpinner.vue'
export { default as IconNoGift } from './IconNoGift.vue' export { default as IconNoGift } from './IconNoGift.vue'
export { default as IconLightDark } from './IconLightDark.vue' export { default as IconLightDark } from './IconLightDark.vue'
export { default as IconMenu } from './IconMenu.vue'