Made changes to CSS and merged together.
This commit is contained in:
@@ -52,4 +52,32 @@
|
||||
--info-image-bg: #eee;
|
||||
--info-points: #667eea;
|
||||
--loading-color: #fff;
|
||||
|
||||
/* ChildrenListView styles */
|
||||
--card-bg: #fff;
|
||||
--card-title: #333;
|
||||
--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
--kebab-menu-bg: #f7fafc;
|
||||
--kebab-menu-border: #bcc1c9;
|
||||
--kebab-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 1.5px 6px rgba(102, 126, 234, 0.08);
|
||||
--kebab-menu-blur: 11px;
|
||||
--menu-item-color: #333;
|
||||
--menu-item-hover-bg: rgba(0, 0, 0, 0.04);
|
||||
--menu-item-danger: #ff4d4f;
|
||||
--modal-bg: #fff;
|
||||
--modal-text: #222;
|
||||
--modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
--fab-bg: #667eea;
|
||||
--fab-hover-bg: #5a67d8;
|
||||
--fab-active-bg: #4c51bf;
|
||||
--no-children-color: #fdfdfd;
|
||||
--sub-message-color: #b5ccff;
|
||||
--sign-in-btn-bg: #fff;
|
||||
--sign-in-btn-color: #2563eb;
|
||||
--sign-in-btn-border: #2563eb;
|
||||
--sign-in-btn-hover-bg: #2563eb;
|
||||
--sign-in-btn-hover-color: #fff;
|
||||
--child-image-bg: #fff;
|
||||
--age-color: #666;
|
||||
--points-color: #444;
|
||||
}
|
||||
|
||||
@@ -1,170 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { getCachedImageUrl } from '../common/imageCache'
|
||||
|
||||
const props = defineProps<{ childId: string | number }>()
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
name: string
|
||||
is_good: boolean
|
||||
points: number
|
||||
image_id?: string | null
|
||||
image_url?: string | null
|
||||
}
|
||||
|
||||
const tasks = ref<Task[]>([])
|
||||
const loading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
const fetchTasks = async () => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const resp = await fetch(`/api/child/${props.childId}/list-assignable-tasks`)
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
||||
const data = await resp.json()
|
||||
const taskList: Task[] = data.assignable_tasks || []
|
||||
|
||||
// Fetch images for each task if image_id is present
|
||||
await Promise.all(
|
||||
taskList.map(async (task) => {
|
||||
if (task.image_id) {
|
||||
try {
|
||||
task.image_url = await getCachedImageUrl(task.image_id)
|
||||
} catch (e) {
|
||||
task.image_url = null
|
||||
}
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
tasks.value = taskList
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Failed to fetch tasks'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(fetchTasks)
|
||||
watch(() => props.childId, fetchTasks)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal-backdrop">
|
||||
<div class="modal">
|
||||
<h3>Assign Tasks</h3>
|
||||
<div v-if="loading" class="loading">Loading tasks...</div>
|
||||
<div v-else-if="error" class="error">{{ error }}</div>
|
||||
<div v-else class="task-listbox">
|
||||
<div
|
||||
v-for="task in tasks"
|
||||
:key="task.id"
|
||||
class="task-list-item"
|
||||
:class="{ good: task.is_good, bad: !task.is_good }"
|
||||
>
|
||||
<img v-if="task.image_url" :src="task.image_url" alt="Task" class="task-image" />
|
||||
<span class="task-name">{{ task.name }}</span>
|
||||
<span class="task-points">
|
||||
{{ task.is_good ? task.points : '-' + task.points }} pts
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="close-btn" @click="emit('close')">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1200;
|
||||
}
|
||||
.modal {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 12px;
|
||||
min-width: 260px;
|
||||
max-width: 95vw;
|
||||
max-height: 90vh;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.task-listbox {
|
||||
max-height: 320px;
|
||||
min-width: 220px;
|
||||
overflow-y: auto;
|
||||
margin: 1.2rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
.task-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 2px solid #38c172;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1rem;
|
||||
background: #f8fafc;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
transition: border 0.18s;
|
||||
}
|
||||
.task-list-item.bad {
|
||||
border-color: #e53e3e;
|
||||
background: #fff5f5;
|
||||
}
|
||||
.task-list-item.good {
|
||||
border-color: #38c172;
|
||||
background: #f0fff4;
|
||||
}
|
||||
.task-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.task-points {
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
.close-btn {
|
||||
margin-top: 1.2rem;
|
||||
background: #f3f3f3;
|
||||
color: #666;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.close-btn:hover {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
.loading,
|
||||
.error {
|
||||
margin: 1.2rem 0;
|
||||
color: #888;
|
||||
}
|
||||
.error {
|
||||
color: #e53e3e;
|
||||
}
|
||||
.task-image {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-right: 0.7rem;
|
||||
background: #eee;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -420,9 +420,9 @@ h1 {
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
overflow: visible; /* allow menu to overflow */
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
@@ -470,17 +470,14 @@ h1 {
|
||||
right: 0;
|
||||
margin: 0;
|
||||
min-width: 150px;
|
||||
background: #f7fafcc7; /* subtle light gray for contrast */
|
||||
border-radius: 10px;
|
||||
border: 1.5px solid #bcc1c9; /* subtle border for definition */
|
||||
box-shadow:
|
||||
0 8px 24px rgba(0, 0, 0, 0.18),
|
||||
0 1.5px 6px rgba(102, 126, 234, 0.08); /* stronger shadow for separation */
|
||||
background: var(--kebab-menu-bg);
|
||||
border: 1.5px solid var(--kebab-menu-border);
|
||||
box-shadow: var(--kebab-menu-shadow);
|
||||
backdrop-filter: blur(var(--kebab-menu-blur));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: 30;
|
||||
backdrop-filter: blur(11px); /* optional: adds a modern blur effect */
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@@ -490,7 +487,7 @@ h1 {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: var(--menu-item-color);
|
||||
font-size: 1.1rem; /* Slightly larger text for readability */
|
||||
}
|
||||
|
||||
@@ -509,11 +506,11 @@ h1 {
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: var(--menu-item-hover-bg);
|
||||
}
|
||||
|
||||
.menu-item.danger {
|
||||
color: #ff4d4f;
|
||||
color: var(--menu-item-danger);
|
||||
}
|
||||
|
||||
/* card content */
|
||||
@@ -528,7 +525,7 @@ h1 {
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.5rem;
|
||||
color: #333;
|
||||
color: var(--card-title);
|
||||
margin-bottom: 0.5rem;
|
||||
word-break: break-word;
|
||||
text-align: center;
|
||||
@@ -536,7 +533,7 @@ h1 {
|
||||
|
||||
.age {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
color: var(--age-color);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -547,6 +544,7 @@ h1 {
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 1rem auto;
|
||||
background: var(--child-image-bg);
|
||||
}
|
||||
|
||||
/* modal */
|
||||
@@ -561,13 +559,13 @@ h1 {
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
background: var(--modal-bg);
|
||||
color: var(--modal-text);
|
||||
padding: 1.25rem;
|
||||
border-radius: 10px;
|
||||
width: 360px;
|
||||
max-width: calc(100% - 32px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--modal-shadow);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -578,7 +576,7 @@ h1 {
|
||||
|
||||
.points {
|
||||
font-size: 1.05rem;
|
||||
color: #444;
|
||||
color: var(--points-color);
|
||||
margin-top: 0.4rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
@@ -589,7 +587,7 @@ h1 {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
background: #667eea;
|
||||
background: var(--fab-bg);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
@@ -605,11 +603,11 @@ h1 {
|
||||
}
|
||||
|
||||
.fab:hover {
|
||||
background: #5a67d8;
|
||||
background: var(--fab-hover-bg);
|
||||
}
|
||||
|
||||
.fab:active {
|
||||
background: #4c51bf;
|
||||
background: var(--fab-active-bg);
|
||||
}
|
||||
|
||||
.no-children-message {
|
||||
@@ -617,19 +615,19 @@ h1 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: #fdfdfd;
|
||||
color: var(--no-children-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.sub-message {
|
||||
margin-top: 0.3rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: #b5ccff;
|
||||
color: var(--sub-message-color);
|
||||
}
|
||||
.sign-in-btn {
|
||||
background: #fff;
|
||||
color: #2563eb;
|
||||
border: 2px solid #2563eb;
|
||||
background: var(--sign-in-btn-bg);
|
||||
color: var(--sign-in-btn-color);
|
||||
border: 2px solid var(--sign-in-btn-border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
@@ -641,7 +639,7 @@ h1 {
|
||||
color 0.18s;
|
||||
}
|
||||
.sign-in-btn:hover {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
background: var(--sign-in-btn-hover-bg);
|
||||
color: var(--sign-in-btn-hover-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user