RTL in the Oscar Dashboard

[Paul Walsh]

Hi,

I see there is an arabic translation, yet when I enable arabic in the dashboard, the UI is still LTR.

After recently discovering Oscar, I'm going to build a site in Hebrew and English with it. The Hebrew strings for the dashboard are not a problem, but my question is: 

Has any work been done on RTL in the dashboard? If not, I can start on it iteratively, and hopefully it can be merged back in upstream.  

[Bashar]

I did the Arabic translation, for Arabic templates you need to set it on CSS level where you have two CSS files one to have direction: rtl; and your floats should change from left to right

basically css-ar.css and styles-en.css in my case

--
https://github.com/tangentlabs/django-oscar
http://django-oscar.readthedocs.org/en/latest/
https://twitter.com/django_oscar
---
You received this message because you are subscribed to the Google Groups "django-oscar" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-oscar...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-oscar.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/66eaa65f-a78e-433d-bf28-01b67d75f7af%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Paul Walsh]

Hi Bashar,

Good stuff. Yes, doing the necessary adjustments with floats and alignments etc is fine, I've done a lot of UI work to support both RTL and LTR. 

I thought it would be good that there would be a generic RTL set of styles loaded in Oscar when a BIDI language is activated.

I guess the -ar.css files you refer to are your custom files, as I can't find them in the Oscar code base.

I'd like to be able to have a generic -rtl style sheet in the core, that is loaded for the dashboard (at least) when a BIDI language is active - that would support the current Arabic translation "out of the box", as well as future Hebrew and Persian translations.

Did you write your custom -ar files in LESS? If so, would you be interested in sharing them as a starting point for a generic RTL file for the Oscar dashboard?

[Bashar]

Hello Paul,

On Sun, Mar 2, 2014 at 10:42 AM, Paul Walsh <pauly...@gmail.com> wrote:

Hi Bashar,

Good stuff. Yes, doing the necessary adjustments with floats and alignments etc is fine, I've done a lot of UI work to support both RTL and LTR. 

I thought it would be good that there would be a generic RTL set of styles loaded in Oscar when a BIDI language is activated.

Sure thing , I'll try to generic my set and share them to be base of any BIDI language to start with

I guess the -ar.css files you refer to are your custom files, as I can't find them in the Oscar code base.

Yes its custom files, basically in the html style line i have style-{% LANGUAGE_CODE %}.css to load the styles-en.css or styles-ar.css

I'd like to be able to have a generic -rtl style sheet in the core, that is loaded for the dashboard (at least) when a BIDI language is active - that would support the current Arabic translation "out of the box", as well as future Hebrew and Persian translations.

will get to that very soon and possibly ask for help how to submit my first ever pull request to real project :)
 

Did you write your custom -ar files in LESS? If so, would you be interested in sharing them as a starting point for a generic RTL file for the Oscar dashboard?

I'll ask my Front-end developer (he is on sick leave today) and let you know tomorrow or so.

Best Regards,
--

Bashar
 

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/84a9bb02-fdfe-4834-bf08-0ef198a19677%40googlegroups.com.

[Bashar]

a quick question comes into my mind, does the translation on Transifex includes both frontend and Dashboard? because i just noticed that we are doing the frontend not the dashboard! my bad

[Paul Walsh]

I think it includes the frontend and the dashboard together.

I’ll be doing both in Hebrew, but because my fronted will diverge from the default significantly anyway, I’m definitely mostly concerned at the moment with getting RTL support in the dashboard working as a community effort.

Best,

Paul.

You received this message because you are subscribed to a topic in the Google Groups "django-oscar" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-oscar/rKwQGXuf5MU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-oscar...@googlegroups.com.

Visit this group at http://groups.google.com/group/django-oscar.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/CABLKof9SWwBk71LBcnayZBbGsMV6UihE3J04pKhCH4rvfB8oaQ%40mail.gmail.com.

[Bashar]

i'm releasing both the css and templates as opensource anyway once my project is launched, maybe after updating it to bootstrap/oscar recent version as i started working back in the days of oscar

