[4.0] Improve Menu/Toolbar RTL in atum #21136

wilsonge · 2018-07-15T23:29:58Z

Improves the menu (text is now on the right not left of the menu), and the toolbar (things now render semi-correctly). The table options drop down also now opens correctly below the dropdown

@ciar4n please review me trying to implement CSS - I'm sure its dreadful in more than one way :)

Test by installing the Persian Language Pack

houndci-bot · 2018-07-15T23:30:12Z

administrator/templates/atum/scss/template-rtl.scss

+.ml-auto, .mx-auto {
+  margin-left: 0 !important;
+  margin-right: auto !important;
+}


Files should end with a trailing newline

Try an avoid changing Bootstrap utility classes in the template-rtl.css. Flex is RTL by default so should be no need for this.

Changing the following to flex will make these automatically RTL.. https://github.com/joomla/joomla-cms/blob/4.0-dev/administrator/templates/atum/scss/blocks/_sidebar.scss#L84

houndci-bot · 2018-07-15T23:30:12Z

administrator/templates/atum/scss/template-rtl.scss

+}
+
+.ml-auto, .mx-auto {
+  margin-left: 0 !important;


Properties should be ordered margin-right, margin-left

houndci-bot · 2018-07-15T23:30:12Z

administrator/templates/atum/scss/template-rtl.scss

+}
+
+.js-stools .js-stools-container-filters {
+  left: 0;


Properties should be ordered right, left

infograf768 · 2018-07-16T06:43:32Z

MUCH better!

We also need in template-rtl
.main-nav .fa{margin:0 18px} // same as LTR

to get

instead of
.main-nav .fa{margin:0 12px 0 8px}

houndci-bot · 2018-07-16T08:22:25Z

administrator/templates/atum/scss/template-rtl.scss

+}
+
+.js-stools .js-stools-container-filters {
+  left: 0;


Properties should be ordered right, left

houndci-bot · 2018-07-16T08:22:25Z

administrator/templates/atum/scss/template-rtl.scss

+
+.main-nav {
+  .fa{
+    margin:0 18px


Declaration should be terminated by a semicolon
Colon after property should be followed by at least one space

houndci-bot · 2018-07-16T08:22:25Z

administrator/templates/atum/scss/template-rtl.scss

@@ -226,3 +227,23 @@ th {
    }
  }
 }
+
+.main-nav {
+  .fa{


Opening curly brace { should be preceded by one space

ciar4n · 2018-07-16T08:36:32Z

Delete.. https://github.com/joomla/joomla-cms/blob/4.0-dev/administrator/templates/atum/scss/template-rtl.scss#L45

Not needed and pushing menu out form edge of viewport

ciar4n · 2018-07-16T08:38:42Z

administrator/templates/atum/css/template-rtl.css

@@ -1714,6 +1709,12 @@ th {
  left: 15px;
  content: "\f0d9"; }

+.main-nav li a span {
+  float: right; }


Once you change https://github.com/joomla/joomla-cms/blob/4.0-dev/administrator/templates/atum/scss/blocks/_sidebar.scss#L84 to flex, remove this. Floats are ignored in flex objects.

ciar4n · 2018-07-16T08:40:13Z

https://github.com/joomla/joomla-cms/blob/4.0-dev/administrator/templates/atum/scss/template-rtl.scss#L118

Change to right: 60px for correct position of sub menu

ciar4n · 2018-07-16T08:41:25Z

As mentioned by @infograf768, remove the following... https://github.com/joomla/joomla-cms/blob/4.0-dev/administrator/templates/atum/scss/template-rtl.scss#L111-L113

wilsonge · 2018-07-16T09:39:42Z

Change to right: 60px for correct position of sub menu

Ahh that's the one I was looking for but couldn't find :) Thanks!

I've also simplified down the toolbar a bit more. So with these corrections. Any objections to merging this? It's far from perfect but much better than before :P

houndci-bot · 2018-07-16T09:44:37Z

administrator/templates/atum/scss/template-rtl.scss

  .btn-toolbar > * {
+    margin-left: 0;


Properties should be ordered margin-right, margin-left

ghost · 2018-07-16T09:45:12Z

I have tested this item ✅ successfully on 2f186ae

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/21136.}

houndci-bot · 2018-07-16T09:46:38Z

administrator/templates/atum/scss/template-rtl.scss

+.mr-auto {
+  margin-right: 0 !important;
+  margin-left: auto !important;
+}


Files should end with a trailing newline

wilsonge · 2018-07-16T09:47:55Z

One last bug fix for the top menu 😇

infograf768 · 2018-07-16T11:30:16Z

If you can, let's also correct this

.mr-2, .mx-2 {
    margin-right: .5rem !important;
}

Normally if I understand well scss
it should be in LTR

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important; }
 margin-left: 0;  
}

and in RTL

.mr-2,
.mx-2 {
    margin-right: 0;
    margin-left: .5rem !important;
}

wilsonge · 2018-07-16T11:40:27Z

@infograf768 Which view is this in?

wilsonge · 2018-07-16T11:43:58Z

Don't worry - found it and done

houndci-bot · 2018-07-16T11:44:05Z

administrator/templates/atum/scss/template-rtl.scss

+.mr-2 {
+  margin-left: 0.5rem;
+  margin-right: 0 !important;
+}


Files should end with a trailing newline

houndci-bot · 2018-07-16T11:44:05Z

administrator/templates/atum/scss/template-rtl.scss

+}
+
+.mr-2 {
+  margin-left: 0.5rem;


Properties should be ordered margin-right, margin-left
0.5 should be written without a leading zero as .5

infograf768 · 2018-07-16T13:37:17Z

Articles manager

infograf768 · 2018-07-16T14:53:56Z

I have tested this item ✅ successfully on 04d3851

Good to go for now. Solves a lot of stuff. If we find something missing, we can add issue later.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/21136.}

