Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive elements window and sidebar #1519

Merged
merged 19 commits into from
Dec 10, 2018

Conversation

tvdeyen
Copy link
Member

@tvdeyen tvdeyen commented Dec 4, 2018

What is this pull request for?

Make the elements window width dependent from screen width. On large screens this leads to a far wider elements screen and with that better usability. On small screens the elements window is now full width, because editing content is what you usually would do on a phone or tablet in portrait mode. As you are still able to hide the element window and see reveal the preview window this is a good tradeoff on smaller screens.

The left main sidebar is now collapsed on small screens all the time to have more room for managing.

Screenshots

screen shot 2018-12-04 at 21 04 38

screen shot 2018-12-04 at 21 03 47

screen shot 2018-12-04 at 21 00 39

@tvdeyen
Copy link
Member Author

tvdeyen commented Dec 5, 2018

Build errors fixed with #1520

@tvdeyen tvdeyen force-pushed the responsive-elements-window branch from b25cad0 to 4e05527 Compare December 5, 2018 14:40
This is necessary if we want to widen the elements window
Make the elements window wider on larger screens.
You still can toggle the element window to see the preview, but editing content is much more important on small screens then previewing the page.
In order to be able to reach all buttons in the toolbar, they need to be scrollable.
It was never displayed anyway
That way we can click the search icon to expand the search field
We use a weird mix of search field and js_filter field classes.
Reduces the virtual spacing between elements that display: inline-block
@tvdeyen tvdeyen force-pushed the responsive-elements-window branch from 4e05527 to 89593d2 Compare December 10, 2018 15:02
@tvdeyen tvdeyen merged commit 301e300 into AlchemyCMS:master Dec 10, 2018
@tvdeyen tvdeyen deleted the responsive-elements-window branch December 10, 2018 16:41
@tvdeyen tvdeyen added this to the 4.2 milestone Jan 26, 2019
tvdeyen added a commit to tvdeyen/alchemy_cms that referenced this pull request Mar 29, 2019
- Use element name local in generators [AlchemyCMS#1556](AlchemyCMS#1556) ([tvdeyen](https://github.com/tvdeyen))
- Remove invalid bytecode handler [AlchemyCMS#1555](AlchemyCMS#1555) ([tvdeyen](https://github.com/tvdeyen))
- Separate render element calls [AlchemyCMS#1554](AlchemyCMS#1554) ([tvdeyen](https://github.com/tvdeyen))
- Expose the element into partials as local object [AlchemyCMS#1553](AlchemyCMS#1553) ([tvdeyen](https://github.com/tvdeyen))
- Allow admins to switch all languages [AlchemyCMS#1552](AlchemyCMS#1552) ([tvdeyen](https://github.com/tvdeyen))
- Raise targeted Ruby version to 2.3 [AlchemyCMS#1545](AlchemyCMS#1545) ([tvdeyen](https://github.com/tvdeyen))
- Introduces an Elements finder class [AlchemyCMS#1544](AlchemyCMS#1544) ([tvdeyen](https://github.com/tvdeyen))
- Fixate sqlite dep for bug fix [AlchemyCMS#1543](AlchemyCMS#1543) ([tvdeyen](https://github.com/tvdeyen))
- Upgrade shoulda-matchers to version 4.0.0 [AlchemyCMS#1542](AlchemyCMS#1542) ([depfu](https://github.com/apps/depfu))
- Upgrade factory_bot_rails to version 5.0.1 [AlchemyCMS#1540](AlchemyCMS#1540) ([depfu](https://github.com/apps/depfu))
- Use Flatpickr as Datepicker [AlchemyCMS#1533](AlchemyCMS#1533) ([mamhoff](https://github.com/mamhoff))
-  Use system tests over feature specs [AlchemyCMS#1528](AlchemyCMS#1528) ([tvdeyen](https://github.com/tvdeyen))
- Flexible width for admin navigation entry labels [AlchemyCMS#1527](AlchemyCMS#1527) ([tvdeyen](https://github.com/tvdeyen))
- Responsive elements window and sidebar [AlchemyCMS#1519](AlchemyCMS#1519) ([tvdeyen](https://github.com/tvdeyen))
- Change element eye icon on public state [AlchemyCMS#1517](AlchemyCMS#1517) ([oniram88](https://github.com/oniram88))
- Maximize element window if Tinymce is fullscreen [AlchemyCMS#1515](AlchemyCMS#1515) ([tvdeyen](https://github.com/tvdeyen))
- Remove cells in favour of fixed elements [AlchemyCMS#1514](AlchemyCMS#1514) ([tvdeyen](https://github.com/tvdeyen))
- Feature: Autogenerate nestable elements [AlchemyCMS#1513](AlchemyCMS#1513) ([tvdeyen](https://github.com/tvdeyen))
- Allow "data" key for module navigations [AlchemyCMS#1512](AlchemyCMS#1512) ([mamhoff](https://github.com/mamhoff))
- Allow to define layout for page previews [AlchemyCMS#1500](AlchemyCMS#1500) ([westonganger](https://github.com/westonganger))
- Fix capitalization for login/logout/leave [AlchemyCMS#1497](AlchemyCMS#1497) ([westonganger](https://github.com/westonganger))
- Verify controller keys within `register_module` [AlchemyCMS#1495](AlchemyCMS#1495) ([westonganger](https://github.com/westonganger))
- Update bundled Tinymce to 4.8.3 [AlchemyCMS#1491](AlchemyCMS#1491) ([tvdeyen](https://github.com/tvdeyen))
- Use dynamic attributes in factories [AlchemyCMS#1484](AlchemyCMS#1484) ([tvdeyen](https://github.com/tvdeyen))
- Migrating to active_model_serializers ~> 0.10.0 [AlchemyCMS#1478](AlchemyCMS#1478) ([pmashchak](https://github.com/pmashchak))
- Replace picture galleries with nestable elements [AlchemyCMS#1358](AlchemyCMS#1358) ([tvdeyen](https://github.com/tvdeyen))
- Add a compact nested element style [AlchemyCMS#1357](AlchemyCMS#1357) by [tvdeyen](https://github.com/tvdeyen)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant