From f9daff02d5e44ff5441ad62233bbadec6fef7d47 Mon Sep 17 00:00:00 2001 From: Parsa Nazer Date: Sun, 23 Feb 2025 04:06:44 +0330 Subject: [PATCH] admin rtl styles and bullshit --- backend/core/settings/base.py | 4 +- backend/core/settings/unfold_conf.py | 6 +- backend/core/static/rtl.css | 287 +++++++++++++++++++++++++ backend/core/views.py | 22 +- backend/templates/admin/base_site.html | 5 + backend/templates/admin/index.html | 10 +- backend/templates/formula/service.html | 4 +- 7 files changed, 318 insertions(+), 20 deletions(-) create mode 100644 backend/core/static/rtl.css diff --git a/backend/core/settings/base.py b/backend/core/settings/base.py index 8d4307b..695947c 100644 --- a/backend/core/settings/base.py +++ b/backend/core/settings/base.py @@ -139,12 +139,12 @@ AUTH_PASSWORD_VALIDATORS = [ }, ] -LANGUAGE_CODE = 'en-us' +LANGUAGE_CODE = 'fa' TIME_ZONE = 'UTC' USE_I18N = True - +USE_L10N = True USE_TZ = True diff --git a/backend/core/settings/unfold_conf.py b/backend/core/settings/unfold_conf.py index 0577431..a4ad30f 100644 --- a/backend/core/settings/unfold_conf.py +++ b/backend/core/settings/unfold_conf.py @@ -28,7 +28,9 @@ UNFOLD = { "LOGIN": { "image": lambda request: static("favicon.png"), }, - + "STYLES": [ + lambda request: static("rtl.css"), + ], "BORDER_RADIUS": "20px", "SHOW_HISTORY": True, @@ -80,7 +82,7 @@ UNFOLD = { }, "SIDEBAR": { - "show_search": True, + "show_search": False, "show_all_applications": True, "navigation": [ { diff --git a/backend/core/static/rtl.css b/backend/core/static/rtl.css new file mode 100644 index 0000000..7276f80 --- /dev/null +++ b/backend/core/static/rtl.css @@ -0,0 +1,287 @@ +/* Base RTL adjustments */ +[dir="rtl"] body { + direction: rtl; + text-align: right; +} + +/* Headers and titles */ +[dir="rtl"] .header, +[dir="rtl"] h1, +[dir="rtl"] h2, +[dir="rtl"] h3, +[dir="rtl"] .branding h1 { + text-align: right; +} + +/* Float adjustments */ +[dir="rtl"] .float-left { + float: right !important; +} +[dir="rtl"] .float-right { + float: left !important; +} + +/* Margins and paddings */ +[dir="rtl"] .margin-left-10 { + margin-right: 10px !important; + margin-left: 0 !important; +} +[dir="rtl"] .margin-right-10 { + margin-left: 10px !important; + margin-right: 0 !important; +} +[dir="rtl"] .padding-left-15 { + padding-right: 15px !important; + padding-left: 0 !important; +} +[dir="rtl"] .padding-right-15 { + padding-left: 15px !important; + padding-right: 0 !important; +} + +/* Form elements */ +[dir="rtl"] .aligned label { + padding: 0 0 3px 1em; + float: right !important; + text-align: right; +} +[dir="rtl"] .form-row { + direction: rtl; +} +[dir="rtl"] .form-row .field-box { + float: right; + margin-right: 0; + margin-left: 10px; +} +[dir="rtl"] input, +[dir="rtl"] select, +[dir="rtl"] textarea { + direction: rtl; +} + +/* Buttons and submit row */ +[dir="rtl"] .submit-row { + text-align: left; +} +[dir="rtl"] .submit-row input, +[dir="rtl"] .button { + margin-left: 0; + margin-right: 10px; +} + +/* Inline groups (e.g., tabular or stacked inlines) */ +[dir="rtl"] .inline-group { + direction: rtl; +} +[dir="rtl"] .inline-related h3 { + text-align: right; +} +[dir="rtl"] .inline-related .inline_label { + float: right; + padding-right: 0; + padding-left: 10px; +} + +/* Tables */ +[dir="rtl"] table { + direction: rtl; +} +[dir="rtl"] th, +[dir="rtl"] td { + text-align: right; +} +[dir="rtl"] .sortoptions { + float: left; +} + +/* Navigation and sidebar (Unfold-specific) */ +[dir="rtl"] .unfold-sidebar { + right: unset; + left: 0; +} +[dir="rtl"] .unfold-main { + margin-left: 0; + margin-right: 260px; /* Adjust based on sidebar width */ +} +[dir="rtl"] .unfold-nav { + direction: rtl; + text-align: right; +} +[dir="rtl"] .unfold-nav li { + text-align: right; +} +[dir="rtl"] .unfold-nav .dropdown-menu { + right: unset; + left: 0; +} + +/* Breadcrumbs */ +[dir="rtl"] .breadcrumbs { + direction: rtl; + text-align: right; +} +[dir="rtl"] .breadcrumbs a { + margin-right: 0; + margin-left: 5px; +} + +/* Filters (right sidebar) */ +[dir="rtl"] #changelist-filter { + float: left; + text-align: right; +} +[dir="rtl"] #changelist-filter h3 { + text-align: right; +} +[dir="rtl"] #changelist-filter li { + padding-right: 0; + padding-left: 10px; +} + +/* Miscellaneous */ +[dir="rtl"] .object-tools { + float: left; +} +[dir="rtl"] .paginator { + direction: rtl; + text-align: left; +} + +/* Enhanced RTL adjustments for Unfold navigation links (specific to navbar) */ +[dir="rtl"] .unfold-nav a { + direction: rtl; + justify-content: flex-end; /* Align flex items to the right */ +} + +[dir="rtl"] .unfold-nav .flex { + flex-direction: row-reverse !important; /* Reverse the order of flex items (icon, text, badge) for RTL */ +} + +[dir="rtl"] .unfold-nav .material-symbols-outlined { + margin-right: 0 !important; /* Remove default right margin */ + margin-left: 0.75rem !important; /* Equivalent to Tailwind’s mr-3 in RTL (12px or 0.75rem) */ + order: 2 !important; /* Place icon after text in flex direction */ +} + +[dir="rtl"] .unfold-nav .text-sm { + margin-right: 0.5rem !important; /* Space between text and badge (equivalent to Tailwind ml-2 in RTL) */ + text-align: right; + direction: rtl; + order: 1 !important; /* Place text before badge in flex direction */ +} + +[dir="rtl"] .unfold-nav .bg-red-600 { + margin-left: 0 !important; /* Remove default left margin */ + margin-right: 0 !important; /* No margin needed on right unless spacing is required */ + order: 0 !important; /* Place badge first in flex direction (on the right in RTL) */ +} + +/* Ensure text alignment and direction for Persian */ +[dir="rtl"] .unfold-nav .text-sm { + text-align: right; + direction: rtl; +} + +/* RTL adjustments for navbar headers and expandable sections (including arrow icon) */ +[dir="rtl"] .unfold-nav h2 { + direction: rtl; + text-align: right; +} + +[dir="rtl"] .unfold-nav .flex-row { + flex-direction: row-reverse !important; /* Reverse flex direction for headers */ +} + +[dir="rtl"] .unfold-nav .material-symbols-outlined.ml-auto { + margin-left: 0 !important; /* Remove default left margin (Tailwind ml-auto) */ + margin-right: auto !important; /* Push to the right in RTL */ + transform: rotate(180deg) !important; /* Flip chevron_right for RTL (pointing left) */ + order: 999 !important; /* Ensure it’s the last item in the flex order, on the right */ +} + +/* RTL adjustments for search bar and other navbar elements */ +[dir="rtl"] #nav-filter { + direction: rtl; + text-align: right; +} + +[dir="rtl"] .unfold-nav input[type="search"] { + padding-right: 0.75rem !important; /* Adjust padding for RTL */ + padding-left: 2rem !important; /* Space for the search icon on the left */ +} + +[dir="rtl"] .unfold-nav .material-symbols-outlined.pl-3 { + padding-left: 0 !important; /* Remove padding-left */ + padding-right: 0.75rem !important; /* Add padding-right for RTL */ +} + +[dir="rtl"] .mr-3 { + margin-left: .75rem !important; + margin-right: 0 !important; +} + +/* badge fix */ + +[dir="rtl"] .bg-red-600 { + margin-left: 0rem !important; + margin-right: .5rem !important; +} + +/* colapse fix */ +[dir="rtl"] .ml-auto { + margin-left: 0rem !important; + margin-right: 8rem !important; + +} + + + +[dir="rtl"] .absolute.bottom-0.left-0.rounded.top-0 { + left: auto; + right: 0; +} + + +/* log out fix */ + +[dir="rtl"] nav.absolute.bg-white.border.flex.flex-col.leading-none.py-1.-right-2.rounded.shadow-lg.top-7.w-52.z-50.dark\:bg-base-800.dark\:border-base-700 { + right: auto; /* Remove -right-2 effect */ + left: 0; /* Anchor to right edge (left in RTL) */ +} + + +/* filter sprator fix */ + +[dir="rtl"] ul.dark\:bg-base-900.border.border-base-200.flex.min-w-20.rounded.shadow-sm.text-font-default-light.dark\:border-base-700.dark\:text-font-default-dark.w-full li { + border-right: none; + border-left: 1px solid #404040; /* Matches border-base-200 */ +} + +[dir="rtl"] ul.dark\:bg-base-900.border.border-base-200.flex.min-w-20.rounded.shadow-sm.text-font-default-light.dark\:border-base-700.dark\:text-font-default-dark.w-full li:last-child { + border-left: 0; +} + +/* Dark mode override */ +[dir="rtl"] .dark ul.dark\:bg-base-900.border.border-base-200.flex.min-w-20.rounded.shadow-sm.text-font-default-light.dark\:border-base-700.dark\:text-font-default-dark.w-full li { + border-left: 1px solid #374151; /* Matches dark:border-base-700 */ +} + + + + +/* import export sprator fix */ + +/* Desktop RTL: Swap right borders to left borders */ +[dir="rtl"] ul.border.flex.flex-col.font-medium.mb-4.mt-2.rounded.shadow-sm.md\:flex-row.md\:mb-2.md\:mt-0.dark\:border-base-700.max-md\:w-full li.md\:border-r { + border-right: none; /* Remove md:border-r */ + border-left: 1px solid #404040; /* Add left border, matching border-base-200 default */ +} + +[dir="rtl"] ul.border.flex.flex-col.font-medium.mb-4.mt-2.rounded.shadow-sm.md\:flex-row.md\:mb-2.md\:mt-0.dark\:border-base-700.max-md\:w-full li:last-child { + border-left: 0; /* No left border on last item */ +} + +/* Dark mode for desktop RTL */ +[dir="rtl"] .dark ul.border.flex.flex-col.font-medium.mb-4.mt-2.rounded.shadow-sm.md\:flex-row.md\:mb-2.md\:mt-0.dark\:border-base-700.max-md\:w-full li.md\:border-r { + border-left: 1px solid #374151; /* Matches dark:border-base-700 */ +} \ No newline at end of file diff --git a/backend/core/views.py b/backend/core/views.py index ee1b6d0..6dbeb76 100644 --- a/backend/core/views.py +++ b/backend/core/views.py @@ -51,10 +51,10 @@ def random_data(): ], "kpi": [ { - "title": "IPhone 16 Pro Max", + "title": "گوشی Iphone 16 pro", "metric": f"${intcomma(f"{random.uniform(1000, 9999):.02f}")}", "footer": mark_safe( - f'+{intcomma(f"{random.uniform(1, 9):.02f}")}% progress from last week' + f'+{intcomma(f"{random.uniform(1, 9):.02f}")}% درصد فروش کل' ), "chart": json.dumps( { @@ -64,23 +64,23 @@ def random_data(): ), }, { - "title": "Macbook Pro M3", + "title": "لپ تاپ Macbook Pro M3", "metric": f"${intcomma(f"{random.uniform(1000, 9999):.02f}")}", "footer": mark_safe( - f'+{intcomma(f"{random.uniform(1, 9):.02f}")}% progress from last week' + f'+{intcomma(f"{random.uniform(1, 9):.02f}")}% درصد فروش کل' ), }, { - "title": "Apple Watch 8", + "title": "ساعت هوشمند Apple Watch 8", "metric": f"${intcomma(f"{random.uniform(1000, 9999):.02f}")}", "footer": mark_safe( - f'+{intcomma(f"{random.uniform(1, 9):.02f}")}% progress from last week' + f'+{intcomma(f"{random.uniform(1, 9):.02f}")}% درصد فروش کل' ), }, ], "progress": [ { - "title": "📱 Phone and Mobile", + "title": "📱 موبایل و گوشی", "description": "$2,499.99", "value": 20, }, @@ -155,10 +155,10 @@ def random_data(): ), "performance": [ { - "title": _("Last week revenue"), + "title": 'فروش ماه اخیر', "metric": "$1,234.56", "footer": mark_safe( - '+3.14% progress from last week' + '+3.14% درصد فروش کل' ), "chart": json.dumps( { @@ -173,10 +173,10 @@ def random_data(): ), }, { - "title": _("Last week expenses"), + "title": 'مخارج ماه اخیر', "metric": "$1,234.56", "footer": mark_safe( - '+3.14% progress from last week' + '+3.14% درصد فروش کل' ), "chart": json.dumps( { diff --git a/backend/templates/admin/base_site.html b/backend/templates/admin/base_site.html index 9f2851d..bab7144 100644 --- a/backend/templates/admin/base_site.html +++ b/backend/templates/admin/base_site.html @@ -1,6 +1,11 @@ {% extends "admin/base.html" %} {% load static %} +{% block html_attrs %} + lang="fa" dir="rtl" +{% endblock %} + + {% block extrastyle %}{{ block.super }} {% endblock %} diff --git a/backend/templates/admin/index.html b/backend/templates/admin/index.html index b17f7af..5920b9d 100644 --- a/backend/templates/admin/index.html +++ b/backend/templates/admin/index.html @@ -5,6 +5,10 @@ {% endblock %} {% load i18n unfold %} +{% block html_attrs %} + lang="fa" dir="rtl" +{% endblock %} + {% block breadcrumbs %}{% endblock %} {% block title %} @@ -30,7 +34,7 @@
{% for stats in kpi %} - {% component "unfold/components/card.html" with class="lg:w-1/3" label=_("Last 7 days") footer=stats.footer %} + {% component "unfold/components/card.html" with class="lg:w-1/3" footer=stats.footer %} {% component "unfold/components/text.html" %} {{ stats.title }} {% endcomponent %} @@ -44,12 +48,12 @@ - {% component "unfold/components/card.html" with title=_("Product performance in last 28 days") %} + {% component "unfold/components/card.html" with title='بازدید های وبسایت در ماه اخیر' %} {% component "unfold/components/chart/bar.html" with data=chart height=320 %}{% endcomponent %} {% endcomponent %}
- {% component "unfold/components/card.html" with class="lg:w-1/2" title=_("The most trending products in last 2 weeks") %} + {% component "unfold/components/card.html" with class="lg:w-1/2" title='محبوب ترین دسته بندی ها' %} {% component "unfold/components/title.html" with class="mb-2" %} $1,234,567.89 {% endcomponent %} diff --git a/backend/templates/formula/service.html b/backend/templates/formula/service.html index 664e402..57856a4 100644 --- a/backend/templates/formula/service.html +++ b/backend/templates/formula/service.html @@ -12,7 +12,7 @@
{% component "unfold/components/flex.html" with class="flex-col gap-4 lg:flex-row" %} - {% component "unfold/components/button.html" with href="/admin/order/ordermodel/" %} + {% component "unfold/components/button.html" with href="/secret-admin/order/ordermodel/" %} نمایش سفارشات {% endcomponent %} {% endcomponent %} @@ -33,7 +33,7 @@
{% component "unfold/components/flex.html" with class="flex-col gap-4 lg:flex-row" %} - {% component "unfold/components/button.html" with href="/admin/ticket/ticket/" %} + {% component "unfold/components/button.html" with href="/secret-admin/ticket/ticket/" %} نمایش تیکت ها {% endcomponent %} {% endcomponent %}