Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add RTL support to admin modal #525

Merged
merged 1 commit into from
Mar 26, 2024
Merged

feat: Add RTL support to admin modal #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion djangocms_admin_style/sass/components/_content.scss
View file
Open in desktop
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
Open in desktop
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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't that be float: start?

// 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
Open in desktop
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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
float: left;
float: start;

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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
float: left;
float: start;

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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
float: left;
float: start;

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
Loading