heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin rtl styles and bullshit

Browse Source
This commit is contained in:
Parsa Nazer
2025-02-23 04:06:44 +03:30
parent 1cb9741f0d
commit f9daff02d5
7 changed files with 318 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/core/settings/base.py
+2 -2
View File
@@ -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
backend/core/settings/unfold_conf.py
+4 -2
View File
@@ -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": [
{
backend/core/static/rtl.css
+287
View File
@@ -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 */
}
backend/core/views.py
+11 -11
View File
@@ -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'<strong class="text-green-700 font-semibold dark:text-green-400">+{intcomma(f"{random.uniform(1, 9):.02f}")}%</strong>&nbsp;progress from last week'
f'<strong class="text-green-700 font-semibold dark:text-green-400">+{intcomma(f"{random.uniform(1, 9):.02f}")}%</strong>&nbsp;درصد فروش کل'
),
"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'<strong class="text-green-700 font-semibold dark:text-green-400">+{intcomma(f"{random.uniform(1, 9):.02f}")}%</strong>&nbsp;progress from last week'
f'<strong class="text-green-700 font-semibold dark:text-green-400">+{intcomma(f"{random.uniform(1, 9):.02f}")}%</strong>&nbsp;درصد فروش کل'
),
},
{
"title": "Apple Watch 8",
"title": "ساعت هوشمند Apple Watch 8",
"metric": f"${intcomma(f"{random.uniform(1000, 9999):.02f}")}",
"footer": mark_safe(
f'<strong class="text-green-700 font-semibold dark:text-green-400">+{intcomma(f"{random.uniform(1, 9):.02f}")}%</strong>&nbsp;progress from last week'
f'<strong class="text-green-700 font-semibold dark:text-green-400">+{intcomma(f"{random.uniform(1, 9):.02f}")}%</strong>&nbsp;درصد فروش کل'
),
},
],
"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(
'<strong class="text-green-600 font-medium">+3.14%</strong>&nbsp;progress from last week'
'<strong class="text-green-600 font-medium">+3.14%</strong>&nbsp;درصد فروش کل'
),
"chart": json.dumps(
{
@@ -173,10 +173,10 @@ def random_data():
),
},
{
"title": _("Last week expenses"),
"title": 'مخارج ماه اخیر',
"metric": "$1,234.56",
"footer": mark_safe(
'<strong class="text-green-600 font-medium">+3.14%</strong>&nbsp;progress from last week'
'<strong class="text-green-600 font-medium">+3.14%</strong>&nbsp;درصد فروش کل'
),
"chart": json.dumps(
{
backend/templates/admin/base_site.html
+5
View File
@@ -1,6 +1,11 @@
{% extends "admin/base.html" %}
{% load static %}
{% block html_attrs %}
lang="fa" dir="rtl"
{% endblock %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static 'override.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'fonts.css' %}" />
{% endblock %}
backend/templates/admin/index.html
+7 -3
View File
@@ -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 @@
<div class="flex flex-col gap-8 lg:flex-row">
{% 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 %}
<div class="flex flex-col gap-8 lg:flex-row">
{% 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 %}
backend/templates/formula/service.html
+2 -2
View File
@@ -12,7 +12,7 @@
<div class="flex lg:flex-row lg:items-center">
{% 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 @@
<div class="flex lg:flex-row lg:items-center">
{% 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 %}