Demo not responsive on mobile

[jadjoubran]

After @Bodom78's PR, we still have these issues:

• Show menu icon not aligned properly.
• Restructure brings back the content jump issue when animating from page to page.
• Content/Pages needs to be made consistant and working in the responsive layout (Use Cards?, Max Width so content not too wide on larger screens, 100% after breakpoint for smaller screens) .

[Bodom78]

I've been tweaking/restructuring locally in what little spare time I have to try and improve the layout so it can be responsive with minimal markup/styles workarounds. Will keep you posted.

Notes:
Material components work well to form app layouts but when you wrap them in elements like a div used to inject the ui-view into they break the components default flow . Better to add ui-view directives onto the components directly.

Should use md-cards for the "Page" area content, will allow graying backround color if preferred. Constrain to max width and transform to 100% on breakpoint.

Small issues to resolve:

[jadjoubran]

Oh okay, noted!

Thanks a lot!
If you have this in your own fork maybe I can contribute to that as well
Cheers!

[Bodom78]

Sure, help is appreciated. Here you can find my forked branch:
https://github.com/Bodom78/laravel5-angular-material-starter/tree/responsive-restructure

The branch has a restructured layout, is responsive and the sidenav hide/show is present.

Some issues off the top of my head that are currently present:

• Show menu icon not aligned properly.
• Restructure brings back the content jump issue when animating from page to page.
• Content/Pages needs to be made consistant and working in the responsive layout (Use Cards?, Max Width so content not too wide on larger screens, 100% after breakpoint for smaller screens) .

[jadjoubran]

Wow that's great, thanks!

But those are weird errors indeed

I'll take a look again at error number 2 and 3.

But regarding the menu icon I don't think we have a solution other than a margin-top no?

[Bodom78]

Yep, just some margin tweaking would do the trick as it's a fixed size. Had hoped to get more done but work always gets in the way.

[jadjoubran]

No worries man, it's actually great that you're helping.
I'm working on a fix right now

[jadjoubran]

@Bodom78 Can you add me as a contributor to your fork? so push my code fixes - I should've forked but I guess it's too late

[jadjoubran]

You know what.. I just realized that I introduced lots of new issues...
even some of the issues (like the sidebar shows twice) when you first open the page.
Not sure if we need to start over or maybe change the layout completely..

[Bodom78]

I've added you as a contributor.

Hopefully I can look into the layout today/tomorrow, we don't seem to have these issues on the project I'm working on in the office.

The fade between page transitions, is that something that was added and not part of angular material?

I might strip all the css and work from there. I figure we should require minimal styling since the starter pretty much follows a generic material layout (but that's usually never the case).

[Bodom78]

I think I've sorted the jumping issue, for the sidenav at least, just need to apply it when I get some time.

Originally we had:
<element ui-view="...">[Injected Material Component]</element>
Which caused issues with how material components flowed.

Currently I have:
<material component ui-view="...">[Injected Content]</material component>
Which causes the ugly jump shift caused by the animating in effect (disabling animations fixes the issue but also removes the cool slide in/out effect in the menu)

What should work is:
<material component><element ui-view="...">[Injected Content]</element></material component>
because the material components are still at the root level, they will layout nicely and the content can fade in without effecting them.

[jadjoubran]

oh okay that's cool!
Thanks again for your contribution

[Bodom78]

Hey @jadjoubran, No problem.

Please check out the latest commit on the fork and let me know your thoughts when you have a chance:

• Responsive working for the most part (See below).
• Aligned menu icon.
• Jumping issues fixed for material components and page when transitioning in/out.
• Content pages updated to use md-cards, they are pretty consistant in structure now.
• Removed redundant CSS that was no longer required.

Only remaining issue that I could not sort out is making the Prisim code highlighting blocks scale down with the cards for smaller screens. The should scroll the overflow content but I just couldnt get it to work. Let me know if you have any ideas on this.

[jadjoubran]

@Bodom78 Hats off!
I can't tell you how excited I am to have this on the master branch. Seriously great job and thanks again!
I honestly don't see the issue with the Prism code.. because when someone clones this repository, 90% of the time they don't really care about Prism, they just need to remove it (I want to add this to the Docs so that people don't keep Prism when they don't need it)..
What do you think? I mean it's also readable on mobile