geex-arts / django-jet

Modern responsive template for the Django admin interface with improved functionality. We are proud to announce completely new Jet. Please check out Live Demo
https://github.com/jet-admin/jet-bridge
GNU Affero General Public License v3.0
3.58k stars 775 forks source link

RTL support #150

Open mhipo1364 opened 7 years ago

mhipo1364 commented 7 years ago

Hi guys, many thanks for this awesome package

I need to have this package in RTL mode, has this option?

SalahAdDin commented 7 years ago

Needs work.

amiraliakbari commented 7 years ago

Apparently, if active language is rtl, dir="rtl" is added to html element and admin/css/rtl.css file is loaded.

I am using this CSS (sass) to fix the most important layout problems in rtl mode:

/* Dashboard */
// Captions & Model names
.module
  caption
    text-align: right

  tr[class^="model-"]
    th
      text-align: right

#recent-actions-module
  h2
    text-align: right

/* Objects List Page */
// breadcrumbs separator icon
.breadcrumbs
  .breadcrumbs-separator.icon-arrow-right::before
    content: "\e60a"

// Tables
thead th,
tfoot td
  text-align: right

  &:first-child
    border-radius: 0 4px 0 0

  &:last-child
    border-radius: 4px 0 0 0

  &:first-child:last-child
    border-radius: 4px 4px 0 0

// Results Table
.results
  tbody
    th
      text-align: right

/* Change Object Page */
.changeform-navigation
  // next button should be on left (because logical flow is rtl), but
  // this needs to change the order of child a elements.
  // This is a hack for it:
  direction: ltr

.aligned
  label
    float: right

.submit-row
  p.deletelink-box
    float: left
SalahAdDin commented 7 years ago

Good work!

ghost commented 7 years ago

where i should put this code ? i am confused i'm not perfect in django and i need help about rtl for farsi language ! can any body help me ?

SalahAdDin commented 7 years ago

These code have to be in style files, not inside django project.

ghost commented 7 years ago

yes i put it in admin/css/rtl.css but nothing happend! i don't know what should i do :(

Ismael-VC commented 7 years ago

@mrillusion please check out these file:

This is what I would do. Basically you have to clone django-jet, checkout the dev branch, install JS dependencies with npm, make you changes to the css, rebuild static files bundle with gulp, clear your browser cache and reload, after that you should see the change.

If it works as intended then you can make a PR.

Ismael-VC commented 7 years ago

Also, since you are creating a new file, you should add it too to the gulp build chain, so it goes into the bundle. Im no css expert, but that is what I would do according to CONTRIBUTING.md and what I have understood so far.

Ismael-VC commented 7 years ago

Please come to the django-jet Discord server so we can organize if you like:

Welcome! 😄

amirasaran commented 6 years ago

I make rtl.css file and it works very well but some bugs in JS popups like time picker Take a look https://gist.github.com/amirasaran/0bfd8d33b0ed1a1ad9c0b850f1c6c17d

mhipo1364 commented 6 years ago

@amirasaran , thanks, works like a charm

SalahAdDin commented 6 years ago

@amirasaran can you make a PR?