fix: mobile view of lists

This commit is contained in:
Jannat Patel
2026-04-11 19:50:59 +05:30
parent af08e6842a
commit ec5e45e6c6
7 changed files with 22 additions and 17 deletions

View File

@@ -21,7 +21,9 @@
</header>
<div class="py-5">
<div class="flex items-center justify-between mb-5 mx-5">
<div
class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 justify-between mb-5 mx-5"
>
<div class="text-lg font-semibold text-ink-gray-9">
{{ __('{0} Assignments').format(assignments.data?.length) }}
</div>
@@ -52,7 +54,7 @@
showAssignmentForm = true
},
}"
class="h-[79vh] px-5"
class="h-[71vh] lg:h-[79vh] px-5"
>
<ListHeader
class="mb-2 grid items-center rounded bg-surface-white border-b rounded-none p-2"
@@ -250,7 +252,7 @@ const assignmentColumns = computed(() => {
icon: 'tag',
},
{
label: __('Modified'),
label: __('Updated On'),
key: 'modified',
width: 1,
align: 'right',

View File

@@ -58,9 +58,9 @@
</div>
<div
v-if="participants.data?.length"
class="h-[76vh] overflow-y-auto mb-5 px-5"
class="h-[63vh] lg:h-[76vh] overflow-y-auto mb-5 px-5"
>
<div class="grid grid-cols-4 gap-5">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
<div
v-for="participant in participants.data"
class="flex flex-col border hover:border-outline-gray-3 rounded-lg p-3 text-ink-gray-9 cursor-pointer"
@@ -107,7 +107,7 @@
</div>
</div>
</div>
<div v-else class="h-[53vh]">
<div v-else class="h-[40vh] lg:h-[53vh] px-5">
<EmptyState type="Certified Members" />
</div>
<div class="flex items-center justify-end space-x-3 border-t pt-3 px-5">

View File

@@ -98,7 +98,7 @@
</div>
<div
v-if="jobs.data?.length"
class="w-full h-[78vh] overflow-y-auto mx-auto p-5 pt-0"
class="w-full h-[61vh] lg:h-[78vh] overflow-y-auto mx-auto p-5 pt-0"
>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<router-link
@@ -113,7 +113,7 @@
</router-link>
</div>
</div>
<div v-else class="h-[50vh]">
<div v-else class="h-[32vh] lg:h-[50vh] px-5">
<EmptyState type="Job Openings" />
</div>
<div class="flex items-center justify-end space-x-3 border-t pt-3 px-5">

View File

@@ -39,9 +39,9 @@
/>
<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="flex-1 flex flex-row space-x-2 justify-between">
<div
class="text-ink-gray-9 text-sm sm:text-base"
class="text-ink-gray-9 text-sm sm:text-base leading-5"
v-html="log.subject"
></div>
<div class="text-xs text-ink-gray-5 whitespace-nowrap">

View File

@@ -6,6 +6,7 @@
<div class="space-x-2">
<router-link
v-if="exercises.data?.length"
class="hidden md:block"
:to="{
name: 'ProgrammingExerciseSubmissions',
}"
@@ -35,7 +36,9 @@
</div>
</header>
<div class="py-5">
<div class="flex items-center justify-between mb-5 px-5">
<div
class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 justify-between mb-5 px-5"
>
<div class="text-lg font-semibold text-ink-gray-9">
{{ __('{0} Exercises').format(exercises.data?.length) }}
</div>
@@ -69,7 +72,7 @@
showForm = true
},
}"
class="h-[79vh] px-5"
class="h-[71vh] lg:h-[79vh] px-5"
>
<ListHeader
class="mb-2 grid items-center rounded bg-surface-white border-b rounded-none p-2"
@@ -115,7 +118,7 @@
</ListSelectBanner>
</ListView>
</div>
<div v-else class="h-[53vh]">
<div v-else class="h-[45vh] lg:h-[53vh] px-5">
<EmptyState type="Programming Exercises" />
</div>
<div class="flex items-center justify-end space-x-3 px-5 pt-3 border-t">

View File

@@ -10,7 +10,7 @@
{{ __('New') }}
</Button>
</header>
<div v-if="programs.data?.length && !isStudent" class="py-10 w-3/4 mx-auto">
<div v-if="programs.data?.length && !isStudent" class="py-10 px-5">
<div class="text-lg font-semibold text-ink-gray-9 mb-5">
{{
__('{0} {1}').format(
@@ -19,7 +19,7 @@
)
}}
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
<div
v-for="program in programs.data"
@click="openForm(program.name)"

View File

@@ -27,7 +27,7 @@
:rows="quizzes.data"
row-key="name"
:options="{ showTooltip: false, selectable: true }"
class="h-[79vh] px-5"
class="h-[74.5vh] lg:h-[79vh] px-5"
>
<ListHeader
class="mb-2 grid items-center rounded bg-surface-white border-b rounded-none p-2"
@@ -85,7 +85,7 @@
</template>
</ListSelectBanner>
</ListView>
<div v-else class="h-[53vh]">
<div v-else class="h-[49vh] lg:h-[53vh] px-5">
<EmptyState type="Quizzes" />
</div>
<div class="flex items-center justify-end space-x-3 pt-3 border-t px-5">