fix: mobile view for batch dashboard

This commit is contained in:
Jannat Patel
2026-02-18 10:58:49 +05:30
parent af273a9a1c
commit 6f86b822bf
9 changed files with 28 additions and 31 deletions

View File

@@ -37,7 +37,10 @@
<div v-else>
<Tabs :tabs="tabs" v-model="tabIndex">
<template #tab-panel="{ tab }">
<div v-if="tab.label == 'Discussions'" class="w-[75%] mx-auto mt-5">
<div
v-if="tab.label == 'Discussions'"
class="w-[90%] lg:w-[75%] mx-auto mt-5"
>
<Discussions
doctype="LMS Batch"
:docname="batch.data.name"

View File

@@ -1,7 +1,7 @@
<template>
<div class="">
<div class="grid grid-cols-[3fr,2fr]">
<div v-if="batchDetail.doc" class="py-5 h-[88vh] overflow-y-auto">
<div class="grid grid-cols-1 lg:grid-cols-[3fr,2fr]">
<div v-if="batchDetail.doc" class="py-5 lg:h-[88vh] lg:overflow-y-auto">
<div class="px-5 pb-5 space-y-5 border-b mb-5">
<div class="text-lg text-ink-gray-9 font-semibold mb-4">
{{ __('Details') }}

View File

@@ -24,9 +24,9 @@
/>
</div>
<div class="grid grid-cols-[3fr_2fr] gap-5 items-start">
<div v-if="students.data?.length" class="border rounded-lg py-3 px-4">
<div class="flex items-center justify-between mb-3">
<div class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-5 items-start">
<div class="border rounded-lg py-3 px-4 order-2 lg:order-1">
<div class="flex items-center justify-between space-x-2 mb-3">
<div class="text-lg text-ink-gray-9 font-semibold">
{{ __('Students') }}
</div>
@@ -122,7 +122,7 @@
</div>
</div>
<div>
<div class="order-1 lg:order-2">
<AxisChart
v-if="showProgressChart"
class="border rounded-lg p-3 min-h-[300px]"

View File

@@ -1,5 +1,5 @@
<template>
<div class="w-[75%] mx-auto mt-5">
<div class="w-[90%] lg:w-[75%] mx-auto mt-5">
<div class="text-ink-gray-9 font-semibold text-lg mb-5">
{{ __('Announcements') }}
</div>
@@ -24,7 +24,7 @@
</div>
</div>
</div>
<div v-else class="text-ink-gray-7">
<div v-else class="text-ink-gray-7 leading-5">
{{ __('No announcements have been made yet for this batch') }}
</div>
</div>

View File

@@ -1,6 +1,6 @@
<template>
<div class="h-[88vh]">
<div class="grid grid-cols-[2fr,1fr] gap-5">
<div class="grid grid-cols-1 lg:grid-cols-[2fr,1fr] gap-5">
<div class="p-5">
<div class="mb-8 space-y-2">
<div class="text-lg text-ink-gray-9 font-semibold">

View File

@@ -197,7 +197,7 @@ const redirectToCourse = (row: any) => {
}
const assessmentColumns = [
{ key: 'title', label: 'Assessment', align: 'left' },
{ key: 'title', label: 'Assessment', align: 'left', width: '60%' },
{ key: 'status', label: 'Percentage/Status', align: 'right' },
]

View File

@@ -2,10 +2,10 @@
<div class="p-5">
<div
v-if="isAdmin() && !props.zoomAccount"
class="flex items-center space-x-2 mb-5 bg-surface-amber-1 px-3 py-2 rounded-lg text-ink-amber-3"
class="flex lg:items-center space-x-2 mb-5 bg-surface-amber-1 px-3 py-2 rounded-lg text-ink-amber-3"
>
<AlertCircle class="size-4 stroke-1.5" />
<span>
<AlertCircle class="size-7 md:size-4 stroke-1.5" />
<span class="leading-5">
{{
__(
'Link a Zoom account to this batch from the Settings tab to create live classes'