chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: add AnnouncementModal component to display course announcements

Browse source
This commit is contained in:
supalerk-ar66 2026-02-04 16:27:27 +07:00
parent 754f211a08
commit 6b1abf630f
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
Frontend-Learner/components/classroom/AnnouncementModal.vue
View file

@ -23,8 +23,8 @@ const getLocalizedText = (text: any) => {
<template>
<q-dialog :model-value="modelValue" @update:model-value="(val) => emit('update:modelValue', val)" backdrop-filter="blur(4px)">
<q-card class="min-w-[320px] md:min-w-[600px] rounded-3xl overflow-hidden bg-white dark:bg-slate-900 shadow-2xl">
<q-card-section class="bg-white dark:bg-slate-900 border-b border-gray-100 dark:border-white/5 p-5 flex items-center justify-between sticky top-0 z-10">
<q-card class="min-w-[320px] md:min-w-[600px] rounded-3xl overflow-hidden !bg-white dark:!bg-slate-900 shadow-2xl">
<q-card-section class="!bg-white dark:!bg-slate-900 border-b border-gray-100 dark:border-white/5 p-5 flex items-center justify-between sticky top-0 z-10">
<div>
<div class="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<div class="w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-900/30 text-primary flex items-center justify-center">
@ -43,7 +43,7 @@ const getLocalizedText = (text: any) => {
v-for="(ann, index) in announcements"
:key="index"
class="p-5 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-white/5 transition-all hover:shadow-md relative overflow-hidden group"
:class="{'ring-2 ring-orange-200 dark:ring-orange-900/40 bg-orange-50/50 dark:bg-orange-900/10': ann.is_pinned}"
:class="{'ring-2 ring-orange-200 dark:ring-orange-900/40 !bg-orange-50/50 dark:!bg-orange-900/20': ann.is_pinned}"
>
<!-- Pinned Banner -->
<div v-if="ann.is_pinned" class="absolute top-0 right-0 p-3">
@ -52,8 +52,8 @@ const getLocalizedText = (text: any) => {
<div class="flex items-start gap-4 mb-3">
<q-avatar
:color="ann.is_pinned ? 'orange-100' : 'blue-50'"
:text-color="ann.is_pinned ? 'orange-700' : 'blue-700'"
:color="ann.is_pinned ? 'orange' : 'primary'"
text-color="white"
size="42px"
font-size="20px"
class="shadow-sm"