i'll confirm tomorrow with my front-end developer and let you know

Best,

Bashar

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/CEC8EF22-E17F-4495-BF49-8F6B8D6713C7%40gmail.com.

[Paul Walsh]

Thanks. I’ll also update you once I start coding the project, and we can co-ordinate on RTL issues.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/CABLKof_czD3ztRjq__my%3D9taeoxvH6uW3-WMwTz09103%2BLyazg%40mail.gmail.com.

[Jonathan Moss]

Hi All,

Just thought I would chip in an add a couple of things as we are also working on an RTL site. We have already made changes to the dashboard to support this in our project.

We used the LANGUAGE_BIDI as a trigger instead of language code as we thought it a little more generic.

So for example:

{% if LANGUAGE_BIDI %}
    <link rel="stylesheet" type="text/css" href="{% static 'a_project/css/dashboard-rtl.css' %}" />
{% endif %}

The dashboard-rtl.css basically contains all the normal classes etc. but reverses their meaning. e.g. pull-left is now defined as actually pulling to the right. So no real changes to the templates were needed.

I believe we also ended up adding a body tag attribute to allow Javascript things like tinymce to determine if it should be using the RTL mode.

So far this only applies to the dashboard but I suspect a similar approach would work with the site as a whole and could be baked into Oscar without too much trouble.

Regards,
Jon

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/69CBDD37-DD23-4AC9-BC29-D1E0F5A86C97%40gmail.com.

For more options, visit https://groups.google.com/groups/opt_out.

-- 
Jonathan Moss
Director

Tangent Snowball Australia Pty
Suite 109
175 Sturt Street
Melbourne, VIC 3006
ABN: 76 137 883 615

T:    +61 (0) 3 9645 8796
M:    +61 (0) 4 1525 1208
E:    jonath...@tangentsnowball.com.au

[Paul Walsh]

Hi Johnathan,

That is great to hear. Are you able to release your rtl css/less for others to use, or, to possibly prepare a pull request for an RTL Dashboard for BIDI languages?

It would certainly save me some work if you’ve already got an RTL implementation of the dashboard.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/53142615.6060808%40tangentsnowball.com.au.

[asi...@gmail.com]

Please don't limit it to the dashboard only.

I would like to see RTL support for the site as well.

BTW: there is a tool to switch LTR css to RTL so this shouldn't be done by hand.

[Paul Walsh]

I’ve not come across a case yet where auto-generated LTR > RTL does all the work. There is always manual work involved.

Nothing should be limited to dashboard only, it is just that the dashboard is higher priority for me, if I do this work.

 

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/2f5f8223-e5d3-4787-9e8b-c772f0e75d98%40googlegroups.com.

[Bashar]

Dear Jon,

Reason that we dropped using LANGUAGE_BIDI in favor of LANGUAGE_CODE (we used to use the if statement for LANGUAGE_BIDI in the past project even before the days of oscar) is that using LANGUAGE_CODE is universal for N number of languages in case you require multiple CSS files per language for example for font specific or any other language specific variables (not just LTR / RTL) for in the case of LANGUAGE_CODE we can uave style-en -ar -fr -jp etc..)

that would give more freedom for the user to have less lines of code in templates and just increase number of css files depending on how many languages you want to support.

Best Regards,

Bashar

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/53142615.6060808%40tangentsnowball.com.au.

[Bashar]

There are many tools to switch but its not 100% accurate and manual work is always needed to be perfect especially when it comes to images that need to be mirrored, as you know its not only float and align need to be flipped, padding and margins too sometimes need to be tackled

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/2f5f8223-e5d3-4787-9e8b-c772f0e75d98%40googlegroups.com.

[Paul Walsh]

In multi-lingual projects, I always do this:

base.css

base-rtl.css  # the essential RTL overrides

base-{LANG}.css # language specific overrides, due to differing string lengths, etc.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/CABLKof_%2BnhZ7COs7D9f_gQKcF4iG3-s6_z-5%2BcVY2%3D-OfCN9fQ%40mail.gmail.com.

