Spaces PopUp Responsive

xroom-dashboard/src/assets/main.css

@@ -46,13 +46,17 @@ a {
 /* sweet alert */
 
 .swal2-popup {
-  right: 1rem !important;
+  right: 0.5rem !important;
-  top: 1rem !important;
+  top: 1.2rem !important;
   display: flex !important;
   align-items: center !important;
   justify-content: right !important;
   width: 95% !important;
   padding-right: 0 !important;
+
+  backdrop-filter: blur(2px) !important;
+  direction: rtl !important;
+  flex-direction: row-reverse !important;
 }
 
 .swal2-title {

xroom-dashboard/src/components/CreateSpaceModal.vue

@@ -305,12 +305,10 @@ export default {
   -ms-overflow-style: none;
 }
 
-
 .modal-content::-webkit-scrollbar {
   display: none;
 }
 
-
 .popUp-header {
   display: flex;
   align-items: center;
@@ -344,8 +342,6 @@ export default {
   align-items: start;
 }
 
-
-
 .popUp-title-object h2 {
   font-size: 20px;
   font-weight: 600;
@@ -391,7 +387,7 @@ export default {
   border: 1px solid #718096;
   border-radius: 8px;
   font-size: 1rem;
-  max-width: 22rem
+  max-width: 22rem;
 }
 
 .form-group textarea {
@@ -413,7 +409,6 @@ export default {
   outline: none;
 }
 
-
 .space-selection {
   display: flex;
   flex-wrap: wrap;
@@ -437,10 +432,9 @@ export default {
   transform: scale(1.05);
 }
 
-/* Add selected class styles */
 .space-card.selected {
   border: 2px solid #3A57E8;
-  box-shadow: 0 4px 8px rgba(58, 87, 232, 0.5); /* Blue border and shadow */
+  box-shadow: 0 4px 8px rgba(58, 87, 232, 0.5);
 }
 
 .space-img {
@@ -452,7 +446,7 @@ export default {
 
 .space-info {
   padding: 10px;
-  text-align: center;
+  text-align: right;
   gap: 1rem;
   display: grid;
 }
@@ -464,7 +458,8 @@ export default {
   margin-top: 5px;
 }
 
-.space-type, .space-capacity {
+.space-type,
+.space-capacity {
   font-size: 14px;
   color: #718096;
 }
@@ -483,10 +478,9 @@ export default {
 .form-actions {
   display: flex;
   justify-content: space-between;
-  padding: 20px 0px; 
+  padding: 20px 5%;
   padding-bottom: 0;
   width: 100%;
-  max-width: 620px;
   margin: auto;
 }
 
@@ -514,4 +508,172 @@ export default {
   font-size: 18px;
 }
 
+/* Responsive Styles */
+
+/* Mobile: max-width 600px */
+@media (max-width: 600px) {
+  .modal-content {
+    max-width: 90%;
+    height: 90vh;
+  }
+
+  .popUp-header {
+    padding: 15px 20px;
+  }
+
+  .popUp-header h2 {
+    font-size: 18px;
+  }
+
+  .popUp-header button svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  .popUp-title {
+    padding: 15px;
+    padding-right: 30px;
+  }
+
+  .popUp-objects {
+    max-width: 90%;
+    padding: 15px;
+  }
+
+  .space-selection {
+    gap: 1rem 10px;
+    justify-content: space-between;
+  }
+
+  .space-card {
+    width: calc(50% - 5px); /* Two cards per row with gap */
+    height: 12rem;
+  }
+
+  .space-info {
+    padding-top: 3px !important;
+    padding: 5px;
+    gap: 10px;
+  }
+
+  .space-name ,
+  .space-type ,
+  .space-capacity{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: clip;
+    width: 80%;
+  }
+
+  .space-img {
+    height: 7rem;
+  }
+
+  .space-name {
+    font-size: 14px;
+  }
+
+  .space-type,
+  .space-capacity {
+    font-size: 12px;
+  }
+
+  .form-group {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .form-group label {
+    width: 100%;
+    margin-bottom: 0.5rem;
+  }
+
+  .form-group input {
+    max-width: 100%;
+  }
+
+  .form-group textarea {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .form-actions {
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  .submit-btn,
+  .cancel-btn {
+    width: 100%;
+    height: 35px;
+    font-size: 15px;
+  }
+
+  .popUp-title-object h2 {
+    font-size: 18px;
+  }
+
+  .popUp-title-object span {
+    font-size: 14px;
+  }
+  
+}
+
+/* Tablet: min-width 600px - max-width 1024px */
+@media (min-width: 600px) and (max-width: 1024px) {
+  .modal-content {
+    max-width: 80%;
+  }
+
+  .popUp-objects {
+    max-width: 90%;
+  }
+
+  .space-card {
+    width: calc(33% - 10px); /* Maintain three cards per row */
+  }
+
+  .form-group input {
+    max-width: 20rem;
+  }
+
+  .form-group textarea {
+    max-width: 20rem;
+  }
+
+
+}
+
+/* Large Tablet / Small Desktop: min-width 1024px - max-width 1280px */
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .modal-content {
+    max-width: 750px;
+  }
+
+  .popUp-objects {
+    max-width: 680px;
+  }
+
+  .space-card {
+    width: calc(33% - 10px); /* Maintain three cards per row */
+  }
+
+
+}
+
+/* Desktop: min-width 1280px */
+@media (min-width: 1280px) {
+  .modal-content {
+    max-width: 700px;
+  }
+
+  .popUp-objects {
+    max-width: 620px;
+  }
+
+  .space-card {
+    width: 31%; /* Original layout */
+  }
+}
 </style>

xroom-dashboard/src/pages/LoginPage.vue

@@ -85,7 +85,7 @@ export default {
           // Show success Toast
           Toast.fire({
             icon: 'success',
-            title: 'ورود با موفقیت انجام شد',
+            title: 'ورود با موفقیت انجام شد.',
           });
 
           this.$router.push('/dashboard');
@@ -93,21 +93,21 @@ export default {
           // Show error Toast with server message
           Toast.fire({
             icon: 'error',
-            title: response.data.message || 'خطا در ورود, لطفا دوباره تلاش کنید',
+            title: response.data.message || 'خطا در ورود, لطفا دوباره تلاش کنید.',
           });
         }
       } catch (error) {
-        let errorMessage = 'خطا در ورود, لطفا دوباره تلاش کنید';
+        let errorMessage = 'خطا در ورود, لطفا دوباره تلاش کنید.';
         if (error.response) {
           if (error.response.status === 401) {
-            errorMessage = '.شماره تماس یا رمز عبور اشتباه است';
+            errorMessage = 'شماره تماس یا رمز عبور اشتباه است.';
           } else if (error.response.status === 400) {
-            errorMessage = '.اطلاعات ورودی نامعتبر است';
+            errorMessage = 'اطلاعات ورودی نامعتبر است.';
           } else {
             errorMessage = error.response.data.message || errorMessage;
           }
         } else if (error.request) {
-          errorMessage = 'مشکل در ارتباط با سرور, لطفا دوباره تلاش کنید';
+          errorMessage = 'مشکل در ارتباط با سرور, لطفا دوباره تلاش کنید.';
         }
 
         // Show error Toast

xroom-dashboard/src/pages/ResetPassword.vue

@@ -103,27 +103,27 @@ export default {
           // Show success Toast
           Toast.fire({
             icon: 'success',
-            title: '.کد تأیید به شماره موبایل شما ارسال شد',
+            title: 'کد تأیید به شماره موبایل شما ارسال شد.',
           });
         } else {
           // Show error Toast with server message
           Toast.fire({
             icon: 'error',
-            title: response.data.message || 'خطا در ارسال کد تأیید, لطفاً دوباره تلاش کنید',
+            title: response.data.message || 'خطا در ارسال کد تأیید, لطفاً دوباره تلاش کنید.',
           });
         }
       } catch (error) {
-        let errorMessage = 'خطا در ارسال کد تأیید, لطفاً دوباره تلاش کنید';
+        let errorMessage = 'خطا در ارسال کد تأیید, لطفاً دوباره تلاش کنید.';
         if (error.response) {
           if (error.response.status === 400) {
-            errorMessage = '.شماره تماس نامعتبر است';
+            errorMessage = 'شماره تماس نامعتبر است.';
           } else if (error.response.status === 404) {
             errorMessage = '.شماره تماس ثبت‌نشده است';
           } else {
             errorMessage = error.response.data.message || errorMessage;
           }
         } else if (error.request) {
-          errorMessage = 'مشکل در ارتباط با سرور, لطفاً دوباره تلاش کنید';
+          errorMessage = 'مشکل در ارتباط با سرور, لطفاً دوباره تلاش کنید.';
         }
 
         // Show error Toast
@@ -160,7 +160,7 @@ export default {
           // Show success Toast
           Toast.fire({
             icon: 'success',
-            title: '.رمز عبور با موفقیت بازنشانی شد',
+            title: 'رمز عبور با موفقیت بازنشانی شد.',
           });
 
           this.$router.push('/');
@@ -168,21 +168,21 @@ export default {
           // Show error Toast with server message
           Toast.fire({
             icon: 'error',
-            title: response.data.message || '.خطا در بازنشانی رمز عبور , لطفاً کد یا رمز عبور را بررسی کنید',
+            title: response.data.message || 'خطا در بازنشانی رمز عبور , لطفاً کد یا رمز عبور را بررسی کنید.',
           });
         }
       } catch (error) {
-        let errorMessage = '.خطا در بازنشانی رمز عبور , لطفاً کد یا رمز عبور را بررسی کنید';
+        let errorMessage = 'خطا در بازنشانی رمز عبور , لطفاً کد یا رمز عبور را بررسی کنید.';
         if (error.response) {
           if (error.response.status === 400) {
-            errorMessage = '.کد تأیید یا رمز عبور نامعتبر است';
+            errorMessage = 'کد تأیید یا رمز عبور نامعتبر است.';
           } else if (error.response.status === 401) {
-            errorMessage = '.کد تأیید اشتباه است';
+            errorMessage = 'کد تأیید اشتباه است.';
           } else {
             errorMessage = error.response.data.message || errorMessage;
           }
         } else if (error.request) {
-          errorMessage = '.مشکل در ارتباط با سرور , لطفاً دوباره تلاش کنید';
+          errorMessage = 'مشکل در ارتباط با سرور , لطفاً دوباره تلاش کنید.';
         }
 
         // Show error Toast

xroom-dashboard/src/pages/SignupPage.vue

@@ -91,7 +91,7 @@ export default {
       if (!this.form.firstName || !this.form.lastName || !this.form.semat || !this.form.mobileNumber || !this.form.password) {
         Toast.fire({
           icon: 'error',
-          title: '.لطفاً تمام فیلدها را پر کنید',
+          title: 'لطفاً تمام فیلدها را پر کنید.',
         });
         return;
       }
@@ -113,7 +113,7 @@ export default {
           // Show success Toast
           Toast.fire({
             icon: 'success',
-            title: '.حساب کاربری با موفقیت ساخته شد',
+            title: 'حساب کاربری با موفقیت ساخته شد.',
           });
 
           this.$router.push('/');
@@ -121,19 +121,19 @@ export default {
           // Show error Toast with server message
           Toast.fire({
             icon: 'error',
-            title: response.data.message || 'خطا در ثبت‌نام, لطفاً دوباره تلاش کنید',
+            title: response.data.message || 'خطا در ثبت‌نام, لطفاً دوباره تلاش کنید.',
           });
         }
       } catch (error) {
-        let errorMessage = 'خطا در ثبت‌نام, لطفاً دوباره تلاش کنید';
+        let errorMessage = 'خطا در ثبت‌نام, لطفاً دوباره تلاش کنید.';
         if (error.response) {
           if (error.response.status === 400) {
-            errorMessage = '.شماره تلفن قبلاً ثبت شده است';
+            errorMessage = 'شماره تلفن قبلاً ثبت شده است.';
           } else {
             errorMessage = error.response.data.message || errorMessage;
           }
         } else if (error.request) {
-          errorMessage = 'مشکل در ارتباط با سرور, لطفاً دوباره تلاش کنید';
+          errorMessage = 'مشکل در ارتباط با سرور, لطفاً دوباره تلاش کنید.';
         }
 
         // Show error Toast

xroom-dashboard/src/pages/SmsVerification.vue

@@ -104,27 +104,27 @@ export default {
           this.codeSent = true;
           Toast.fire({
             icon: 'success',
-            title: '.کد تأیید به شماره موبایل شما ارسال شد',
+            title: 'کد تأیید به شماره موبایل شما ارسال شد.',
           });
           this.startCountdown();
         } else {
           Toast.fire({
             icon: 'error',
-            title: response.data.message || 'خطا در ارسال کد تأیید, لطفاً دوباره تلاش کنید',
+            title: response.data.message || 'خطا در ارسال کد تأیید, لطفاً دوباره تلاش کنید.',
           });
         }
       } catch (error) {
-        let errorMessage = 'خطا در ارسال کد تأیید, لطفاً دوباره تلاش کنید';
+        let errorMessage = 'خطا در ارسال کد تأیید, لطفاً دوباره تلاش کنید.';
         if (error.response) {
           if (error.response.status === 400) {
-            errorMessage = '.درخواست نامعتبر است';
+            errorMessage = 'درخواست نامعتبر است.';
           } else if (error.response.status === 401) {
-            errorMessage = 'توکن نامعتبر است, لطفاً دوباره وارد شوید';
+            errorMessage = 'توکن نامعتبر است, لطفاً دوباره وارد شوید.';
           } else {
             errorMessage = error.response.data.message || errorMessage;
           }
         } else if (error.request) {
-          errorMessage = 'مشکل در ارتباط با سرور, لطفاً دوباره تلاش کنید';
+          errorMessage = 'مشکل در ارتباط با سرور, لطفاً دوباره تلاش کنید.';
         }
         Toast.fire({
           icon: 'error',
@@ -182,27 +182,27 @@ export default {
         if (response.status === 200) {
           Toast.fire({
             icon: 'success',
-            title: '.کد تأیید صحیح است',
+            title: 'کد تأیید صحیح است.',
           });
           this.$router.push('/dashboard');
         } else {
           Toast.fire({
             icon: 'error',
-            title: response.data.message || '.کد تأیید نامعتبر است',
+            title: response.data.message || 'کد تأیید نامعتبر است.',
           });
         }
       } catch (error) {
-        let errorMessage = '.کد تأیید نامعتبر است';
+        let errorMessage = 'کد تأیید نامعتبر است.';
         if (error.response) {
           if (error.response.status === 400) {
-            errorMessage = '.کد تأیید نامعتبر است';
+            errorMessage = 'کد تأیید نامعتبر است.';
           } else if (error.response.status === 401) {
-            errorMessage = 'توکن نامعتبر است, لطفاً دوباره وارد شوید';
+            errorMessage = 'توکن نامعتبر است, لطفاً دوباره وارد شوید.';
           } else {
             errorMessage = error.response.data.message || errorMessage;
           }
         } else if (error.request) {
-          errorMessage = 'مشکل در ارتباط با سرور, لطفاً دوباره تلاش کنید';
+          errorMessage = 'مشکل در ارتباط با سرور, لطفاً دوباره تلاش کنید.';
         }
         Toast.fire({
           icon: 'error',

xroom-dashboard/src/pages/dashboard/files.vue

@@ -53,7 +53,7 @@
       <div class="file-grid">
         <div v-for="section in filteredFileSections" :key="section.type" class="file-section">
           <div class="section-title">{{ section.title }}</div>
-          <div v-if="filteredFiles(section.type).length > 0" style="display: flex; align-items: center; gap: 1.5rem 0.9rem; flex-wrap: wrap;">
+          <div v-if="filteredFiles(section.type).length > 0" style="display: flex;align-items: center;gap: 1.5rem 0.7rem;flex-wrap: wrap;justify-content: flex-start;">
             <div
               class="file-card"
               v-for="(file, index) in filteredFiles(section.type)"
@@ -506,7 +506,7 @@ export default {
 
 .file-manager-layout {
   display: flex;
-  gap: 3rem;
+  gap: 1.5rem;
 }
 
 .file-sidebar {