fix
This commit is contained in:
sajjadtalkhabi
@@ -11,182 +11,143 @@
|
||||
</BoxedIconTitleBlock>
|
||||
|
||||
<form class="session-form__form" @submit.prevent="onSubmit">
|
||||
<div class="session-form__grid">
|
||||
<div class="session-form__image-col">
|
||||
<ImageCropper
|
||||
v-model="image"
|
||||
name="image"
|
||||
bg-color="#eeeeee"
|
||||
@crop="onImageCropped"
|
||||
@error="onImageError"
|
||||
/>
|
||||
</div>
|
||||
<LineTitleBlock title="اطلاعات جلسه" title-en="Session Details" />
|
||||
|
||||
<div class="session-form__main-col">
|
||||
<LineTitleBlock title="اطلاعات جلسه" title-en="Session Details" />
|
||||
<div class="session-form__row">
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<TextField
|
||||
v-model="form.title"
|
||||
name="title"
|
||||
label="عنوان جلسه"
|
||||
:error="errors.title"
|
||||
@blur="validateAt('title', form.title)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="book" :size="20" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<SelectField
|
||||
v-model="form.courseTemplateId"
|
||||
name="courseTemplateId"
|
||||
label="دوره الگو"
|
||||
:options="templateOptions"
|
||||
option-label="title"
|
||||
option-value="id"
|
||||
:searchable="true"
|
||||
:on-search="searchTemplates"
|
||||
:error="errors.courseTemplateId"
|
||||
/>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<SelectField
|
||||
v-model="form.sessionType"
|
||||
name="sessionType"
|
||||
label="نوع جلسه"
|
||||
:options="sessionTypeOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
:error="errors.sessionType"
|
||||
/>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<TextField
|
||||
v-model="form.durationMinutes"
|
||||
name="durationMinutes"
|
||||
label="مدت زمان (دقیقه)"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.durationMinutes"
|
||||
@blur="validateAt('durationMinutes', form.durationMinutes)"
|
||||
/>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<TextField
|
||||
v-model="form.order"
|
||||
name="order"
|
||||
label="ترتیب"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.order"
|
||||
/>
|
||||
</div>
|
||||
<!-- row 1 — title / startTime / endTime -->
|
||||
<div class="session-form__row session-form__row--three">
|
||||
<TextField
|
||||
v-model="form.title"
|
||||
name="title"
|
||||
label="عنوان جلسه"
|
||||
:error="errors.title"
|
||||
@blur="validateAt('title', form.title)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="book" :size="20" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
<DatePickerField
|
||||
v-model="form.startTime"
|
||||
name="startTime"
|
||||
label="زمان شروع"
|
||||
type="datetime"
|
||||
:error="errors.startTime"
|
||||
@blur="validateAt('startTime', form.startTime)"
|
||||
/>
|
||||
<DatePickerField
|
||||
v-model="form.endTime"
|
||||
name="endTime"
|
||||
label="زمان پایان"
|
||||
type="datetime"
|
||||
:error="errors.endTime"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-if="form.sessionType === 'online'">
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<TextField
|
||||
v-model="form.sessionConfig.meetingLink"
|
||||
name="meetingLink"
|
||||
label="لینک جلسه"
|
||||
/>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<SelectField
|
||||
v-model="form.sessionConfig.platform"
|
||||
name="platform"
|
||||
label="پلتفرم"
|
||||
:options="platformOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
/>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<DatePickerField
|
||||
v-model="form.sessionConfig.startTime"
|
||||
name="startTime"
|
||||
label="تاریخ و ساعت شروع"
|
||||
type="datetime"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- row 2 — durationMinutes / courseId / contentType -->
|
||||
<div class="session-form__row session-form__row--three">
|
||||
<TextField
|
||||
v-model="form.durationMinutes"
|
||||
name="durationMinutes"
|
||||
label="مدت زمان جلسه (دقیقه)"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.durationMinutes"
|
||||
@blur="validateAt('durationMinutes', form.durationMinutes)"
|
||||
/>
|
||||
<SelectField
|
||||
v-model="form.courseId"
|
||||
name="courseId"
|
||||
label="دوره"
|
||||
:options="courseOptions"
|
||||
option-label="title"
|
||||
option-value="id"
|
||||
:searchable="true"
|
||||
:on-search="searchCourses"
|
||||
:error="errors.courseId"
|
||||
/>
|
||||
<SelectField
|
||||
v-model="form.contentType"
|
||||
name="contentType"
|
||||
label="محتوای جلسه"
|
||||
:options="contentTypeOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
:error="errors.contentType"
|
||||
@change="onContentTypeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-else-if="form.sessionType === 'in_person'">
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<DatePickerField
|
||||
v-model="form.sessionConfig.startTime"
|
||||
name="startTime"
|
||||
label="تاریخ و ساعت شروع"
|
||||
type="datetime"
|
||||
/>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--full">
|
||||
<TextField
|
||||
v-model="form.sessionConfig.location"
|
||||
name="location"
|
||||
label="مکان جلسه"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- row 3 — sessionType / meetingLink -->
|
||||
<div class="session-form__row session-form__row--two">
|
||||
<SelectField
|
||||
v-model="form.sessionType"
|
||||
name="sessionType"
|
||||
label="نوع جلسه"
|
||||
:options="sessionTypeOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
:error="errors.sessionType"
|
||||
@change="onSessionTypeChange"
|
||||
/>
|
||||
<TextField
|
||||
v-model="form.meetingLink"
|
||||
name="meetingLink"
|
||||
label="لینک جلسه"
|
||||
:disabled="form.sessionType !== 'online'"
|
||||
:error="errors.meetingLink"
|
||||
@blur="validateAt('meetingLink', form.meetingLink)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-else-if="['video', 'audio'].includes(form.sessionType)">
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<TextField
|
||||
v-model="form.sessionConfig.minWatchedPercent"
|
||||
name="minWatchedPercent"
|
||||
label="حداقل درصد مشاهده (%)"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--third session-form__toggle-cell">
|
||||
<ToggleSwitch
|
||||
v-model="form.sessionConfig.mustCompleteBeforeNext"
|
||||
label="الزام تکمیل قبل از جلسه بعدی"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- row 4 — description -->
|
||||
<div class="session-form__row">
|
||||
<TextareaField
|
||||
v-model="form.description"
|
||||
name="description"
|
||||
label="توضیحات جلسه"
|
||||
:row="5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-else-if="['text', 'slide', 'pdf'].includes(form.sessionType)">
|
||||
<div class="session-form__cell session-form__cell--third">
|
||||
<TextField
|
||||
v-model="form.sessionConfig.minReadPercent"
|
||||
name="minReadPercent"
|
||||
label="حداقل درصد مطالعه (%)"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="session-form__cell session-form__cell--third session-form__toggle-cell">
|
||||
<ToggleSwitch
|
||||
v-model="form.sessionConfig.mustCompleteBeforeNext"
|
||||
label="الزام تکمیل قبل از جلسه بعدی"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- row 5 — content uploader -->
|
||||
<div class="session-form__row">
|
||||
<label class="session-form__uploader-label">محتوای جلسه</label>
|
||||
<FileUploader
|
||||
v-model="contentFiles"
|
||||
:accept="contentAccept"
|
||||
:multiple="false"
|
||||
:max-files="1"
|
||||
:disabled="!form.contentType"
|
||||
@select="onContentSelect"
|
||||
@remove="onContentRemove"
|
||||
@error="onContentError"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="session-form__cell session-form__cell--full">
|
||||
<TextareaField
|
||||
v-model="form.description"
|
||||
name="description"
|
||||
label="توضیحات"
|
||||
:row="5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="session-form__materials">
|
||||
<LineTitleBlock title="فایلهای جلسه" title-en="Session Materials" />
|
||||
<FileUploader
|
||||
v-model="materials"
|
||||
accept=".mp4,.mov,.avi,.mp3,.wav,.jpg,.jpeg,.png,.pdf,.txt,.doc,.docx"
|
||||
:multiple="true"
|
||||
:max-files="10"
|
||||
context="session"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row 6 — preview of uploaded content -->
|
||||
<div v-if="contentPreviewUrl" class="session-form__row session-form__preview">
|
||||
<video
|
||||
v-if="form.contentType === 'video'"
|
||||
:src="contentPreviewUrl"
|
||||
controls
|
||||
class="session-form__media"
|
||||
/>
|
||||
<audio
|
||||
v-else-if="form.contentType === 'voice'"
|
||||
:src="contentPreviewUrl"
|
||||
controls
|
||||
class="session-form__media"
|
||||
/>
|
||||
<a
|
||||
v-else
|
||||
:href="contentPreviewUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="session-form__file-link"
|
||||
>
|
||||
<SvgIcon name="file" :size="18" color="var(--color-primary)" />
|
||||
<span>{{ contentFiles[0]?.name || 'فایل پیوست' }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="session-form__divider" />
|
||||
@@ -227,19 +188,17 @@ import { useQueryClient } from '@tanstack/vue-query'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import { SESSION_PLATFORM, SESSION_TYPE } from '@/enums'
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import ToggleSwitch from '@/components/form/ToggleSwitch.vue'
|
||||
import ImageCropper from '@/components/form/ImageCropper.vue'
|
||||
import FileUploader from '@/components/form/FileUploader.vue'
|
||||
import { objectToFormData } from '@/utils/object-to-formdata'
|
||||
import { useUploadMediaMutation } from '@/services/query/auth'
|
||||
import TextareaField from '@/components/form/TextareaField.vue'
|
||||
import { sessionSchema } from '@/features/admin/sessions/schema'
|
||||
import { useUploadMediaMutation } from '@/services/query/auth'
|
||||
import DatePickerField from '@/components/form/DatePickerField.vue'
|
||||
import { useAdminCoursesListQuery } from '@/services/query/admin-courses'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import { useAdminCourseTemplatesListQuery } from '@/services/query/admin-course-templates'
|
||||
import { COURSE_CONTENT_TYPE, COURSE_CONTENT_TYPE_ACCEPT, SESSION_TYPE } from '@/enums'
|
||||
import {
|
||||
adminSessionsKeys,
|
||||
useAddAdminSessionMutation,
|
||||
@@ -254,149 +213,146 @@ const queryClient = useQueryClient()
|
||||
const sessionId = computed(() => (route.params.id ? Number(route.params.id) : null))
|
||||
const isEditMode = computed(() => !!sessionId.value)
|
||||
|
||||
const sessionTypeOptions = Object.entries(SESSION_TYPE).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}))
|
||||
const platformOptions = Object.entries(SESSION_PLATFORM).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}))
|
||||
// نوع جلسه: only the two delivery modes — backend `type` collapses to online/offline.
|
||||
const sessionTypeOptions = [
|
||||
{ value: 'in_person', label: SESSION_TYPE.in_person },
|
||||
{ value: 'online', label: SESSION_TYPE.online },
|
||||
]
|
||||
|
||||
const emptySessionConfig = () => ({
|
||||
meetingLink: '',
|
||||
platform: '',
|
||||
startTime: '',
|
||||
location: '',
|
||||
minWatchedPercent: '',
|
||||
minReadPercent: '',
|
||||
mustCompleteBeforeNext: false,
|
||||
})
|
||||
// محتوای جلسه: voice / video / text — reuses the course content-type enum.
|
||||
const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
}))
|
||||
|
||||
const form = ref({
|
||||
title: '',
|
||||
courseTemplateId: '',
|
||||
sessionType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
durationMinutes: '',
|
||||
order: '',
|
||||
courseId: '',
|
||||
contentType: '',
|
||||
sessionType: '',
|
||||
meetingLink: '',
|
||||
description: '',
|
||||
imageId: null,
|
||||
sessionConfig: emptySessionConfig(),
|
||||
contentMediaId: null,
|
||||
})
|
||||
|
||||
const image = ref(null)
|
||||
const materials = ref([])
|
||||
const contentFiles = ref([])
|
||||
|
||||
const schema = sessionSchema
|
||||
const contentAccept = computed(() => COURSE_CONTENT_TYPE_ACCEPT[form.value.contentType] || '*')
|
||||
const contentPreviewUrl = computed(() => contentFiles.value[0]?.url || '')
|
||||
|
||||
const { validate, validateAt, errors } = useYup(schema)
|
||||
const { validate, validateAt, errors } = useYup(sessionSchema)
|
||||
|
||||
const templateSearch = ref('')
|
||||
const templateFilters = computed(() => ({ title: templateSearch.value }))
|
||||
const templatePagination = ref({ page: 1, perPage: 30 })
|
||||
const { data: templatesResponse } = useAdminCourseTemplatesListQuery(
|
||||
templateFilters,
|
||||
templatePagination
|
||||
)
|
||||
const selectedTemplate = ref(null)
|
||||
const templateOptions = computed(() => {
|
||||
const base = templatesResponse.value?.data ?? []
|
||||
if (selectedTemplate.value && !base.some((t) => t.id === selectedTemplate.value.id)) {
|
||||
return [...base, selectedTemplate.value]
|
||||
const courseSearch = ref('')
|
||||
const courseFilters = computed(() => ({ title: courseSearch.value }))
|
||||
const coursePagination = ref({ page: 1, perPage: 30 })
|
||||
const { data: coursesResponse } = useAdminCoursesListQuery(courseFilters, coursePagination)
|
||||
const selectedCourse = ref(null)
|
||||
const courseOptions = computed(() => {
|
||||
const base = coursesResponse.value?.data ?? []
|
||||
if (selectedCourse.value && !base.some((c) => c.id === selectedCourse.value.id)) {
|
||||
return [...base, selectedCourse.value]
|
||||
}
|
||||
return base
|
||||
})
|
||||
|
||||
const searchTemplates = useDebounce((q) => {
|
||||
templateSearch.value = q || ''
|
||||
const searchCourses = useDebounce((q) => {
|
||||
courseSearch.value = q || ''
|
||||
}, 400)
|
||||
|
||||
const onContentTypeChange = () => {
|
||||
contentFiles.value = []
|
||||
form.value.contentMediaId = null
|
||||
}
|
||||
|
||||
const onSessionTypeChange = () => {
|
||||
if (form.value.sessionType !== 'online') form.value.meetingLink = ''
|
||||
}
|
||||
|
||||
const { data: existingSession } = useAdminSessionQuery(sessionId, {
|
||||
enabled: () => !!sessionId.value,
|
||||
})
|
||||
|
||||
watch(existingSession, (session) => {
|
||||
if (!session) return
|
||||
if (session.courseTemplate) {
|
||||
selectedTemplate.value = session.courseTemplate
|
||||
}
|
||||
if (session.course) selectedCourse.value = session.course
|
||||
form.value = {
|
||||
title: session.title || '',
|
||||
courseTemplateId: session.courseTemplate?.id || session.courseTemplateId || '',
|
||||
sessionType: session.sessionType || '',
|
||||
startTime: session.startsAt || session.sessionConfig?.startTime || '',
|
||||
endTime: session.endsAt || session.sessionConfig?.endTime || '',
|
||||
durationMinutes: session.durationMinutes ?? '',
|
||||
order: session.order ?? '',
|
||||
courseId: session.course?.id || session.courseId || '',
|
||||
contentType: session.contentType || '',
|
||||
sessionType: session.sessionType || '',
|
||||
meetingLink: session.link || session.sessionConfig?.meetingLink || '',
|
||||
description: session.description || '',
|
||||
imageId: session.imageId || null,
|
||||
sessionConfig: { ...emptySessionConfig(), ...session.sessionConfig },
|
||||
contentMediaId: session.contentMediaId || null,
|
||||
}
|
||||
if (session.image) image.value = { url: session.image }
|
||||
if (Array.isArray(session.materials)) {
|
||||
materials.value = session.materials.map((m) => ({
|
||||
id: m.id,
|
||||
name: m.title || `فایل ${m.id}`,
|
||||
url: m.filePath || '',
|
||||
type: m.type,
|
||||
}))
|
||||
if (session.contentMedia) {
|
||||
contentFiles.value = [
|
||||
{
|
||||
id: session.contentMedia.id,
|
||||
name: session.contentMedia.fileName || session.contentMedia.name || 'file',
|
||||
size: session.contentMedia.fileSize ?? 0,
|
||||
url: session.contentMedia.url,
|
||||
},
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const uploadMutation = useUploadMediaMutation()
|
||||
|
||||
const onImageCropped = async (file) => {
|
||||
const purposeForContentType = (contentType) => {
|
||||
if (contentType === 'video') return 'video'
|
||||
if (contentType === 'voice') return 'voice'
|
||||
return 'attachment'
|
||||
}
|
||||
|
||||
const onContentSelect = async (files) => {
|
||||
const file = files?.[0]
|
||||
if (!file) return
|
||||
try {
|
||||
const formData = objectToFormData({ file, subType: 'avatar', context: 'session' })
|
||||
const formData = objectToFormData({
|
||||
file,
|
||||
purpose: purposeForContentType(form.value.contentType),
|
||||
context: 'session',
|
||||
})
|
||||
const response = await uploadMutation.mutateAsync(formData)
|
||||
const payload = response?.data ?? response
|
||||
image.value = { url: payload?.url, uploadId: payload?.uploadId, ...payload }
|
||||
form.value.imageId = payload?.uploadId || payload?.id
|
||||
const id = payload?.id ?? payload?.uploadId
|
||||
contentFiles.value = [{ id, name: file.name, size: file.size, url: payload?.url }]
|
||||
form.value.contentMediaId = id
|
||||
} catch {
|
||||
/* handled globally */
|
||||
contentFiles.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const onImageError = (msg) => toast.error(msg)
|
||||
|
||||
const cleanSessionConfig = (config, type) => {
|
||||
const result = {}
|
||||
const allow = (key) => {
|
||||
if (type === 'online') return ['meetingLink', 'platform', 'startTime'].includes(key)
|
||||
if (type === 'in_person') return ['startTime', 'location'].includes(key)
|
||||
if (['video', 'audio'].includes(type))
|
||||
return ['minWatchedPercent', 'mustCompleteBeforeNext'].includes(key)
|
||||
if (['text', 'slide', 'pdf'].includes(type))
|
||||
return ['minReadPercent', 'mustCompleteBeforeNext'].includes(key)
|
||||
return false
|
||||
}
|
||||
Object.entries(config || {}).forEach(([k, v]) => {
|
||||
if (!allow(k)) return
|
||||
if (v === '' || v === null || v === undefined) return
|
||||
result[k] = v
|
||||
})
|
||||
return result
|
||||
const onContentRemove = () => {
|
||||
contentFiles.value = []
|
||||
form.value.contentMediaId = null
|
||||
}
|
||||
|
||||
const onContentError = (msg) => toast.error(msg)
|
||||
|
||||
const buildPayload = (values) => {
|
||||
const sessionConfig = cleanSessionConfig(values.sessionConfig, values.sessionType)
|
||||
const payload = {
|
||||
title: values.title,
|
||||
courseTemplateId: values.courseTemplateId,
|
||||
sessionType: values.sessionType,
|
||||
startTime: values.startTime,
|
||||
endTime: values.endTime,
|
||||
durationMinutes: values.durationMinutes,
|
||||
order: values.order,
|
||||
courseId: values.courseId,
|
||||
contentType: values.contentType,
|
||||
sessionType: values.sessionType,
|
||||
meetingLink: values.sessionType === 'online' ? values.meetingLink : undefined,
|
||||
description: values.description,
|
||||
imageId: values.imageId,
|
||||
contentMediaId: values.contentMediaId,
|
||||
}
|
||||
if (Object.keys(sessionConfig).length > 0) payload.sessionConfig = sessionConfig
|
||||
payload.materials = materials.value.map((m, index) => ({
|
||||
fileId: m.id,
|
||||
isRequired: false,
|
||||
type: m.type,
|
||||
title: m.name,
|
||||
order: index + 1,
|
||||
}))
|
||||
Object.keys(payload).forEach((key) => {
|
||||
if (payload[key] === undefined || payload[key] === '') delete payload[key]
|
||||
if (payload[key] === undefined || payload[key] === '' || payload[key] === null) {
|
||||
delete payload[key]
|
||||
}
|
||||
})
|
||||
return payload
|
||||
}
|
||||
@@ -436,82 +392,72 @@ const onCancel = () => router.push({ name: 'admin-sessions' })
|
||||
background: rgba(255, 255, 255, 60%);
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 4fr 8fr;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
grid-template-columns: 3fr 9fr;
|
||||
}
|
||||
}
|
||||
|
||||
&__image-col {
|
||||
order: 2;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 1;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__main-col {
|
||||
order: 1;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
order: 2;
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: stretch;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&__cell {
|
||||
width: 100%;
|
||||
|
||||
&--third {
|
||||
&--two {
|
||||
@media (min-width: 768px) {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 32.3%;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&--full {
|
||||
width: 100%;
|
||||
&--three {
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle-cell {
|
||||
display: flex;
|
||||
&__uploader-label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-prim-gray);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
&__materials {
|
||||
margin-top: 1.5rem;
|
||||
&__media {
|
||||
max-width: 100%;
|
||||
border-radius: 0.75rem;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
&__file-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
border-block-end: 1px solid var(--color-thd-gray);
|
||||
margin-block: 1.5rem;
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
|
||||
Reference in New Issue
Block a user