[Bashar]

overrides creates more files loaded/classes which aren't really needed. I also used to do this in the last having two or more css lines in my templates but when i started to optimize and minify css/js i started to follow the style i mentioned earlier :)

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/A6CC20A7-C4F9-4D25-863D-96CAF128A919%40gmail.com.

[Paul Walsh]

yes, but it depends on the use case. 

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/CABLKof-9kO7LLBZV7WFdYbERO%3DonveHPtuUHi91mrN0%2BrifZxQ%40mail.gmail.com.

[Paul Walsh]

I'm starting work on this now.

Bashar and Jonathan - are either of you/both of you able to open source/make available your current work on RTL in Oscar so that I can build on it?

Can anyone from the core Oscar team verify whether you would accept a pull request to merge RTL changes as discussed in this thread, into the core?

[Jonathan Moss]

Hi Paul,

Apologies for the slow response. I have the site and dashboard RTL css
now in a gist, along with a how we activate/deactivate it.

https://gist.github.com/a-musing-moose/9522032

So basically the RTL css is always included but only takes effect with
class on the body tag. Actually it seems we use a body id which I think
is a bit weird but I think it is because the body class in extended
templates to not call super on the body class block. But I could be wrong.

It not a necessary a complete solution but hopefully it will help get
you there.

Regards,
Jon

> --
> https://github.com/tangentlabs/django-oscar
> http://django-oscar.readthedocs.org/en/latest/
> https://twitter.com/django_oscar
> ---
> You received this message because you are subscribed to the Google
> Groups "django-oscar" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to django-oscar...@googlegroups.com

> <mailto:django-oscar...@googlegroups.com>.

> Visit this group at http://groups.google.com/group/django-oscar.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/django-oscar/56c7336a-3648-44fb-bcde-5836bb3b21b0%40googlegroups.com
> <https://groups.google.com/d/msgid/django-oscar/56c7336a-3648-44fb-bcde-5836bb3b21b0%40googlegroups.com?utm_medium=email&utm_source=footer>.
> For more options, visit https://groups.google.com/d/optout.

[Bashar]

sure, dashboard and front-end?

I'll cross check with my colleagues when I reach office what's do NE so far and upload it on my repo

for you and your review

Best Regards,
Bashar

Sent on the go via Gmail mobile

--

https://github.com/tangentlabs/django-oscar
http://django-oscar.readthedocs.org/en/latest/
https://twitter.com/django_oscar
---
You received this message because you are subscribed to the Google Groups "django-oscar" group.

To unsubscribe from this group and stop receiving emails from it, send an email to django-oscar...@googlegroups.com.

Visit this group at http://groups.google.com/group/django-oscar.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/56c7336a-3648-44fb-bcde-5836bb3b21b0%40googlegroups.com.

[Paul Walsh]

dashboard and front end, yes, but I’ll be focussing on the dashboard and we’ll see about the frontend, depending on whether I base the site design on the default ui or if I do my own.

You received this message because you are subscribed to a topic in the Google Groups "django-oscar" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-oscar/rKwQGXuf5MU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-oscar...@googlegroups.com.

Visit this group at http://groups.google.com/group/django-oscar.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/CABLKof8JtYmAbmGmFqMf4omi21YYY583XhE6UUo8KqTJOugL9g%40mail.gmail.com.

[David Winterbottom]

Can anyone from the core Oscar team verify whether you would accept a pull request to merge RTL changes as discussed in this thread, into the core?

Yes, that sounds suitable for core so should get merged

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/EEC6651C-D91B-4AA0-B03D-7E6DE8D4200F%40gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

David Winterbottom
Technical Director

Tangent Labs
84-86 Great Portland Street
London W1W 7NR
England, UK

[Paul Walsh]

Thanks David. 

To view this discussion on the web visit https://groups.google.com/d/msgid/django-oscar/CAA0jhkrEc1LfA-2mbNcgnodYA3csKencE0WQBiaXB1TyViagEQ%40mail.gmail.com.