mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-02 00:04:35 +00:00
responsive index
This commit is contained in:
Diyar Akhgar
parent
74895d6e88
commit
0b8b868a08
|
|
@ -117,6 +117,7 @@ router-view {
|
|||
|
||||
.content {
|
||||
padding: 5px 15px !important;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,7 +128,9 @@ router-view {
|
|||
}
|
||||
|
||||
.content {
|
||||
padding: 35px 15px !important;
|
||||
padding: 0px 15px !important;
|
||||
padding-bottom: 45px !important;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,10 +143,35 @@ router-view {
|
|||
|
||||
.content {
|
||||
padding: 15px 45px 45px 0 !important;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
@media (min-width: 1024px) and (max-width: 1280px) {
|
||||
.dashboard-page {
|
||||
margin-right: 20rem;
|
||||
padding: 20px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 35px 45px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-width : 1440px){
|
||||
.dashboard-page {
|
||||
margin-right: 20rem;
|
||||
padding: 20px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 35px 45px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px){
|
||||
.dashboard-page {
|
||||
margin-right: 20rem;
|
||||
padding: 20px;
|
||||
|
|
@ -154,5 +182,4 @@ router-view {
|
|||
padding: 35px 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,162 +1,230 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <AppHeader /> -->
|
||||
<div class="dashboard-grid">
|
||||
|
||||
<!-- Right Section -->
|
||||
<div class="right-section">
|
||||
<h2 class="section-title">راهنمای شروع</h2>
|
||||
<div class="tutorial-grid">
|
||||
<div class="dashboard">
|
||||
<div class="dashboard-grid">
|
||||
<!-- Right Section -->
|
||||
<div class="right-section">
|
||||
<h2 class="section-title">راهنمای شروع</h2>
|
||||
<swiper
|
||||
:slides-per-view="1.5"
|
||||
:space-between="10"
|
||||
:loop="true"
|
||||
:pagination="{ clickable: true }"
|
||||
:modules="modules"
|
||||
class="my-swiper"
|
||||
>
|
||||
<swiper-slide>
|
||||
<img
|
||||
class="tutorial-item"
|
||||
@click="tutorialShowModal = true;"
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg"
|
||||
style="cursor: pointer;"
|
||||
alt="Tutorial"
|
||||
class="swiper-image"
|
||||
@click="tutorialShowModal = true"
|
||||
/>
|
||||
<img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg" />
|
||||
<img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg" />
|
||||
<img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left Section -->
|
||||
<div class="left-section">
|
||||
<h2 class="section-title">جلسات</h2>
|
||||
<p class="section-description">
|
||||
فقط یک ایده با جلسه شگفتانگیز بعدیتان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
|
||||
</p>
|
||||
|
||||
<button class="create-meeting-btn" @click="showModal = true">
|
||||
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" />
|
||||
<span>ایجاد جلسه جدید</span>
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Meetings Section -->
|
||||
<div class="meetings-section">
|
||||
<div class="files-header">
|
||||
<h1 style=" font-size: 24px;">آخرین فایل ها</h1>
|
||||
<div class="file-buttons">
|
||||
<button class="white-button" @click="openDialog('image')">بارگذاری فایل</button>
|
||||
<router-link class="white-button" to="/dashboard/files">مدیریت فایلها</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meetings-scroll">
|
||||
<div class="meeting-cards">
|
||||
<div class="meeting-card">
|
||||
<div class="card-image" style="background-image: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png)"></div>
|
||||
<div class="card-content">
|
||||
<h3>Pico Control</h3>
|
||||
<div class="meeting-date">
|
||||
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||
<span>24 تیر 1403</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meeting-card">
|
||||
<div class="card-image" style="background-image: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png)"></div>
|
||||
<div class="card-content">
|
||||
<h3>Fakor Sanat Tehran</h3>
|
||||
<div class="meeting-date">
|
||||
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||
<span>24 تیر 1403</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meeting-card">
|
||||
<div class="card-image" style="background-image: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png)"></div>
|
||||
<div class="card-content">
|
||||
<h3>Design Artist</h3>
|
||||
<div class="meeting-date">
|
||||
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||
<span>24 تیر 1403</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meeting-card">
|
||||
<div class="card-image" style="background-image: url(https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png)"></div>
|
||||
<div class="card-content">
|
||||
<h3>Flash Back</h3>
|
||||
<div class="meeting-date">
|
||||
<img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" />
|
||||
<span>24 تیر 1403</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg"
|
||||
alt="Tutorial"
|
||||
class="swiper-image"
|
||||
/>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg"
|
||||
alt="Tutorial"
|
||||
class="swiper-image"
|
||||
/>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg"
|
||||
alt="Tutorial"
|
||||
class="swiper-image"
|
||||
/>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="tutorial-grid">
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg"
|
||||
alt="Tutorial"
|
||||
class="tutorial-item"
|
||||
@click="tutorialShowModal = true"
|
||||
/>
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg"
|
||||
alt="Tutorial"
|
||||
class="tutorial-item"
|
||||
/>
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg"
|
||||
alt="Tutorial"
|
||||
class="tutorial-item"
|
||||
/>
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg"
|
||||
alt="Tutorial"
|
||||
class="tutorial-item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left Section -->
|
||||
<div class="left-section">
|
||||
<h2 class="section-title">جلسات</h2>
|
||||
<p class="section-description">
|
||||
فقط یک ایده با جلسه شگفتانگیز بعدیتان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
|
||||
</p>
|
||||
<button class="create-meeting-btn" @click="showModal = true">
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg"
|
||||
alt="Create Meeting Icon"
|
||||
class="btn-icon"
|
||||
/>
|
||||
<span>ایجاد جلسه جدید</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Meetings Section -->
|
||||
<div class="meetings-section">
|
||||
<div class="files-header">
|
||||
<h1 class="files-title">آخرین فایلها</h1>
|
||||
<div class="file-buttons">
|
||||
<button class="white-button" @click="openDialog('image')">
|
||||
بارگذاری فایل
|
||||
</button>
|
||||
<router-link class="white-button" to="/dashboard/files">
|
||||
مدیریت فایلها
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<swiper
|
||||
:slides-per-view="2.2"
|
||||
:space-between="15"
|
||||
:loop="true"
|
||||
:pagination="{ clickable: true }"
|
||||
:breakpoints="{
|
||||
768: { slidesPerView: 3.4, spaceBetween: 15 },
|
||||
1024: { slidesPerView: 2.8, spaceBetween: 25 },
|
||||
1280: { slidesPerView: 3.8, spaceBetween: 30 },
|
||||
}"
|
||||
:modules="modules"
|
||||
class="last-files-swiper"
|
||||
>
|
||||
<swiper-slide v-for="(meeting, index) in meetings" :key="index" class="meeting-card">
|
||||
<div
|
||||
class="card-image"
|
||||
:style="{ backgroundImage: `url(${meeting.image})` }"
|
||||
></div>
|
||||
<div class="card-content">
|
||||
<h3>{{ meeting.title }}</h3>
|
||||
<div class="meeting-date">
|
||||
<img
|
||||
src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg"
|
||||
alt="Calendar Icon"
|
||||
class="date-icon"
|
||||
/>
|
||||
<span>{{ meeting.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Create Meeting Modal -->
|
||||
<CreateMeetingModal
|
||||
:is-open="showModal"
|
||||
@create-meeting="createNewMeeting"
|
||||
@close="showModal = false"
|
||||
/>
|
||||
|
||||
<!-- Tutorial Modal -->
|
||||
<TutorialShowModal
|
||||
:is-open="tutorialShowModal"
|
||||
@close="tutorialShowModal = false"
|
||||
/>
|
||||
|
||||
<!-- New File Dialog Component -->
|
||||
<NewFileDialog
|
||||
:is-open="isNewFileDialogOpen"
|
||||
:initial-upload-type="currentUploadType"
|
||||
:base-url="baseUrl"
|
||||
@close="closeDialog"
|
||||
@upload-success="fetchUserData"
|
||||
/>
|
||||
<!-- Modals -->
|
||||
<CreateMeetingModal
|
||||
:is-open="showModal"
|
||||
@create-meeting="createNewMeeting"
|
||||
@close="showModal = false"
|
||||
/>
|
||||
<TutorialShowModal
|
||||
:is-open="tutorialShowModal"
|
||||
@close="tutorialShowModal = false"
|
||||
/>
|
||||
<NewFileDialog
|
||||
:is-open="isNewFileDialogOpen"
|
||||
:initial-upload-type="currentUploadType"
|
||||
:base-url="baseUrl"
|
||||
@close="closeDialog"
|
||||
@upload-success="fetchUserData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
|
||||
import TutorialShowModal from '@/components/TutorialShowModal.vue';
|
||||
import NewFileDialog from '@/components/NewFileDialog.vue';
|
||||
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css';
|
||||
import { Pagination } from 'swiper/modules';
|
||||
|
||||
export default {
|
||||
name: 'DashboardPage',
|
||||
components: {
|
||||
CreateMeetingModal,
|
||||
TutorialShowModal,
|
||||
NewFileDialog
|
||||
NewFileDialog,
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modules: [Pagination],
|
||||
showModal: false,
|
||||
tutorialShowModal: false,
|
||||
isNewFileDialogOpen: false,
|
||||
currentUploadType: 'image',
|
||||
baseUrl: 'http://194.62.43.230:8000'
|
||||
}
|
||||
baseUrl: 'http://194.62.43.230:8000',
|
||||
meetings: [
|
||||
{
|
||||
title: 'Pico Control',
|
||||
date: '24 تیر 1403',
|
||||
image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-1.png',
|
||||
},
|
||||
{
|
||||
title: 'Flash Back',
|
||||
date: '24 تیر 1403',
|
||||
image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png',
|
||||
},
|
||||
{
|
||||
title: 'Fakor Sanat Tehran',
|
||||
date: '24 تیر 1403',
|
||||
image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png',
|
||||
},
|
||||
{
|
||||
title: 'Design Artist',
|
||||
date: '24 تیر 1403',
|
||||
image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png',
|
||||
},
|
||||
{
|
||||
title: 'Fakor Sanat Tehran',
|
||||
date: '24 تیر 1403',
|
||||
image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-2.png',
|
||||
},
|
||||
{
|
||||
title: 'Design Artist',
|
||||
date: '24 تیر 1403',
|
||||
image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-3.png',
|
||||
},
|
||||
{
|
||||
title: 'Flash Back',
|
||||
date: '24 تیر 1403',
|
||||
image: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame-23-4.png',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
createNewMeeting(meetingData) {
|
||||
const newMeeting = {
|
||||
id: this.meetings.length + 1,
|
||||
this.meetings.push({
|
||||
title: meetingData.title,
|
||||
date: meetingData.date,
|
||||
image: 'https://via.placeholder.com/150',
|
||||
type: meetingData.type,
|
||||
maxCapacity: meetingData.maxCapacity,
|
||||
};
|
||||
this.meetings.push(newMeeting);
|
||||
});
|
||||
this.showModal = false;
|
||||
},
|
||||
filterMeetings() {
|
||||
console.log('Filtering meetings');
|
||||
},
|
||||
openDialog(type = 'image') {
|
||||
this.currentUploadType = type;
|
||||
this.isNewFileDialogOpen = true;
|
||||
|
|
@ -166,228 +234,80 @@ export default {
|
|||
},
|
||||
fetchUserData() {
|
||||
console.log('Fetching user data');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .dashboard-page {
|
||||
margin-right: 360px;
|
||||
padding: 20px;
|
||||
direction: rtl;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 20px;
|
||||
padding: 35px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
} */
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.left-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
.dashboard {
|
||||
padding: 20px 0px;
|
||||
font-family: 'IRANSansXFaNum-Medium', Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||
font-family: 'IRANSansXFaNum-DemiBold', Helvetica, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #101010;
|
||||
font-size: 19px;
|
||||
line-height: 26.6px;
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||
font-weight: 500;
|
||||
color: #4f5a69;
|
||||
font-size: 14px;
|
||||
line-height: 26.6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tutorial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
|
||||
}
|
||||
|
||||
.tutorial-item {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.create-meeting-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
background-color: #3a57e8;
|
||||
color: white;
|
||||
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.create-meeting-btn img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.btn-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.meetings-section {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.meeting-controls {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.meeting-btn {
|
||||
width: 130px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.meetings-scroll {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.meetings-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.meeting-cards {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.meeting-card {
|
||||
width: 250px;
|
||||
background-color: white;
|
||||
border-radius: 16px;
|
||||
border: 0.5px solid #b8c0cb;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 172px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 8px 16px 16px;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||||
font-weight: 700;
|
||||
color: #444d5a;
|
||||
font-size: 15px;
|
||||
margin: 0 0 14px 0;
|
||||
}
|
||||
|
||||
.meeting-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||
font-weight: 500;
|
||||
color: #7f8da1;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.meeting-date img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
line-height: 18.2px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: 150px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.footer-logo img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.files-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.files-title {
|
||||
font-size: 19px;
|
||||
font-family: 'IRANSansXFaNum-DemiBold', Helvetica, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.file-buttons {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-right: 40px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.white-button {
|
||||
background-color: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||||
color: #101010;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
color: #101010;
|
||||
text-decoration: none;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
|
|
@ -395,4 +315,341 @@ export default {
|
|||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.my-swiper,
|
||||
.last-files-swiper {
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tutorial-grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tutorial-item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.meeting-card {
|
||||
background-color: white;
|
||||
border-radius: 16px;
|
||||
border: 0.5px solid #b8c0cb;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 12px 10px 8px;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
font-family: 'IRANSansXFaNum-DemiBold', Helvetica, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #444d5a;
|
||||
font-size: 14px;
|
||||
margin: 0 0 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.meeting-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #7f8da1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
/* Mobile (max-width: 600px) */
|
||||
@media (max-width: 600px) {
|
||||
|
||||
.white-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.files-title {
|
||||
font-size: 18px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.create-meeting-btn {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.left-section {
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.my-swiper, .last-files-swiper {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right-section,
|
||||
.left-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tutorial-grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.meeting-card {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Tablet (min-width: 600px and max-width: 780px) */
|
||||
@media (min-width: 600px) and (max-width: 780px) {
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.my-swiper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tutorial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tutorial-item {
|
||||
width: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.meetings-section {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.file-buttons {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet (min-width: 780px and max-width: 1024px) */
|
||||
@media (min-width: 780px) and (max-width: 1024px) {
|
||||
.dashboard-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.my-swiper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tutorial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tutorial-item {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.meetings-section {
|
||||
max-width: 96%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 172px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 8px 16px 16px;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.file-buttons {
|
||||
gap: 30px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.white-button {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop (min-width: 1024px and max-width: 1280px) */
|
||||
@media (min-width: 1024px) and (max-width: 1280px) {
|
||||
.dashboard-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.my-swiper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tutorial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tutorial-item {
|
||||
width: 280px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.create-meeting-btn {
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.meetings-section {
|
||||
max-width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 172px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 8px 16px 16px;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.file-buttons {
|
||||
gap: 30px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.white-button {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Desktop (min-width: 1280px) */
|
||||
@media (min-width: 1280px) {
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.my-swiper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tutorial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tutorial-item {
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.create-meeting-btn {
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.meetings-section {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 172px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 8px 16px 16px;
|
||||
}
|
||||
|
||||
.card-content h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.file-buttons {
|
||||
gap: 30px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.white-button {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user