MIDNIGHT/enlight-lms
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: mobile layout

Browse Source
This commit is contained in:
Jannat Patel
2025-12-29 19:14:22 +05:30
parent 5053b4e45f
commit a497a2d838
3 changed files with 106 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/MobileLayout.vue
View File

@@ -80,6 +80,7 @@ onMounted(() => {
{},
{
onSuccess(data) {
destructureSidebarLinks()
filterLinksToShow(data)
addOtherLinks()
},
@@ -103,6 +104,16 @@ watch(showMenu, (val) => {
}
})
const destructureSidebarLinks = () => {
let links = []
sidebarLinks.value.forEach((link) => {
link.items?.forEach((item) => {
links.push(item)
})
})
sidebarLinks.value = links
}
const filterLinksToShow = (data) => {
Object.keys(data).forEach((key) => {
if (!parseInt(data[key])) {

70
frontend/src/pages/CertifiedParticipants.vue
View File

@@ -13,41 +13,47 @@
</router-link>
</header>
<div class="mx-auto w-full max-w-4xl pt-6 pb-10">
<div class="flex flex-col md:flex-row justify-between mb-4 px-3">
<div class="flex flex-col md:flex-row justify-between mb-8 px-3">
<div class="text-xl font-semibold text-ink-gray-9 mb-4 md:mb-0">
{{ memberCount }} {{ __('certified members') }}
</div>
<div class="flex items-center space-x-4">
<FormControl
v-model="nameFilter"
:placeholder="__('Search by Name')"
type="text"
class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
@input="updateParticipants()"
/>
<div
v-if="categories.data?.length"
class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
>
<Select
v-model="currentCategory"
:options="categories.data"
:placeholder="__('Category')"
@update:modelValue="updateParticipants()"
<div
class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-4"
>
<div class="flex items-center space-x-4">
<FormControl
v-model="nameFilter"
:placeholder="__('Search by Name')"
type="text"
class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
@input="updateParticipants()"
/>
<div
v-if="categories.data?.length"
class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
>
<Select
v-model="currentCategory"
:options="categories.data"
:placeholder="__('Category')"
@update:modelValue="updateParticipants()"
/>
</div>
</div>
<div class="flex items-center space-x-4">
<FormControl
v-model="openToOpportunities"
:label="__('Open to Opportunities')"
type="checkbox"
@change="updateParticipants()"
/>
<FormControl
v-model="hiring"
:label="__('Hiring')"
type="checkbox"
@change="updateParticipants()"
/>
</div>
<FormControl
v-model="openToOpportunities"
:label="__('Open to Opportunities')"
type="checkbox"
@change="updateParticipants()"
/>
<FormControl
v-model="hiring"
:label="__('Hiring')"
type="checkbox"
@change="updateParticipants()"
/>
</div>
</div>
<div v-if="participants.data?.length" class="">
@@ -59,10 +65,10 @@
username: participant.username,
},
}"
class="flex h-15 rounded-md hover:bg-surface-gray-2 px-3"
class="flex rounded-md hover:bg-surface-gray-2 px-3"
>
<div
class="flex items-center w-full space-x-3 py-2"
class="flex w-full space-x-3 py-2"
:class="{
'border-b': index < participants.data.length - 1,
}"

98
frontend/src/pages/Jobs.vue
View File

@@ -26,56 +26,72 @@
</header>
<div>
<div
class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between w-full md:w-4/5 mx-auto p-5"
class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between w-full md:w-4/5 mx-auto mb-2 p-5"
>
<div class="text-xl font-semibold text-ink-gray-7 mb-4 md:mb-0">
{{ __('{0} Open Jobs').format(jobCount) }}
</div>
<div class="flex items-center justify-between space-x-4">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-ink-gray-9 md:mb-0">
{{ __('{0} {1} Jobs').format(jobCount, activeTab) }}
</div>
<TabButtons
v-if="tabs.length > 1"
v-model="activeTab"
:buttons="tabs"
class="lg:hidden"
@change="updateJobs"
/>
<FormControl
type="text"
:placeholder="__('Search')"
v-model="searchQuery"
class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
@input="updateJobs"
>
<template #prefix>
<Search
class="w-4 h-4 stroke-1.5 text-ink-gray-5"
name="search"
/>
</template>
</FormControl>
<Link
v-if="user.data"
doctype="Country"
v-model="country"
:placeholder="__('Country')"
class="min-w-32 lg:min-w-0 lg:w-32 xl:w-32"
/>
<FormControl
v-model="jobType"
type="select"
:options="jobTypes"
class="min-w-32 lg:min-w-0 lg:w-32 xl:w-32"
:placeholder="__('Type')"
@change="updateJobs"
/>
<FormControl
v-model="workMode"
type="select"
:options="workModes"
class="min-w-32 lg:min-w-0 lg:w-32 xl:w-32"
:placeholder="__('Work Mode')"
</div>
<div
class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0"
>
<TabButtons
v-if="tabs.length > 1"
v-model="activeTab"
:buttons="tabs"
class="hidden lg:block"
@change="updateJobs"
/>
<div class="grid grid-cols-2 gap-4">
<FormControl
type="text"
:placeholder="__('Search')"
v-model="searchQuery"
class="w-full max-w-40"
@input="updateJobs"
>
<template #prefix>
<Search
class="w-4 h-4 stroke-1.5 text-ink-gray-5"
name="search"
/>
</template>
</FormControl>
<Link
v-if="user.data"
doctype="Country"
v-model="country"
:placeholder="__('Country')"
class="w-full"
/>
</div>
<div class="grid grid-cols-2 gap-4">
<FormControl
v-model="jobType"
type="select"
:options="jobTypes"
class="w-full"
:placeholder="__('Type')"
@change="updateJobs"
/>
<FormControl
v-model="workMode"
type="select"
:options="workModes"
class="w-full"
:placeholder="__('Work Mode')"
@change="updateJobs"
/>
</div>
</div>
</div>
<div v-if="jobs.data?.length" class="w-full md:w-4/5 mx-auto p-5 pt-0">