laoneo · 2018-07-16T14:58:36Z

@franz-wohlkoenig can you also retest please.

ghost · 2018-07-16T15:20:47Z

@laoneo will do in next Minutes.

C-Lodder · 2018-07-16T13:53:41Z

administrator/templates/atum/scss/template-rtl.scss

@@ -160,38 +160,29 @@ th {
 // Toolbar
 .subhead {

-  .btn-group-sm > .btn {
+  .btn, .btn-sm {


You can remove the .btn-sm from here as it's an addition to .btn which is required anyway

ghost · 2018-07-16T15:28:38Z

@infograf768 this for another Issue?

wilsonge · 2018-07-16T15:54:20Z

Yah there's a huge amount more to do here. But let's take it one step at a time :)

infograf768 · 2018-07-17T05:16:30Z

Note: for the cpanel
.flex-grow-1 is missing a text-align: right;
.list-group is also missing text-align: right;

C-Lodder · 2018-07-17T07:32:42Z

Don't add it to flex-grow-1. This class instructs the element to fill available space and will do so regardless of RTL

infograf768 · 2018-07-17T10:29:16Z

Indeed
list-group is enough

wilsonge · 2018-07-17T12:14:05Z

With the merge of #20962 that's not required for now as they've been moved to tables

wilsonge added 2 commits July 15, 2018 21:43

Some more work on RTL in Atum

e92dadc

More work on toolbar

d68d3de

joomla-cms-bot added the PR-4.0-dev label Jul 15, 2018

houndci-bot reviewed Jul 15, 2018

View reviewed changes

houndci-bot reviewed Jul 16, 2018

View reviewed changes

wilsonge added 4 commits July 16, 2018 09:23

Fixes to main menu position

d233066

Fix hound

e5bf3be

Fix hound again

5f14799

Simplify

5c5f9f7

Simpler and better

d9fecf5

ciar4n reviewed Jul 16, 2018

View reviewed changes

wilsonge added 2 commits July 16, 2018 10:33

Fix positioning thanks @ciar4n

a3228a7

Simplify

6a6f3ac

houndci-bot reviewed Jul 16, 2018

View reviewed changes

Improve spacing

2f186ae

houndci-bot reviewed Jul 16, 2018

View reviewed changes

wilsonge added 2 commits July 16, 2018 10:46

Fix positioning of top bar

dbbc951

Fix hound

a37b75f

wilsonge added 3 commits July 16, 2018 10:53

Fix Main Brand image on menu

a00cdbc

Remove wrapper

d356db3

Fix some text fields

a8b4607

Fix dropdowns being not aligned

aeaa4df

Fix mr-2 class

569d438

houndci-bot reviewed Jul 16, 2018

View reviewed changes

wilsonge added 2 commits July 16, 2018 12:45

Fix hound

5f27cbf

Right align text by default

ad9aad3

wilsonge changed the title ~~Improve Menu/Toolbar RTL in atum~~ [4.0] Improve Menu/Toolbar RTL in atum Jul 16, 2018

More text aligning

04d3851

Merge branch '4.0-dev' into feature/rtl-atum

1ef2f58

C-Lodder reviewed Jul 16, 2018

View reviewed changes

wilsonge merged commit 68448c3 into joomla:4.0-dev Jul 16, 2018

wilsonge deleted the feature/rtl-atum branch July 16, 2018 15:54

wilsonge added this to the Joomla 4.0 milestone Jul 16, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4.0] Improve Menu/Toolbar RTL in atum #21136

[4.0] Improve Menu/Toolbar RTL in atum #21136

wilsonge commented Jul 15, 2018 •

edited

houndci-bot Jul 15, 2018

ciar4n Jul 16, 2018

ciar4n Jul 16, 2018

houndci-bot Jul 15, 2018

houndci-bot Jul 15, 2018

infograf768 commented Jul 16, 2018

houndci-bot Jul 16, 2018

houndci-bot Jul 16, 2018

houndci-bot Jul 16, 2018

ciar4n commented Jul 16, 2018

ciar4n Jul 16, 2018

ciar4n commented Jul 16, 2018 •

edited

ciar4n commented Jul 16, 2018

wilsonge commented Jul 16, 2018

houndci-bot Jul 16, 2018

ghost commented Jul 16, 2018

houndci-bot Jul 16, 2018

wilsonge commented Jul 16, 2018

infograf768 commented Jul 16, 2018

wilsonge commented Jul 16, 2018

wilsonge commented Jul 16, 2018

houndci-bot Jul 16, 2018

houndci-bot Jul 16, 2018

infograf768 commented Jul 16, 2018

infograf768 commented Jul 16, 2018

laoneo commented Jul 16, 2018

ghost commented Jul 16, 2018

C-Lodder Jul 16, 2018

ghost commented Jul 16, 2018

wilsonge commented Jul 16, 2018

infograf768 commented Jul 17, 2018 •

edited

C-Lodder commented Jul 17, 2018

infograf768 commented Jul 17, 2018

wilsonge commented Jul 17, 2018

[4.0] Improve Menu/Toolbar RTL in atum #21136

[4.0] Improve Menu/Toolbar RTL in atum #21136

Conversation

wilsonge commented Jul 15, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

infograf768 commented Jul 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ciar4n commented Jul 16, 2018

Choose a reason for hiding this comment

ciar4n commented Jul 16, 2018 • edited

ciar4n commented Jul 16, 2018

wilsonge commented Jul 16, 2018

Choose a reason for hiding this comment

ghost commented Jul 16, 2018

Choose a reason for hiding this comment

wilsonge commented Jul 16, 2018

infograf768 commented Jul 16, 2018

wilsonge commented Jul 16, 2018

wilsonge commented Jul 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

infograf768 commented Jul 16, 2018

infograf768 commented Jul 16, 2018

laoneo commented Jul 16, 2018

ghost commented Jul 16, 2018

Choose a reason for hiding this comment

ghost commented Jul 16, 2018

wilsonge commented Jul 16, 2018

infograf768 commented Jul 17, 2018 • edited

C-Lodder commented Jul 17, 2018

infograf768 commented Jul 17, 2018

wilsonge commented Jul 17, 2018

wilsonge commented Jul 15, 2018 •

edited

ciar4n commented Jul 16, 2018 •

edited

infograf768 commented Jul 17, 2018 •

edited