Skip to content

Commit

Permalink
feat: add RTL support to admin modal (#525)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sakhawy
sakhawy authored Mar 26, 2024
1 parent 921c7ee commit f1bbc9d
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 23 deletions.
8 changes: 7 additions & 1 deletion djangocms_admin_style/sass/components/_content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
31 changes: 28 additions & 3 deletions djangocms_admin_style/sass/components/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,9 @@ form {
color: $color-primary;
}
}
.fieldBox {
margin-inline-end: 20px !important; // override admin-style rtl
}
}
label select {
display: block;
Expand Down Expand Up @@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down
65 changes: 46 additions & 19 deletions djangocms_admin_style/sass/components/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -143,15 +150,21 @@
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;
}
}
}
// resets column width on bootstrap row plugin #59
.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 {
Expand All @@ -161,13 +174,23 @@
display: inline-block;
float: left;
width: 160px !important;

[dir=rtl] & {
// inline-start & inline-end are not widely supported
float: right;
}
}
}
.fieldBox {
label {
display: inline-block;
float: left;
width: 70px !important;

[dir=rtl] & {
// inline-start & inline-end are not widely supported
float: right;
}
}
input {
width: auto !important;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
}
}
Expand Down

0 comments on commit f1bbc9d

Please sign in to comment.