Amber: Add responsive design to default views

[faustinoaq]

Description

I think we should support responsive design for small screens :point_down:

Steps to Reproduce

Not applicable (feature request)

Versions

Master https://github.com/amberframework/amber/commit/bea1063f640e0c7466989fd50cd0453b812d7a39

Additional Information

We need to tweak css media queries a bit as well :sweat_smile:

[faraazahmad]

I'd love to take this up!

[faraazahmad]

@faustinoaq should i hold off until #746 is closed? also, to test it, should i uninstall amber then install from the branch I'm working on?

[faustinoaq]

@faraazahmad I think #746 will be merged very soon :+1: so, go ahead :100:

I think you can work over @ChangJoo-Park branch (https://github.com/ChangJoo-Park/amber/tree/bootstrap-4) so when that PR is merged you don't need to update your files again, because git diff will do all the work.

To test it You don't need to uninstall amber at all, just compile it locally in your cloned working fork repo and use shards build amber and bin/amber to test it.

By example right now, I have amber v0.7.2 installed in my pc, and I'm working in a bunch of new features for amber, so I do this:

git clone [email protected]:faustinoaq/amber.git
cd amber
shards install
shards build amber --production # Avoid to compile ameba linter (used only on Travis CI)
cd ..
./amber/bin/amber new forum --deps -d sqlite
cd forum
#rm -rf lib/amber && cp -r ../amber lib/amber  # required if you're working on amber core
../amber/bin/amber watch

Then you can rebuild it and use bin/amber every time you need to test your new changes

[faraazahmad]

Should I also add a .navbar-brand with content as display_name?

[faraazahmad]

Also, is it necessary to keep the upwards pointing arrow on .active:after? because it doesn't really work well on mobile

[faustinoaq]

@faraazahmad Oh, nice suggestions!, no problem, I think you can publish a new PR, with some screen captures, explaining why the new responsive design for welcome page (forms, grids, auth, etc) is better that current one, and what things should be replaced/removed/added :wink:

I think responsive is good, by example, I'm implementing the new error page (based on Phoenix one) and looks pretty responsive: (even in mobile)

[eliasjpr]

This is great @faraazahmad and @faustinoaq

[eliasjpr]

Closing this issue since it was address in https://github.com/ChangJoo-Park/amber/commit/520afc7eeee766241e4793737172e71224505786

[faustinoaq]

@eliasjpr No, this is not solved yet, the @ChangJoo-Park PR was about Bootstrap 4 update, no responsive design was added :sweat_smile:

[faraazahmad]

What else is remaining?

[faustinoaq]

@faraazahmad We still need to fix navbar on small screens (maybe using a menu) and change forms/tables/grids to be responsive :sweat_smile:

Welcome page need some responsive design enhancements as well:

[faustinoaq]

We still need to fix navbar on small screens (maybe using a menu)

I really like DO responsive design on navbar :heart_eyes:

Also Xamarin Website has a nice example:

[faustinoaq]

Wait a second, @eliasjpr @faraazahmad Did #746 handle responsive design?

I thought we gonna include responsive design changes in a new PR, see: https://github.com/amberframework/amber/pull/746#issuecomment-380871659

[faraazahmad]

I did include a navbar toggler in the navbar
https://github.com/ChangJoo-Park/amber/commit/520afc7eeee766241e4793737172e71224505786#diff-27c02ac58eb853fd811dff723dbfc36d

[faustinoaq]

@faraazahmad Oh, nice!, thank you so much!

I guess we need to open a new PR including your changes because I can't see them on master :sweat_smile:

https://github.com/amberframework/amber/blob/ddcb6f26835cc84a67f2d50a074ed17d8dc4d81f/src/amber/cli/templates/app/src/views/layouts/application.ecr.ecr#L14-L16