aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2026-02-19 01:31:41 +11:00
Code Issues Projects Releases Packages Wiki Activity Actions

nicer sidebar card

Browse source
This commit is contained in:
taskylizard 2023-11-03 16:28:40 +05:30
parent fee503e3e3
commit 8a8b36d21e
No known key found for this signature in database
GPG key ID: 5CABA3D642DDC497
3 changed files with 20 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.vitepress/theme/components/Modal.vue
View file

@ -6,7 +6,7 @@ const showModal = ref(false);
</script>
<template>
<button class="modal-button" @click="showModal = true">Feedback</button>
<button class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled" @click="showModal = true" />
<Teleport to="body">
<Transition name="modal">

17
.vitepress/theme/components/SidebarCard.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import Field from "./CardField.vue";
import Modal from "./Modal.vue";
import InputField from "./InputField.vue";
</script>
<template>
@ -11,7 +12,20 @@ import Modal from "./Modal.vue";
<Field icon="i-twemoji-star">Recommendations</Field>
<Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
<Field icon="i-twemoji-repeat-button">Storage Links</Field>
<Modal />
<div class="card-header">
<div class="card-title">Options</div>
</div>
<InputField id="feedback" label="Feedback">
<template #display>
<Modal />
</template>
</InputField>
<InputField id="toggle-starred" label="Toggle Starred">
<template #display>
<p>i will do this later do not complain lmao</p>
<div class="i-carbon:star"></div>
</template>
</InputField>
</div>
</template>
@ -35,7 +49,6 @@ import Modal from "./Modal.vue";
padding: 12px 24px 24px;
border-radius: 12px;
position: relative;
margin-top: 1rem;
z-index: 0;
border: 1px solid transparent;
transition: border-color 0.4s ease-in-out;