Mobile view about angular2gridster HOT 8 CLOSED

Would be cool having something like

let options = {
    lanes: 12,
    direction: 'horizontal',
    responsiveOptions: [{
        maxWindowWidth: 600,
        direction: 'vertical',
        lanes: 1
    },{
        maxWindowWidth: 900
        lanes: 6
    }]
}

So each responsive option overrides the global option depends on current window width.

export interface IGridsterOptions {
   .....
   maxWindowWidth?: number;
   responsiveOptions?: Array<IGridsterOptions >;
}

from angular2gridster.

I really like this idea. 🥇 There is big chance that it will be implemented this way.
The only thing probably I will change is to use mobile first approach, something lile:

let options = {
    lanes: 1,
    direction: 'vertical',
    responsiveOptions: [{
        minWidth: 600,
        direction: 'horizontal',
        lanes: 3
    },{
        minWidth: 900
        lanes: 12
    }]
}

I really appreciate your suggestions and I'm open for more.. :-)

from angular2gridster.

Hi,
First of all, @swiety85 thanks for angular2gridster, very cool.
I'm using it for a project where the responsive part is critical.
I started working on it using the public methods of gridList but I need a more permanent solution.
I'll be starting with that idea of GridsterOptions but I would like to know how would you do the item reorganisation.
I'll start to make it ordered like packery demo:
packery demo

from angular2gridster.

Hey @swiety85
Do you have any idea when you would be able to implement it?

from angular2gridster.

@vascocc If your implementation would work good I could merge it to main repository if you don't mind.
Items reorganisation is really hard question. Packery could be somehow a good idea but I would not make it as default solution and not tightly couple with angular2gridster. I would prefer to have it as a second step solution.
As a first approach I would just "break line" on each place where widget does not fit to available space.

from angular2gridster.

@dipcore I can say only roughly that till the end of June, but I will try to do it faster.
It also depends on @vascocc - if he will be faster than me and we will be able to agree upon his implementation..

from angular2gridster.

Hey @swiety85, feel free to check my solution and merge it if it's cool for the project. I have a pending commit, on my demo page, the Horizontal direction is not working properly.

I used the configuration example you and @dipcore talked about but I had to go a little bit overboard for my project.
If you use the configurations like:

gridsterOptions: IGridsterOptions = {
    lanes: 1,
    direction: 'vertical',
    resizable: true,
    dragAndDrop: true,
    maxHeight: 3,
    responsiveOptions: [
      {
        minWindowWidth: 0,    //Default options values
        lanes: 1,
        maxWidth: 1
      },
      {
        minWindowWidth: 300,
        lanes: 2,
        maxWidth: 2
      },
      {
        minWindowWidth: 900,
        lanes: 4,
        maxWidth: 4
      },
      {
        minWindowWidth: 1200,
        lanes: 8,
        maxWidth: 8
      }]
  };

You'll have the normal responsive behaviour and the items will reorganise by themselves with the existent code.

For my project, I needed that the 8 lane view had some memory of the items' positions. So I had some parameters to GridListItem, the original parameters, and an option to IGridsterOptions called mainView. This way I can move the items in the main view (in the main view I save the new positions when there are changes made to the item), switch between the responsive layouts and when I get to the main view again, I have the items in the same position.

Feel free to suggest a better approach.

from angular2gridster.

Done in v.0.6.0

from angular2gridster.