MIDNIGHT/frappe-lms
2
0
Fork 0
mirror of https://github.com/frappe/lms.git synced 2026-04-19 22:52:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(notifications): single-line mobile header and improve empty state (#2250)

Browse Source 
* fix(notifications): single-line mobile header and improve empty state

* fix(style): improve the notification content for mobile view and dark theme
This commit is contained in:
Leo Daniel A
2026-03-31 13:01:53 +05:30
committed by GitHub
parent 8100c67a00
commit 42abc678a2
1 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/pages/Notifications.vue
View File

@@ -1,9 +1,11 @@
<template>
<header
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex flex-row items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<div class="flex items-center space-x-2">
<div class="flex-1">
<Breadcrumbs :items="breadcrumbs" />
</div>
<div class="flex items-center space-x-2 shrink-0">
<Button
@click="markAllAsRead.submit"
:loading="markAllAsRead.loading"
@@ -18,12 +20,12 @@
/>
</div>
</header>
<div class="w-full md:w-3/4 mx-auto px-5 pt-6 divide-y">
<div class="w-full md:w-3/4 mx-auto px-3 sm:px-5 pt-4 sm:pt-6 divide-y">
<div
v-if="notifications?.length"
v-for="log in notifications"
:key="log.name"
class="flex space-x-2 px-2 py-4"
class="flex space-x-2 sm:space-x-3 px-1 sm:px-2 py-3 sm:py-4"
:class="{
'cursor-pointer': log.link,
'items-center': !showDetails(log) && !isMentionOrComment(log),
@@ -35,15 +37,18 @@
size="xl"
:label="log.from_user_details.full_name"
/>
<div class="space-y-2 w-full">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="text-ink-gray-9" v-html="log.subject"></div>
</div>
<div class="flex items-center space-x-2">
<div class="text-sm text-ink-gray-5">
<div class="space-y-1.5 sm:space-y-2 w-full">
<div class="flex items-start sm:items-center justify-between gap-2">
<div class="flex-1 flex flex-row justify-between">
<div
class="text-ink-gray-9 text-sm sm:text-base"
v-html="log.subject"
></div>
<div class="text-xs text-ink-gray-5 whitespace-nowrap">
{{ dayjs(log.creation).fromNow() }}
</div>
</div>
<div class="flex items-center space-x-2 shrink-0">
<Button
variant="ghost"
v-if="!log.read"
@@ -62,7 +67,7 @@
></div>
<div
v-else-if="showDetails(log)"
class="flex items-stretch border border-outline-gray-2 space-x-2 rounded-md"
class="flex flex-col sm:flex-row sm:items-stretch border border-outline-gray-2 sm:space-x-2 rounded-md"
>
<iframe
v-if="
@@ -70,7 +75,7 @@
log.document_details.video_link
"
:src="`https://www.youtube.com/embed/${log.document_details.video_link}`"
class="rounded-l-md w-72"
class="sm:rounded-l-md rounded-t-md w-full sm:w-72"
/>
<video
v-else-if="
@@ -78,7 +83,7 @@
log.document_details.video_link
"
:src="log.document_details.video_link"
class="rounded-l-md w-72"
class="sm:rounded-l-md rounded-t-md w-full sm:w-72"
/>
<div class="p-3">
<div
@@ -90,15 +95,15 @@
: __('New Batch')
}}
</div>
<div class="font-semibold mb-1">
<div class="font-semibold mb-1 text-ink-gray-9">
{{ __(log.document_details.title) }}
</div>
<div class="leading-5">
<div class="leading-5 text-ink-gray-7">
{{ __(log.document_details.short_introduction) }}
</div>
<div
v-if="log.document_details.start_date"
class="flex items-center space-x-2 text-sm mt-5"
class="flex items-center space-x-2 text-sm mt-5 text-ink-gray-7"
>
<Calendar class="size-3 stroke-1.5" />
<span>
@@ -109,7 +114,7 @@
</div>
<div
v-if="log.document_details.start_time"
class="flex items-center space-x-2 text-sm mt-2"
class="flex items-center space-x-2 text-sm mt-2 text-ink-gray-7"
>
<Clock class="size-3 stroke-1.5" />
<span>
@@ -130,7 +135,7 @@
:image="instructor.user_image"
:label="instructor.full_name"
/>
<span class="font-medium text-sm">
<span class="font-medium text-sm text-ink-gray-9">
{{ instructor.full_name }}
</span>
</div>
@@ -139,8 +144,22 @@
</div>
</div>
</div>
<div v-else class="text-ink-gray-5">
{{ __('Nothing to see here.') }}
<div v-else class="flex flex-col items-center justify-center mt-60">
<Bell class="size-10 mx-auto stroke-1 text-ink-gray-5" />
<p class="text-lg font-semibold text-ink-gray-7 mb-2.5">
{{
activeTab === 'Unread'
? __('No unread notifications')
: __('No read notifications')
}}
</p>
<p class="text-p-base w-full md:w-2/5 text-center text-ink-gray-7">
{{
activeTab === 'Unread'
? __("You're all caught up! Check back later for updates.")
: __('Notifications you have read will appear here.')
}}
</p>
</div>
</div>
</template>
@@ -158,7 +177,7 @@ import {
import { sessionStore } from '../stores/session'
import { computed, inject, ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { Calendar, Clock, X } from 'lucide-vue-next'
import { Bell, Calendar, Clock, X } from 'lucide-vue-next'
import { formatTime } from '@/utils/'
const { brand } = sessionStore()