mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-04-16 12:35:54 +00:00
feat: add RTL support for subscription page
- Implemented a function to detect RTL languages and updated the Vue component to apply the appropriate class based on the language. - Enhanced the subscription page styles to support RTL layout, ensuring proper text alignment and direction for Arabic and Persian languages.
This commit is contained in:
parent
169b216d7e
commit
b634027525
2 changed files with 28 additions and 1 deletions
|
|
@ -49,6 +49,11 @@
|
||||||
window.location.href = url;
|
window.location.href = url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isRtlLanguage(lang) {
|
||||||
|
if (!lang) return false;
|
||||||
|
return ['fa', 'ar'].some(prefix => lang.toLowerCase().startsWith(prefix));
|
||||||
|
}
|
||||||
|
|
||||||
function drawQR(value) {
|
function drawQR(value) {
|
||||||
try {
|
try {
|
||||||
new QRious({ element: document.getElementById('qrcode'), value, size: 220 });
|
new QRious({ element: document.getElementById('qrcode'), value, size: 220 });
|
||||||
|
|
@ -113,6 +118,9 @@
|
||||||
if (this._onResize) window.removeEventListener('resize', this._onResize);
|
if (this._onResize) window.removeEventListener('resize', this._onResize);
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
isRtl() {
|
||||||
|
return isRtlLanguage(this.lang || LanguageManager.getLanguage());
|
||||||
|
},
|
||||||
isMobile() {
|
isMobile() {
|
||||||
return this.viewportWidth < 576;
|
return this.viewportWidth < 576;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,24 @@
|
||||||
<script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
|
<script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
|
||||||
<script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
|
<script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
|
||||||
<style>
|
<style>
|
||||||
|
.subscription-page.rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-page.rtl .ant-descriptions-item-label {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-page.rtl .ant-form-item-label > label {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep technical URLs readable regardless of page direction */
|
||||||
|
.subscription-page.rtl .subscription-link-box {
|
||||||
|
direction: ltr;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.subscription-page .subscription-link-box {
|
.subscription-page .subscription-link-box {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
@ -45,7 +63,8 @@
|
||||||
{{ template "page/head_end" .}}
|
{{ template "page/head_end" .}}
|
||||||
|
|
||||||
{{ template "page/body_start" .}}
|
{{ template "page/body_start" .}}
|
||||||
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' subscription-page'">
|
<a-layout id="app" v-cloak :class="[themeSwitcher.currentTheme, 'subscription-page', isRtl ? 'rtl' : 'ltr']"
|
||||||
|
:dir="isRtl ? 'rtl' : 'ltr'">
|
||||||
<a-layout-content class="p-2">
|
<a-layout-content class="p-2">
|
||||||
<a-row type="flex" justify="center" class="mt-2">
|
<a-row type="flex" justify="center" class="mt-2">
|
||||||
<a-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
|
<a-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue