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 @@
@@ -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"
>
@@ -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 {
-
+
{{ meeting.title }}