ryan/chore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made changes to CSS and merged together.

Browse Source
This commit is contained in:
Ryan Kegel
2025-12-18 16:44:25 -05:00
parent 9b71c82c7d
commit cee0c922d2
15 changed files with 352 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
web/vue-app/src/assets/child-list-shared.css Normal file
View File

@@ -0,0 +1,214 @@
.child-list-container {
background: var(--child-list-bg, rgba(255, 255, 255, 0.1));
border-radius: 12px;
padding: 1rem;
color: var(--child-list-title-color, #fff);
width: 100%;
box-sizing: border-box;
}
.child-list-container h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--child-list-title-color, #fff);
}
.loading,
.empty {
text-align: center;
padding: 1rem;
font-size: 0.9rem;
opacity: 0.8;
color: var(--child-list-loading-color, #fff);
}
.scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
width: 100%;
-webkit-overflow-scrolling: touch;
}
.scroll-wrapper::-webkit-scrollbar {
height: 8px;
}
.scroll-wrapper::-webkit-scrollbar-track {
background: var(--child-list-scrollbar-track, rgba(255, 255, 255, 0.05));
border-radius: 10px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
background: var(
--child-list-scrollbar-thumb,
linear-gradient(180deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8))
);
border-radius: 10px;
border: var(--child-list-scrollbar-thumb-border, 2px solid rgba(255, 255, 255, 0.08));
}
.scroll-wrapper::-webkit-scrollbar-thumb:hover {
background: var(
--child-list-scrollbar-thumb-hover,
linear-gradient(180deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1))
);
box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}
.item-scroll {
display: flex;
gap: 0.75rem;
min-width: min-content;
padding: 0.5rem 0;
}
/* Fallback for browsers that don't support flex gap */
.item-card + .item-card {
margin-left: 0.75rem;
}
.item-card {
position: relative;
background: var(--item-card-bg, rgba(255, 255, 255, 0.12));
border-radius: 8px;
padding: 0.75rem;
min-width: 140px;
max-width: 220px;
width: 100%;
text-align: center;
flex-shrink: 0;
transition: transform 0.18s ease;
border: var(--item-card-border, 1px solid rgba(255, 255, 255, 0.08));
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.item-card:hover {
transform: translateY(-4px);
box-shadow: var(--item-card-hover-shadow, 0 8px 20px rgba(0, 0, 0, 0.12));
}
.item-card.ready {
box-shadow: var(--item-card-ready-shadow, 0 0 0 3px #667eea88, 0 0 12px #667eea44);
border-color: var(--item-card-ready-border, #667eea);
animation: ready-glow 0.7s;
}
.item-card.disabled {
opacity: 0.5;
pointer-events: none;
filter: grayscale(0.7);
}
.item-card.good {
border-color: var(--item-card-good-border, rgba(46, 204, 113, 0.9)); /* green */
background: var(--item-card-good-bg, rgba(46, 204, 113, 0.06));
}
.item-card.bad {
border-color: var(--item-card-bad-border, rgba(255, 99, 71, 0.95)); /* red */
background: var(--item-card-bad-bg, rgba(255, 99, 71, 0.03));
}
@keyframes ready-glow {
0% {
box-shadow: 0 0 0 0 #667eea00;
border-color: inherit;
}
100% {
box-shadow: var(--item-card-ready-shadow, 0 0 0 3px #667eea88, 0 0 12px #667eea44);
border-color: var(--item-card-ready-border, #667eea);
}
}
.item-name {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.4rem;
color: var(--item-name-color, #fff);
line-height: 1.2;
word-break: break-word;
}
/* Image styling */
.item-image {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 6px;
margin: 0 auto 0.4rem auto;
display: block;
}
.item-points {
font-size: 0.82rem;
font-weight: 600;
color: var(--item-points-color, #ffd166);
font-size: 1rem;
font-weight: 900;
text-shadow: var(
--item-points-shadow,
-1px -1px 0 #1a3d1f,
1px -1px 0 #1a3d1f,
-1px 1px 0 #1a3d1f,
1px 1px 0 #1a3d1f
);
}
.item-points.ready {
color: var(--item-points-ready-color, #38c172); /* a nice green */
font-weight: 700;
letter-spacing: 0.5px;
}
/* Mobile tweaks */
@media (max-width: 480px) {
.item-card {
min-width: 110px;
max-width: 150px;
padding: 0.6rem;
}
.item-name {
font-size: 0.86rem;
}
.item-image {
width: 50px;
height: 50px;
margin: 0 auto 0.3rem auto;
}
.item-points {
font-size: 0.78rem;
}
.scroll-wrapper::-webkit-scrollbar {
height: 10px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
border-width: 1px;
}
}
.pending-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
background: var(--pending-block-bg, #222b);
color: var(--pending-block-color, #62ff7a);
font-weight: 700;
font-size: 1.05rem;
text-align: center;
border-radius: 6px;
padding: 0.4rem 0;
letter-spacing: 2px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0.95;
pointer-events: none;
}

78
web/vue-app/src/assets/global.css
View File

@@ -57,6 +57,7 @@
--card-bg: #fff;
--card-title: #333;
--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
--kebab-icon-color: #666;
--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);
@@ -80,4 +81,81 @@
--child-image-bg: #fff;
--age-color: #666;
--points-color: #444;
/* Image Picker styles */
--icon-btn-bg: #f3f3f3;
--icon-btn-color: #667eea;
--icon-btn-shadow: 0 2px 8px rgba(102, 126, 234, 0.07);
--selectable-image-border: #e6e6e6;
--selectable-image-bg: #fafbff;
--selectable-image-selected: #667eea;
--loading-text: #888;
--modal-bg: #fff;
--modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
/* ChildDetailCard color variables */
--detail-card-bg: #fff;
--detail-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
--child-name-color: #333;
--child-age-color: #666;
--points-label-color: #888;
--points-value-color: #667eea;
/* ChildEditView styles */
--form-label-color: #333;
--form-input-bg: #fafbff;
--form-input-border: #e6e6e6;
--form-input-color: #222;
--form-input-focus: #667eea;
/*Reward/Task Assignment styles*/
--assign-heading-color: #ffffff;
--assign-no-items-color: #fdfdfd;
--assign-sub-message-color: #b5ccff;
--assign-create-btn-bg: #fff;
--assign-create-btn-color: #2563eb;
--assign-create-btn-border: #2563eb;
--assign-create-btn-hover-bg: #2563eb;
--assign-create-btn-hover-color: #fff;
--notification-reward-name: #ef4444;
/* ChildLists styles */
--child-list-bg: rgba(255, 255, 255, 0.1);
--child-list-title-color: #fff;
--child-list-loading-color: #fff;
--child-list-scrollbar-track: rgba(255, 255, 255, 0.05);
--child-list-scrollbar-thumb: linear-gradient(
180deg,
rgba(102, 126, 234, 0.8),
rgba(118, 75, 162, 0.8)
);
--child-list-scrollbar-thumb-hover: linear-gradient(
180deg,
rgba(102, 126, 234, 1),
rgba(118, 75, 162, 1)
);
--child-list-scrollbar-thumb-border: 2px solid rgba(255, 255, 255, 0.08);
--item-card-bg: rgba(255, 255, 255, 0.12);
--item-card-border: 1px solid rgba(255, 255, 255, 0.08);
--item-card-good-border: rgba(46, 204, 113, 0.9);
--item-card-good-bg: rgba(46, 204, 113, 0.06);
--item-card-bad-border: rgba(255, 99, 71, 0.95);
--item-card-bad-bg: rgba(255, 99, 71, 0.03);
--item-card-ready-shadow: 0 0 0 3px #667eea88, 0 0 12px #667eea44;
--item-card-ready-border: #667eea;
--item-card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
--item-name-color: #fff;
--item-points-color: #ffd166;
--item-points-shadow:
-1px -1px 0 #1a3d1f, 1px -1px 0 #1a3d1f, -1px 1px 0 #1a3d1f, 1px 1px 0 #1a3d1f;
--item-points-ready-color: #38c172;
--pending-block-bg: #222b;
--pending-block-color: #62ff7a;
}

2
web/vue-app/src/components/ChildrenListView.vue
View File

@@ -451,7 +451,7 @@ h1 {
border: 0;
padding: 0;
cursor: pointer;
color: #666;
color: var(--kebab-icon-color);
border-radius: 6px;
box-sizing: border-box;
font-size: 1.5rem;

22
web/vue-app/src/components/ImagePicker.vue
View File

@@ -286,20 +286,18 @@ function updateLocalImage(url: string, file: File) {
height: 64px;
object-fit: cover;
border-radius: 8px;
border: 2px solid #e6e6e6;
background: #fafbff;
border: 2px solid var(--selectable-image-border);
background: var(--selectable-image-bg);
cursor: pointer;
transition: border 0.18s;
}
.selectable-image:hover {
border-color: #667eea;
}
.selectable-image:hover,
.selectable-image.selected {
border-color: #667eea;
border-color: var(--selectable-image-selected);
box-shadow: 0 0 0 2px #667eea55;
}
.loading-images {
color: #888;
color: var(--loading-text);
font-size: 0.98rem;
padding: 0.5rem 0;
text-align: center;
@@ -313,7 +311,7 @@ function updateLocalImage(url: string, file: File) {
}
.icon-btn {
background: #f3f3f3;
background: var(--icon-btn-bg);
border: none;
border-radius: 50%;
width: 56px; /* Increased size */
@@ -324,8 +322,8 @@ function updateLocalImage(url: string, file: File) {
cursor: pointer;
transition: background 0.18s;
font-size: 2.2rem; /* Bigger + icon */
color: #667eea;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.07);
color: var(--icon-btn-color);
box-shadow: var(--icon-btn-shadow);
}
.icon-btn svg {
width: 32px; /* Bigger camera icon */
@@ -344,9 +342,9 @@ function updateLocalImage(url: string, file: File) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
background: var(--modal-bg);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
box-shadow: var(--modal-shadow);
z-index: 1300;
width: 380px;
max-width: calc(100vw - 32px);

23
web/vue-app/src/components/LoginButton.vue
View File

@@ -89,29 +89,6 @@ onUnmounted(() => {
<style>
/* modal */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal {
background: #fff;
color: #222;
padding: 1.25rem;
border-radius: 10px;
width: 320px;
max-width: calc(100% - 32px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
text-align: center;
}
.modal h3 {
margin-bottom: 0.5rem;

12
web/vue-app/src/components/child/ChildDetailCard.vue
View File

@@ -62,9 +62,9 @@ onBeforeUnmount(() => {
.detail-card-horizontal {
display: flex;
align-items: center;
background: white;
background: var(--detail-card-bg);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
box-shadow: var(--detail-card-shadow);
padding: 0.7rem 1rem;
max-width: 420px;
width: 100%;
@@ -92,7 +92,7 @@ onBeforeUnmount(() => {
.child-name {
font-size: 1.08rem;
font-weight: 600;
color: #333;
color: var(--child-name-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -100,7 +100,7 @@ onBeforeUnmount(() => {
.child-age {
font-size: 0.97rem;
color: #666;
color: var(--child-age-color);
margin-top: 2px;
}
@@ -114,14 +114,14 @@ onBeforeUnmount(() => {
.points .label {
font-size: 0.85rem;
color: #888;
color: var(--points-label-color);
margin-bottom: 1px;
}
.points .value {
font-size: 1.6rem;
font-weight: 900;
color: #667eea;
color: var(--points-value-color);
}
@media (max-width: 480px) {

11
web/vue-app/src/components/child/ChildEditView.vue
View File

@@ -154,7 +154,6 @@ function onCancel() {
}
</script>
<!-- Removed duplicated CSS now present in edit-forms.css -->
<style scoped>
.form {
display: flex;
@@ -171,7 +170,7 @@ function onCancel() {
}
label {
font-weight: 600;
color: #333;
color: var(--form-label-color);
font-size: 1rem;
}
input[type='text'],
@@ -181,15 +180,15 @@ input[type='number'] {
box-sizing: border-box;
padding: 0.5rem 0.7rem;
border-radius: 8px;
border: 1px solid #e6e6e6;
border: 1px solid var(--form-input-border);
font-size: 1rem;
background: #fafbff;
color: #222;
background: var(--form-input-bg);
color: var(--form-input-color);
transition: border 0.2s;
}
input:focus {
outline: none;
border: 1.5px solid #667eea;
border: 1.5px solid var(--form-input-focus);
}
.form-group.image-picker-group {
display: block;

35
web/vue-app/src/components/child/ChildView.vue
View File

@@ -399,13 +399,13 @@ onUnmounted(() => {
<style scoped>
.back-btn {
background: white;
background: var(--back-btn-bg);
border: 0;
padding: 0.6rem 1rem;
border-radius: 8px;
cursor: pointer;
margin-bottom: 1.5rem;
color: #667eea;
color: var(--back-btn-color);
font-weight: 600;
}
@@ -415,35 +415,4 @@ onUnmounted(() => {
justify-content: center;
margin: 2rem 0;
}
.assign-task-btn,
.assign-bad-btn,
.assign-reward-btn {
font-weight: 600;
border: none;
border-radius: 8px;
padding: 0.7rem 1.5rem;
font-size: 1.1rem;
cursor: pointer;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
transition: background 0.18s;
color: #fff;
background: #667eea;
}
.assign-task-btn:hover,
.assign-bad-btn:hover,
.assign-reward-btn:hover {
background: #5a67d8;
}
.assign-bad-btn {
background: #ef4444;
}
.assign-bad-btn:hover {
background: #dc2626;
}
.assign-reward-btn {
background: #38c172;
}
.assign-reward-btn:hover {
background: #2f855a;
}
</style>

31
web/vue-app/src/components/child/ParentView.vue
View File

@@ -478,35 +478,4 @@ const childId = computed(() => child.value?.id ?? null)
justify-content: center;
margin: 2rem 0;
}
.assign-task-btn,
.assign-bad-btn,
.assign-reward-btn {
font-weight: 600;
border: none;
border-radius: 8px;
padding: 0.7rem 1.5rem;
font-size: 1.1rem;
cursor: pointer;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
transition: background 0.18s;
color: #fff;
background: #667eea;
}
.assign-task-btn:hover,
.assign-bad-btn:hover,
.assign-reward-btn:hover {
background: #5a67d8;
}
.assign-bad-btn {
background: #ef4444;
}
.assign-bad-btn:hover {
background: #dc2626;
}
.assign-reward-btn {
background: #38c172;
}
.assign-reward-btn:hover {
background: #2f855a;
}
</style>

44
web/vue-app/src/components/child/RewardAssignView.vue
View File

@@ -74,7 +74,7 @@ function onCancel() {
}
h2 {
font-size: 1.15rem;
color: #ffffff;
color: var(--assign-heading-color);
font-weight: 700;
text-align: center;
margin: 0.2rem;
@@ -89,33 +89,7 @@ h2 {
overflow-y: auto;
margin-bottom: 2rem;
}
.actions {
display: flex;
gap: 3rem; /* Increased gap for more space between buttons */
justify-content: center;
margin-top: 0.5rem;
}
.actions button {
padding: 1rem 2.2rem; /* Bigger touch area */
border-radius: 12px;
border: 0;
cursor: pointer;
font-weight: 700;
font-size: 1.25rem; /* Larger text */
transition: background 0.18s;
min-width: 120px; /* Ensures buttons are wide enough */
}
.btn.cancel {
background: #f3f3f3;
color: #666;
}
.btn.submit {
background: #667eea;
color: #fff;
}
.btn.submit:hover {
background: #5a67d8;
}
.reward-view {
display: flex;
flex-direction: column;
@@ -132,19 +106,19 @@ h2 {
font-size: 1.15rem;
font-weight: 600;
text-align: center;
color: #fdfdfd;
color: var(--assign-no-items-color);
line-height: 1.5;
}
.sub-message {
margin-top: 0.3rem;
font-size: 1rem;
font-weight: 400;
color: #b5ccff;
color: var(--assign-sub-message-color);
}
.create-btn {
background: #fff;
color: #2563eb;
border: 2px solid #2563eb;
background: var(--assign-create-btn-bg);
color: var(--assign-create-btn-color);
border: 2px solid var(--assign-create-btn-border);
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
@@ -156,7 +130,7 @@ h2 {
color 0.18s;
}
.create-btn:hover {
background: #2563eb;
color: #fff;
background: var(--assign-create-btn-hover-bg);
color: var(--assign-create-btn-hover-color);
}
</style>

43
web/vue-app/src/components/child/TaskAssignView.vue
View File

@@ -81,7 +81,7 @@ function onCancel() {
}
h2 {
font-size: 1.15rem;
color: #ffffff;
color: var(--assign-heading-color);
font-weight: 700;
text-align: center;
margin: 0.2rem;
@@ -96,33 +96,6 @@ h2 {
overflow-y: auto;
margin-bottom: 2rem;
}
.actions {
display: flex;
gap: 3rem; /* Increased gap for more space between buttons */
justify-content: center;
margin-top: 0.5rem;
}
.actions button {
padding: 1rem 2.2rem; /* Bigger touch area */
border-radius: 12px;
border: 0;
cursor: pointer;
font-weight: 700;
font-size: 1.25rem; /* Larger text */
transition: background 0.18s;
min-width: 120px; /* Ensures buttons are wide enough */
}
.btn.cancel {
background: #f3f3f3;
color: #666;
}
.btn.submit {
background: #667eea;
color: #fff;
}
.btn.submit:hover {
background: #5a67d8;
}
.task-view {
display: flex;
@@ -140,19 +113,19 @@ h2 {
font-size: 1.15rem;
font-weight: 600;
text-align: center;
color: #fdfdfd;
color: var(--assign-no-items-color);
line-height: 1.5;
}
.sub-message {
margin-top: 0.3rem;
font-size: 1rem;
font-weight: 400;
color: #b5ccff;
color: var(--assign-sub-message-color);
}
.create-btn {
background: #fff;
color: #2563eb;
border: 2px solid #2563eb;
background: var(--assign-create-btn-bg);
color: var(--assign-create-btn-color);
border: 2px solid var(--assign-create-btn-border);
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
@@ -164,7 +137,7 @@ h2 {
color 0.18s;
}
.create-btn:hover {
background: #2563eb;
color: #fff;
background: var(--assign-create-btn-hover-bg);
color: var(--assign-create-btn-hover-color);
}
</style>

7
web/vue-app/src/components/notification/NotificationList.vue
View File

@@ -120,21 +120,22 @@ function handleItemClick(item: PendingReward) {
}
.child-name {
font-weight: 600;
color: #667eea;
color: var(--dialog-child-name);
}
.reward-info {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0rem;
}
.reward-name {
font-weight: 600;
color: #ef4444;
color: var(--notification-reward-name);
}
.requested-text {
margin: 0 0.7rem;
font-weight: 500;
color: #444;
color: var(--dialog-message);
font-size: 1.05rem;
white-space: nowrap;
}

23
web/vue-app/src/components/notification/NotificationView.vue
View File

@@ -29,27 +29,4 @@ function handleNotificationClick(item: PendingReward) {
padding: 0;
min-height: 0;
}
/* Optional: Floating Action Button styles if you add one */
.fab {
position: fixed;
bottom: 2rem;
right: 2rem;
background: #ef4444;
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
font-size: 24px;
z-index: 1300;
}
.fab:hover {
background: #dc2626;
}
</style>

216
web/vue-app/src/components/reward/ChildRewardList.vue
View File

@@ -3,6 +3,7 @@ import { ref, onBeforeUnmount, watch, nextTick, computed } from 'vue'
import { defineProps, defineEmits, defineExpose } from 'vue'
import { getCachedImageUrl, revokeAllImageUrls } from '../../common/imageCache'
import type { RewardStatus } from '@/common/models'
import '@/assets/child-list-shared.css'
const imageCacheName = 'images-v1'
@@ -143,7 +144,7 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
</script>
<template>
<div class="reward-list-container">
<div class="child-list-container">
<h3>Rewards</h3>
<div v-if="loading" class="loading">Loading rewards...</div>
@@ -151,11 +152,11 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
<div v-else-if="rewards.length === 0" class="empty">No rewards available</div>
<div v-else class="scroll-wrapper" ref="scrollWrapper">
<div class="reward-scroll">
<div class="item-scroll">
<div
v-for="r in rewards"
:key="r.id"
class="reward-card"
class="item-card"
:class="{
ready: readyRewardId === r.id,
disabled: isAnyPending && !r.redeeming,
@@ -163,9 +164,9 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
:ref="(el) => (rewardRefs[r.id] = el)"
@click="() => handleRewardClick(r.id)"
>
<div class="reward-name">{{ r.name }}</div>
<img v-if="r.image_id" :src="r.image_id" alt="Reward Image" class="reward-image" />
<div class="reward-points" :class="{ ready: r.points_needed === 0 }">
<div class="item-name">{{ r.name }}</div>
<img v-if="r.image_id" :src="r.image_id" alt="Reward Image" class="item-image" />
<div class="item-points" :class="{ ready: r.points_needed === 0 }">
<template v-if="r.points_needed === 0"> REWARD READY </template>
<template v-else> {{ r.points_needed }} more points </template>
</div>
@@ -177,205 +178,4 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
</div>
</template>
<style scoped>
.reward-list-container {
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 0.9rem;
color: white;
width: 100%;
box-sizing: border-box;
}
.reward-list-container h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
}
.loading,
.error,
.empty {
text-align: center;
padding: 0.75rem;
font-size: 0.9rem;
opacity: 0.85;
}
.scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
width: 100%;
-webkit-overflow-scrolling: touch;
}
/* Modern scrollbar styling */
.scroll-wrapper::-webkit-scrollbar {
height: 8px;
}
.scroll-wrapper::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.08);
}
.scroll-wrapper::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1));
box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}
.reward-scroll {
display: flex;
gap: 0.75rem;
min-width: min-content;
padding: 0.5rem 0;
}
/* Fallback for browsers that don't support flex gap */
.reward-card + .reward-card {
margin-left: 0.75rem;
}
.reward-card {
position: relative;
background: rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 0.75rem;
min-width: 140px;
max-width: 220px;
width: 100%;
text-align: center;
flex-shrink: 0;
transition: transform 0.18s ease;
border: 1px solid rgba(255, 255, 255, 0.08);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.reward-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.reward-card.ready {
box-shadow:
0 0 0 3px #ffd166cc,
0 0 12px #ffd16688;
border-color: #ffd166;
animation: ready-glow 0.7s;
}
.reward-card.disabled {
opacity: 0.5;
pointer-events: none;
filter: grayscale(0.7);
}
@keyframes ready-glow {
0% {
box-shadow: 0 0 0 0 #ffd16600;
border-color: inherit;
}
100% {
box-shadow:
0 0 0 3px #ffd166cc,
0 0 12px #ffd16688;
border-color: #ffd166;
}
}
.reward-name {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.4rem;
color: #fff;
line-height: 1.2;
word-break: break-word;
}
/* Image styling */
.reward-image {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 6px;
margin: 0 auto 0.4rem auto;
display: block;
}
.reward-points {
font-size: 0.82rem;
font-weight: 600;
color: #ffd166;
font-size: 1rem;
font-weight: 900;
text-shadow:
-1px -1px 0 #1a3d1f,
1px -1px 0 #1a3d1f,
-1px 1px 0 #1a3d1f,
1px 1px 0 #1a3d1f;
}
.reward-points.ready {
color: #38c172; /* a nice green */
font-weight: 700;
letter-spacing: 0.5px;
}
/* Mobile tweaks */
@media (max-width: 480px) {
.reward-card {
min-width: 110px;
max-width: 150px;
padding: 0.6rem;
}
.reward-name {
font-size: 0.86rem;
}
.reward-image {
width: 50px;
height: 50px;
margin: 0 auto 0.3rem auto;
}
.reward-points {
font-size: 0.78rem;
}
.scroll-wrapper::-webkit-scrollbar {
height: 10px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
border-width: 1px;
}
}
.pending-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
background: #222b;
color: #62ff7a;
font-weight: 700;
font-size: 1.05rem;
text-align: center;
border-radius: 6px;
padding: 0.4rem 0;
letter-spacing: 2px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0.95;
pointer-events: none;
}
</style>
<style scoped></style>

198
web/vue-app/src/components/task/ChildTaskList.vue
View File

@@ -3,6 +3,7 @@ import { ref, watch, onBeforeUnmount, nextTick, computed } from 'vue'
import { defineProps, defineEmits } from 'vue'
import { getCachedImageUrl, revokeAllImageUrls } from '../../common/imageCache'
import type { Task } from '@/common/models'
import '@/assets/child-list-shared.css'
const imageCacheName = 'images-v1'
@@ -138,26 +139,26 @@ onBeforeUnmount(() => {
</script>
<template>
<div class="task-list-container">
<div class="child-list-container">
<h3>{{ title }}</h3>
<div v-if="loading" class="loading">Loading tasks...</div>
<div v-else-if="error" class="error">Error: {{ error }}</div>
<div v-else-if="filteredTasks.length === 0" class="empty">No {{ title }}</div>
<div v-else class="scroll-wrapper" ref="scrollWrapper">
<div class="task-scroll">
<div class="item-scroll">
<div
v-for="task in filteredTasks"
:key="task.id"
class="task-card"
class="item-card"
:class="{ good: task.is_good, bad: !task.is_good, ready: readyTaskId === task.id }"
:ref="(el) => (taskRefs[task.id] = el)"
@click="() => handleTaskClick(task.id)"
>
<div class="task-name">{{ task.name }}</div>
<div class="item-name">{{ task.name }}</div>
<img v-if="task.image_url" :src="task.image_url" alt="Task Image" class="task-image" />
<div
class="task-points"
class="item-points"
:class="{ 'good-points': task.is_good, 'bad-points': !task.is_good }"
>
{{ task.is_good ? task.points : -task.points }} Points
@@ -168,189 +169,4 @@ onBeforeUnmount(() => {
</div>
</template>
<style scoped>
.task-list-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1rem;
color: white;
width: 100%;
box-sizing: border-box;
}
.task-list-container h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.loading,
.error,
.empty {
text-align: center;
padding: 1rem;
font-size: 0.9rem;
opacity: 0.8;
}
.error {
color: #ff6b6b;
}
.scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
width: 100%;
-webkit-overflow-scrolling: touch;
}
/* Modern scrollbar styling */
.scroll-wrapper::-webkit-scrollbar {
height: 8px;
}
.scroll-wrapper::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.08);
}
.scroll-wrapper::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1));
box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}
.task-scroll {
display: flex;
gap: 0.75rem;
min-width: min-content;
padding: 0.5rem 0;
}
.task-card {
background: rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 0.75rem;
min-width: 140px;
max-width: 220px;
width: 100%;
text-align: center;
flex-shrink: 0;
transition: all 0.2s ease;
border: 2px solid rgba(255, 255, 255, 0.15);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
/* Outline colors depending on is_good */
.task-card.good {
border-color: rgba(46, 204, 113, 0.9); /* green */
background: rgba(46, 204, 113, 0.06);
}
.task-card.bad {
border-color: rgba(255, 99, 71, 0.95); /* red */
background: rgba(255, 99, 71, 0.03);
}
.task-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.task-card.ready {
box-shadow:
0 0 0 3px #667eea88,
0 0 12px #667eea44;
border-color: #667eea;
animation: ready-glow 0.7s;
}
@keyframes ready-glow {
0% {
box-shadow: 0 0 0 0 #667eea00;
border-color: inherit;
}
100% {
box-shadow:
0 0 0 3px #667eea88,
0 0 12px #667eea44;
border-color: #667eea;
}
}
.task-name {
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.4rem;
word-break: break-word;
line-height: 1.2;
color: #fff;
}
.task-points {
font-size: 1rem;
font-weight: 900;
text-shadow:
-1px -1px 0 #1a3d1f,
1px -1px 0 #1a3d1f,
-1px 1px 0 #1a3d1f,
1px 1px 0 #1a3d1f;
}
.task-points.good-points {
color: #2ecc71;
}
.task-points.bad-points {
color: #ff6b6b;
}
/* Image styling */
.task-image {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 6px;
margin: 0 auto 0.4rem auto;
display: block;
}
/* Mobile tweaks */
@media (max-width: 480px) {
.task-list-container {
padding: 0.75rem;
max-width: 100%;
}
.task-card {
min-width: 100px;
max-width: 150px;
padding: 0.6rem;
}
.task-name {
font-size: 0.8rem;
}
.task-image {
width: 50px;
height: 50px;
margin: 0 auto 0.3rem auto;
}
.task-points {
font-size: 0.72rem;
}
.scroll-wrapper::-webkit-scrollbar {
height: 10px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
border-width: 1px;
}
}
</style>
<style scoped></style>