From 87c43e948e9bbde93c212377dc866785d9ddec82 Mon Sep 17 00:00:00 2001 From: Mohammad Alsakhawy Date: Mon, 18 Mar 2024 11:09:28 +0200 Subject: [PATCH] feat: add RTL support to admin modal --- .../sass/components/_content.scss | 8 ++- .../sass/components/_forms.scss | 31 ++++++++- .../sass/components/_modal.scss | 65 +++++++++++++------ 3 files changed, 81 insertions(+), 23 deletions(-) diff --git a/djangocms_admin_style/sass/components/_content.scss b/djangocms_admin_style/sass/components/_content.scss index 3c575634..fd3375c4 100644 --- a/djangocms_admin_style/sass/components/_content.scss +++ b/djangocms_admin_style/sass/components/_content.scss @@ -815,7 +815,13 @@ a.addlink { // attributes field .attributes-pair .field-box { margin-bottom: 10px; + + .delete-attributes-pair { + // override admin-style + margin-left: 0px !important; + margin-inline-start: 16px !important; + } } .attributes-pair .field-box:first-child { - padding-right: 15px; + padding-inline-end: 15px; } diff --git a/djangocms_admin_style/sass/components/_forms.scss b/djangocms_admin_style/sass/components/_forms.scss index 38c55ba4..32b72397 100644 --- a/djangocms_admin_style/sass/components/_forms.scss +++ b/djangocms_admin_style/sass/components/_forms.scss @@ -277,6 +277,9 @@ form { color: $color-primary; } } + .fieldBox { + margin-inline-end: 20px !important; // override admin-style rtl + } } label select { display: block; @@ -305,7 +308,12 @@ form { float: left !important; // FABR: ! Important conflicts with unfilled buttons color: $white; // !important; - padding: 6px 12px !important; + padding-block: 6px !important; + padding-inline: 12px !important; + + [dir=rtl] & { + float: right !important; + } } &.btn-default, &.btn-link { @@ -317,7 +325,18 @@ form { } label.aligned + div.readonly { width: 160px; - margin-left: 170px; + margin-inline-start: 170px; + } + .aligned { + // overriding admin style rtl.css + // to match the style of djangocms-admin-style + div.help { + margin-right: 0px !important; + } + .form-row input[type="text"] { + margin-right: 0px !important; + margin-left: 0px !important; + } } // input input, @@ -346,7 +365,7 @@ form { width: auto !important; height: auto; min-height: unset; - margin-right: 10px; + margin-inline-end: 10px !important; // override admin-style rtl padding: 0 !important; border: 0 !important; } @@ -372,6 +391,12 @@ form { background-size: 25px !important; appearance: none; + + [dir=rtl] & { + // The png has a left padding of 30px. Its width is reduced from 60px to 25px + // so the right possition should start from 12.5px (30*25/60) + background-position: 12.5px center !important; + } } select[multiple] { height: auto !important; diff --git a/djangocms_admin_style/sass/components/_modal.scss b/djangocms_admin_style/sass/components/_modal.scss index afc68cb5..6b80dbe4 100644 --- a/djangocms_admin_style/sass/components/_modal.scss +++ b/djangocms_admin_style/sass/components/_modal.scss @@ -23,7 +23,7 @@ .cms_modal-window { #container .breadcrumbs + .messagelist + #content, #container .breadcrumbs + #content { - margin-left: 20px !important; + margin-inline-start: 20px !important; } &.app-aldryn_bootstrap3 .filerFile .filerClearer { // make sure that file clear button has the correct size #140 @@ -41,9 +41,9 @@ } // resets checkbox row margin and padding in modal window because of wrapping border #188 .checkbox-row { - margin-left: -20px; - margin-right: -20px; - padding-left: 20px !important; + margin-inline-start: -20px; + margin-inline-end: -20px; + padding-inline-start: 20px !important; } } // resets background color and shadow which is needed in admin for very long names @@ -66,12 +66,17 @@ float: left; width: 100%; .results { - margin-right: 0 !important; + margin-inline-end: 0 !important; } #result_list tbody th, #result_list tbody td { height: auto; } + + [dir=rtl] & { + // inline-start & inline-end are not widely supported + float: right; + } } } &.cms-pagetree-root { @@ -98,7 +103,7 @@ } // resets table styles in modal window #189 table { - margin-left: 0; + margin-inline-start: 0; box-shadow: none !important; td > select { width: auto !important; @@ -122,15 +127,17 @@ } #content, &.filebrowser #content { - margin: 20px 20px 0 !important; + margin-block: 20px 0 !important; + margin-inline: 20px !important; } #content .submit-row { - margin: 20px -20px 0 !important; + margin-block: 20px 0 !important; + margin-inline: -20px !important; padding: 20px 20px !important; } .form-row { - padding-left: 0; - padding-right: 0; + padding-inline-start: 0; + padding-inline-end: 0; .btn-group-context label { margin-top: 0 !important; margin-bottom: 5px; @@ -143,7 +150,12 @@ float: left; margin-top: 0; &.field-registration_deadline_at { - margin-right: 0 !important; + margin-inline-end: 0 !important; + } + + [dir=rtl] & { + // inline-start & inline-end are not widely supported + float: right; } } } @@ -151,7 +163,8 @@ .bootstrap3-column { .form-row { overflow: hidden; - padding: 14px 0 10px; + padding-block: 14px 10px; + padding-inline: 0px; border-bottom: solid 1px $gray-lighter; &.field-create { input { @@ -161,6 +174,11 @@ display: inline-block; float: left; width: 160px !important; + + [dir=rtl] & { + // inline-start & inline-end are not widely supported + float: right; + } } } .fieldBox { @@ -168,6 +186,11 @@ display: inline-block; float: left; width: 70px !important; + + [dir=rtl] & { + // inline-start & inline-end are not widely supported + float: right; + } } input { width: auto !important; @@ -196,7 +219,7 @@ #container .breadcrumbs + .messagelist + #content, #container .breadcrumbs + #content { // make sure that margin is same as on modal window - margin-left: 20px !important; + margin-inline-start: 20px !important; } .colM { box-shadow: none; @@ -212,18 +235,22 @@ padding: 0 !important; } ul { - margin: 10px -20px 0; + margin-block: 10px 0; + margin-inline: -20px; li { - padding: 10px 0 10px 20px; + padding-block: 10px; + padding-inline: 20px 0; } ul { - margin: 10px 0 -10px -20px; + margin-block: 10px -10px; + margin-inline: -20px 0; li { - padding: 10px 0 10px 20px; + padding-block: 10px; + padding-inline: 20px 0; } ul { - margin-left: 0; - margin-right: 0; + margin-inline-start: 0; + margin-inline-end: 0; } } }