fix: mobile layout and certification link

This commit is contained in:
Jannat Patel
2024-04-05 08:56:18 +05:30
parent 838bc1fac2
commit d892a28069
9 changed files with 37 additions and 15 deletions

View File

@@ -3,7 +3,7 @@
<iframe
v-if="course.data.video_link"
:src="video_link"
class="rounded-t-md min-h-56 min-w-80"
class="rounded-t-md min-h-56 w-full"
/>
<div class="p-5">
<div v-if="course.data.price" class="text-2xl font-semibold mb-3">

View File

@@ -11,7 +11,7 @@
<div v-if="showTopics" v-for="(topic, index) in topics.data">
<div
@click="showReplies(topic)"
class="flex items-center cursor-pointer py-5"
class="flex items-center cursor-pointer py-5 w-full"
:class="{ 'border-b': index + 1 != topics.data.length }"
>
<UserAvatar :user="topic.user" size="2xl" class="mr-4" />
@@ -23,7 +23,7 @@
<span>
{{ topic.user.full_name }}
</span>
<span class="text-sm ml-2">
<span class="text-sm ml-3">
{{ timeAgo(topic.creation) }}
</span>
</div>

View File

@@ -1,13 +1,13 @@
<template>
<div class="flex h-full flex-col">
<div class="h-full" id="scrollContainer">
<div class="h-full pb-10" id="scrollContainer">
<slot />
</div>
<div
v-if="tabs"
class="grid grid-cols-5 border-t border-gray-300 sticky bottom-0 z-10 bg-white standalone:pb-4"
class="fixed flex justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
:style="{
gridTemplateColumns: `repeat(${tabs.length - 1}, minmax(0, 1fr))`,
gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))`,
}"
>
<button
@@ -19,7 +19,7 @@
>
<component
:is="tab.icon"
class="h-7 w-7 stroke-1.5"
class="h-6 w-6 stroke-1.5"
:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
/>
</button>

View File

@@ -31,7 +31,11 @@
>
{{ __('Loading Batches...') }}
</div>
<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
<Tabs
v-model="tabIndex"
:tabs="tabs"
tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
>
<template #tab="{ tab, selected }">
<div>
<button

View File

@@ -3,10 +3,10 @@
<div class="grid md:grid-cols-[70%,30%] h-full">
<div>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
<div class="flex items-center">
<div class="flex items-center mt-3 md:mt-0">
<router-link
v-if="courseResource.data"
:to="{

View File

@@ -1,12 +1,12 @@
<template>
<div class="">
<div class="grid grid-cols-[75%,25%] h-full">
<div class="grid md:grid-cols-[75%,25%] h-full">
<div class="border-r">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b overflow-hidden bg-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<Button variant="solid" @click="saveLesson()">
<Breadcrumbs class="text-ellipsis" :items="breadcrumbs" />
<Button variant="solid" @click="saveLesson()" class="mt-3 md:mt-0">
{{ __('Save') }}
</Button>
</header>