diff --git a/xroom-dashboard/src/components/TeamUser.vue b/xroom-dashboard/src/components/TeamUser.vue index c8f8f51..50e2eb0 100644 --- a/xroom-dashboard/src/components/TeamUser.vue +++ b/xroom-dashboard/src/components/TeamUser.vue @@ -339,7 +339,7 @@ export default { this.$emit('change-tab', 'buy-subscription'); }, handleResize() { - this.isMobile = window.innerWidth <= 1024; + this.isMobile = window.innerWidth <= 1280; }, }, mounted() { @@ -726,8 +726,112 @@ export default { } } -/* Desktop Styles (min-width: 1024px) */ -@media (min-width: 1025px) { +/* LapTop Styles (min-width: 1025px and max-width: 1280px) */ +@media (min-width: 1025px) and (max-width: 1280px) { + + .swiper-add-user { + display : block; + } + + .user-card { + width: 100%; + height: auto; + } + + .add-card { + width: 100%; + height: 100px; + display: flex; + } + + .license-card { + flex-direction: row; + align-items: flex-start; + gap: 10px; + } + + .user-info-box { + flex-direction: column; + align-items: flex-end; + } + + .user-activity { + padding-left: 0; + } + + .user-avatar { + margin-top: 0; + width: 50px; + height: 80px; + object-fit: cover; + } + + .user-name { + font-size: 14px; + font-size: 16px; + font-weight: 700; + color: #101010; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: clip; + width: 90px; + } + + .user-email { + font-size: 12px; + } + + .user-role { + font-size: 15px; + } + + .user-footer span { + font-size: 14px; + font-weight: 500; + } + + .user-info-tags, .user-activity { + gap: 1rem; + } + + .user-actions svg { + width: 18px !important; + height: 18px !important; + } + + .user-version , .user-role{ + font-size: 14px; + font-weight: 500; + text-overflow: ellipsis; + overflow-x: clip; + white-space: nowrap; + width: 80px; + } + + .license-card span { + font-size: 14px; + } + + .buy-subscription { + font-size : 14px; + gap : 6px; + } + + .buy-subscription svg { + + height: 18px; + width: 18px; + + } + + .add-text { + font-size: 18px; + } +} + + +/* Desktop Styles (min-width: 1280px) */ +@media (min-width: 1280px) { .user-cards-grid { display: flex; flex-wrap: wrap; diff --git a/xroom-dashboard/src/pages/dashboard/Meeting.vue b/xroom-dashboard/src/pages/dashboard/Meeting.vue index bcfc9e4..e189db5 100644 --- a/xroom-dashboard/src/pages/dashboard/Meeting.vue +++ b/xroom-dashboard/src/pages/dashboard/Meeting.vue @@ -69,8 +69,8 @@
- Meeting Image -
+ Meeting Image +

{{ meeting.title }}

@@ -131,7 +131,7 @@ :key="filteredMeetings.length + activeFilter + JSON.stringify(filteredMeetings)" :slides-per-view="1.4" :space-between="10" - :loop="true" + :freeMode="true" :pagination="{ clickable: true }" :breakpoints="{ 768: { slidesPerView: 3.3, spaceBetween: 15 }, @@ -142,8 +142,8 @@ class="swiper-meetings-list" > - Meeting Image -

+ Meeting Image +

{{ meeting.title }}

@@ -230,7 +230,7 @@ import CreateMeetingModal from '@/components/CreateMeetingModal.vue'; import MeetingInfoModal from '@/components/MeetingInfoModal.vue'; import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/css'; -import { Pagination } from 'swiper/modules'; +import { FreeMode, Pagination } from 'swiper/modules'; import axios from 'axios'; const API_BASE_URL = 'http://my.xroomapp.com:8000'; @@ -250,7 +250,7 @@ export default { showModal: false, showInfoModal: false, selectedMeeting: null, - modules: [Pagination], + modules: [FreeMode, Pagination], meetings: [], filteredMeetings: [], }; @@ -566,6 +566,7 @@ export default { width: 100%; display: flex; align-items: center; + justify-content: space-between; border: 1px solid #b8c0cb; border-radius: 12px; text-align: right; @@ -708,6 +709,7 @@ export default { width: 100%; display: flex; align-items: center; + justify-content: space-between; border: 1px solid #b8c0cb; border-radius: 12px; padding: 4px; @@ -944,11 +946,11 @@ export default { .meet-title{ - width: 150px !important; + width: 115px !important; } .meet-type span { - width : 120px !important; + width : 75px !important; } .info-button { @@ -970,6 +972,7 @@ export default { width: 100%; display: flex; align-items: center; + justify-content: space-between; border: 1px solid #b8c0cb; border-radius: 12px; padding: 4px; @@ -998,6 +1001,8 @@ export default { } .search-section { + display: flex; + flex-direction: column; max-width: 85%; width: 100%; margin-left: 1.5rem; @@ -1043,16 +1048,13 @@ export default { } .meeting-item { - padding: 8px; + padding: 4px; } - .meeting-details { - width: 60% !important; - } .meet-title { font-size: 17px; - width : 200px; + width : 140px; } .meet-capacity, diff --git a/xroom-dashboard/src/pages/dashboard/files.vue b/xroom-dashboard/src/pages/dashboard/files.vue index d20b4b3..2335d5e 100644 --- a/xroom-dashboard/src/pages/dashboard/files.vue +++ b/xroom-dashboard/src/pages/dashboard/files.vue @@ -678,7 +678,7 @@ export default { height: 22px; } -@media (max-width: 1023px) { +@media (min-width: 1024px) and (max-width: 1280px) { .swiper-file-section { display: flex; flex-direction: column; @@ -724,7 +724,7 @@ export default { } } -@media (min-width: 1024px) { +/* @media (min-width: 1024px) { .file-manager-layout { flex-direction: row; } @@ -785,7 +785,7 @@ export default { .filter-btn { font-size: 1.125rem; } -} +} */ @media (min-width: 1280px) { .section-title {