mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-02 00:04:35 +00:00
Spaces PopUp Responsive
This commit is contained in:
Diyar Akhgar
parent
dfcc5cb94c
commit
bfa8dd0b72
|
|
@ -46,13 +46,17 @@ a {
|
|||
/* sweet alert */
|
||||
|
||||
.swal2-popup {
|
||||
right: 1rem !important;
|
||||
top: 1rem !important;
|
||||
right: 0.5rem !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 {
|
||||
|
|
|
|||
|
|
@ -305,22 +305,20 @@ export default {
|
|||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
|
||||
.modal-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.popUp-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #101010;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 20px 26px;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #101010;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 20px 26px;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
}
|
||||
|
||||
.popUp-header h2 {
|
||||
|
|
@ -328,46 +326,44 @@ export default {
|
|||
}
|
||||
|
||||
.popUp-header button {
|
||||
background-color: #101010;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: #101010;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popUp-title {
|
||||
padding: 20px;
|
||||
padding-right: 50px;
|
||||
padding: 20px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.popUp-title-object {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.popUp-title-object h2{
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
.popUp-title-object h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.popUp-title-object span {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #4F5A69;
|
||||
margin-top: 1rem;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #4F5A69;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.popUp-objects {
|
||||
margin-top: 0rem !important;
|
||||
padding: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 0rem !important;
|
||||
padding: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
|
@ -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 {
|
||||
|
|
@ -406,14 +402,13 @@ export default {
|
|||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user