css on mobile could use some refinement about backbone HOT 13 CLOSED

Cool. I'm traveling a lot in July. I'll take a look in August if it's still needing some refinement.

from backbone.

Hah, looks awful :)

True that I never had a chance to check/fix for mobiles, so if you could work on it that would be really useful.

About bootstrap, I specifically wanted to use Angular Material, and I believe we should be able to make it mobile-friendly just by using Angular Material. Adding bootstrap into the mix might pollute the project. My plan was actually to hire a Angular Material designer to help me improve the design for both web & mobiles, but didn't have time to look for one.

In short, I'm not expert on how to solve it, but if you wanna tackle it by using Material, I'd be really happy.

from backbone.

Glad I asked! I'm not an expert on how to solve it either, but I'm always up for learning something new. I'll read up on Angular Material.

I suggested bootstrap because it's commonly used and the grid for mobile is easy to implement. I'm sure there's a bunch of ways to solve this. I'll look into your suggestion and report back.

from backbone.

Sure, please let me know how it goes.

As a general info, Angular Material is mostly set of components:
https://material.angular.io/

And it's based on Material Design, which is much more comprehensive - both come from Google & Android:
https://material.io/design/

Compare to bootstrap, especially Angular Material is much younger, so there are not enough examples out there, but since Google is behind it, I believe it will be widely used in the future.

from backbone.

@coni2k I watched a few youtubes on Angular Material tonight. I like it! Thanks for showing it to me. I'm going to play around with adding it to your pages over the next few days. I'll be back!

from backbone.

Great Noel, let me know how it goes! Meanwhile, I'm trying to upgrade the project to Angular 6.

from backbone.

@coni2k I did some googling and watched some youtubes, and I think angular flex-layout will be the best way to solve these css issues.

Unfortunately, I'm having some issues getting angular flex-layout up and running on the project. From what I'm reading, flex-layout may not play well with Angular 5. It's possible this issue should be picked up once the upgrade to Angular 6 is complete. Unless you can think of a way to solve this issue, I'm kind of out of ideas. Thoughts? Here are screen shots of the errors that I'm seeing:

from backbone.

This is the library that you mention, right?
https://github.com/angular/flex-layout

Didn't use it before, so I should check its dependencies.

If you wish to learn how they work together, you can work on an a new & empty Angular (6+) project. Add both Material and Flex libraries, and if possible create two pages, one with flex and one without flex, add "data table" to both and see how it changes when you use "flex" library. If you can make it to work, put it on a Github repo, so we can see the results together.

Hopefully meanwhile I can finish upgrading to Angular 6.

from backbone.

Yes, that's the library. I'll see what I can do.

from backbone.

I'm going to file this youtube video here, just so that I don't lose track of it. This is the video that made me think it's the start of the solution to the css mobile problem for this project...

https://www.youtube.com/watch?v=d6gJLs3ZZII&t=159s

from backbone.

Yep, just watched it, nice tutorial and it seems it's easy to implement. I'm planning to check Angular 6 upgrade this weekend, if I can make it, I can let you know and you can continue playing on this project.

from backbone.

@thenoelman Yep, finally the project is now Angular 6, for your info

from backbone.

With the latest updates, this item should be okay

from backbone.