Skip to content

New update to sidebar toggle styling#5141

Closed
cyrez wants to merge 97 commits intojoomla:stagingfrom
cyrez:patch-6
Closed

New update to sidebar toggle styling#5141
cyrez wants to merge 97 commits intojoomla:stagingfrom
cyrez:patch-6

Conversation

@cyrez
Copy link
Copy Markdown
Contributor

@cyrez cyrez commented Nov 19, 2014

Update to UI/UX and language file naming conventions.

This is an improvement proposed to the collapsible sidebar introduced since 3.3.7-dev by @roland-d.
It is based on UI proposal by @dbhurley : #4450
And on ideas from many contributors! 👍

In this PR, a sliding effect is added to the sidebar to improve UX, and UI was changed to a column styling.
The sidebar is LTR/RTL ready and is displayed on screen with a min-width of 768px.
Screens under 767px wide use the sidebar as it is already displayed in 3.3.6.
Future improvement with mobile devices could be proposed in another PR.

Intructions for testing :

  • tests on all browsers are welcome
  • test to be done in LTR and RTL
  • tests with third party extensions are needed

Comments and tips are welcomed!

Cyril

j-toggle-sidebar-2

@yanivRozenman
Copy link
Copy Markdown

@test: Tested successfully.
tested on all browsers
tested LTR and RTL



This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5141.

New minified core.js for Travis to succeed
@cyrez
Copy link
Copy Markdown
Contributor Author

cyrez commented Nov 19, 2014

Thank you @yanivRozenman
Could you revert and patch again ?
I've just changed compression of core.js for Travis to succeed. ;-)

@yanivRozenman
Copy link
Copy Markdown

@JoomliC
seem to be ok after repatching :)

@dgrammatiko
Copy link
Copy Markdown
Contributor

@test succesful. 👍 for the fade in effect on the icons!
UPD: Latest Safari, Chrome, FF, Opera on OSX

@peterlose
Copy link
Copy Markdown
Contributor

In my test I'm experiencing inline scroll in the sidebar:
skaermbillede 2014-11-19 kl 21 36 16

And could there perhaps be added some more padding around the dropdown's?

Great work btw :)

@peterlose
Copy link
Copy Markdown
Contributor

In the screenshot from #4450 you had a gradient background, did you remove that again?

@roland-d
Copy link
Copy Markdown
Contributor

@JoomliC Well done !! I have tested this on Windows + FF + Chrome + IE and works as expected. I agree with @losedk the gradient would be nice to have and some padding around the dropdowns will make them look better.

@cyrez
Copy link
Copy Markdown
Contributor Author

cyrez commented Nov 19, 2014

@losedk i've updated to fix your issue. Could you test again if you don't have again the inline scroll (not needed in fact...)

@losedk and @roland-d i have added back the same gradient as for the toolbar background. Thanks for your feedback about it, i was not sure it was best to have the gradient or not. ;-)

@peterlose
Copy link
Copy Markdown
Contributor

@JoomliC Cool! But the filters could still use some padding :)

@cyrez
Copy link
Copy Markdown
Contributor Author

cyrez commented Nov 29, 2014

After a discussion with @nternetinspired @phproberto @Bakual, i have updated the PR to use only css transition, with better performance.
Only IE8 is not css transition compatible, but it's not an issue, IE8 can do without transitions.

@DGT41 So, as we have requested before, it's not a problem if no transition on ie8 as far as we can use the sidebar without issue. ;-)

@infograf768 No changes for com_localise ;-)

@nternetinspired I've tried to use http://getbootstrap.com/2.3.2/javascript.html#collapse. But it was really a headache to make it working as expected due to where the sidebar layout is loaded. I'm afraid we could have B/C issue with third party extensions (if toggle button is loaded in submenu layout) or not sure it could be good to load the button in the template index.php or elsewhere...
In fact, this could be a future improvement, with most time to check UX, and speak about it! (i will re-install my Skype to speak about a few ideas with @phproberto too ;-) )

Yes, it's better to add a class to the element as a hook for css, e.g. div id="j-toggle-button-wrapper" class="j-toggle-button-wrapper" so that your css can target .j-toggle-button-wrapper instead.
This keeps specificity low in the cascade. An ID selector in CSS is a trump, overruling element and class selectors, which ultimately leads to stylesheet bloat and angry front-enders :) ."

Done!
Note: the only way I saw about how to have a class .j-sidebar-container for div #j-sidebar-container (view) was to add class with js, and remove span2... is it correct ?

And nice week-end to all!
Cyril

@infograf768
Copy link
Copy Markdown
Member

works fine here...

@dgrammatiko
Copy link
Copy Markdown
Contributor

@test again on OS X FF chrome safari opera Success
Win IE8 (virtual box) Success
👍

@roland-d
Copy link
Copy Markdown
Contributor

@test Works as expected here.

Since this is already RTC, I think we can really move this forward now.

This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5141.

@nternetinspired
Copy link
Copy Markdown
Contributor

@JoomliC Thanks for moving transition effects to css and for using class selectors. This is really a huge improvement I think. 🙇

…In fact, this could be a future improvement, with most time to check UX, and speak about it! (i will re-install my Skype to speak about a few ideas with @phproberto too ;-) )

Yes, let's look at this for a future PR. No need to further delay this one, given that it is such a big improvement already.

I'd be happy to collaborate with you on any further improvements, if you want. My skype is seths_laptop ;)

@infograf768
Copy link
Copy Markdown
Member

Thanks to all. Merged at last! 👍

@infograf768 infograf768 added this to the Joomla! 3.4.0 milestone Nov 29, 2014
@cyrez
Copy link
Copy Markdown
Contributor Author

cyrez commented Jan 15, 2015

Happy New JYear! to All !!!

@nternetinspired @phproberto @DGT41 I've requested you as contact on Skype (it was the first time i requested someone on this app i've never really used...)
My Skype : cyril_reze

Cyril

@spignataro
Copy link
Copy Markdown
Contributor

One of the biggest things in regards to the sidebar that many are telling me is 2 things:

1: It doesn't scroll with the page when it feels like it should.
2: The small toggler to open doesn't stand out and gets lost on the page. So I am attaching a mock thanks to Kelsey Brookes

imgo

Should I open a issue?

@zero-24 zero-24 removed the RTC This Pull Request is Ready To Commit label Oct 14, 2015
@joomla-cms-bot joomla-cms-bot added the Language Change This is for Translators label Oct 14, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Language Change This is for Translators

Projects

None yet

Development

Successfully merging this pull request may close these issues.