Voyager: Rtl version problems

Created on 28 Apr 2018  路  3Comments  路  Source: the-control-group/voyager

  • Laravel Version: 5.6
  • Voyager Version: 1.1.0
  • PHP Version: 7.2.5
  • Database Driver & Version: mysql

Description:

Hi, i installed voyager and found that in new version the rtl version is included in the main package, but it is not documented anywhere. And after searching in sources i found that i must edit the voyager config file !

Project is good and the way to switch between rtl and ltr, but there is many issues in the rtl version.

  • One important issue for me is that dropdown in the left top doesn't works. it is set to display none and by clicking the icon, property not change.
  • Also i have no idea how to use my own local files to translate the voyager strings.
  • Theme is not responsive, i mean its layout breaks in small window size.
  • some icons do not move to the right of texts in rtl

I can help on improving the rtl version but don't know where to start.
Thanks.

enhancement help wanted

Most helpful comment

For one of problems i mentioned above:

  • One important issue for me is that dropdown in the left top doesn't works. it is set to display none and by clicking the icon, property not change.

I found a small mistake in app.css file:
.navbar-nav.navbar-right li.dropdown.open .dropdown-menu{display:block}
Which must be:
.navbar-nav li.dropdown.open .dropdown-menu{display:block}

But when i change the code in the minified file nothing changes in admin, i mean old app.css file is still loaded.
How i can tell voyager reload the file?
Update
additional styles needed for rtl version:

.voyager .navbar .navbar-nav .dropdown-menu, .voyager .navbar.navbar-default .navbar-nav .dropdown-menu {
    position: absolute !important;
    left: 0;
    right: auto;
}

All 3 comments

Another problem is menu scrollbar is in incorrect position.

RTL is not a documented feature of Voyager. What was merged in was a preliminary implementation and is bound to need more work. You're welcome to open pull requests with fixes to these issues.

For one of problems i mentioned above:

  • One important issue for me is that dropdown in the left top doesn't works. it is set to display none and by clicking the icon, property not change.

I found a small mistake in app.css file:
.navbar-nav.navbar-right li.dropdown.open .dropdown-menu{display:block}
Which must be:
.navbar-nav li.dropdown.open .dropdown-menu{display:block}

But when i change the code in the minified file nothing changes in admin, i mean old app.css file is still loaded.
How i can tell voyager reload the file?
Update
additional styles needed for rtl version:

.voyager .navbar .navbar-nav .dropdown-menu, .voyager .navbar.navbar-default .navbar-nav .dropdown-menu {
    position: absolute !important;
    left: 0;
    right: auto;
}
Was this page helpful?
0 / 5 - 0 ratings