From 0ff501d4aa28b64a11a3d9a6101e3f997a9e9795 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 18:29:08 +0100
Subject: [PATCH] teleport per spostare il dialog in una posizione consona nel DOM
---
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue | 63 ++++++++++++++++++++++++-------
1 files changed, 49 insertions(+), 14 deletions(-)
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
index 5fd7ac1..bb35ac2 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
@@ -1,20 +1,55 @@
<template>
- <li>
- <div>
- <header>
- <h3>{{ title }}</h3>
- <button>Delete</button>
- </header>
- </div>
- <p>{{ description }}</p>
- <nav>
- <a :href="link">View Resource</a>
- </nav>
- </li>
+ <li>
+ <base-card>
+ <header>
+ <h3>{{ title }}</h3>
+ <base-button mode="flat" @click="deleteResource(id)"
+ >Delete</base-button
+ >
+ </header>
+ <p>{{ description }}</p>
+ <nav>
+ <a :href="link">View Resource</a>
+ </nav>
+ </base-card>
+ </li>
</template>
<script>
export default {
- props: ['title', 'description', 'link']
+ props: ['id', 'title', 'description', 'link'],
+ inject: ['deleteResource'],
+};
+</script>
+
+<style scoped>
+li {
+ margin: auto;
+ max-width: 40rem;
}
-</script>
\ No newline at end of file
+
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+h3 {
+ font-size: 1.25rem;
+ margin: 0.5rem 0;
+}
+
+p {
+ margin: 0.5rem 0;
+}
+
+a {
+ text-decoration: none;
+ color: #ce5c00;
+}
+
+a:hover,
+a:active {
+ color: #c89300;
+}
+</style>
--
Gitblit v1.8.0