Stacks should have flexible width if enough space

[stefan-niedermann]

Currently each stack has a fixed width. This is a bad use of the given space.
If you have only one stack, 80% of your screen is unused while you have little space to view your cards.
If you have many stacks, you have to scroll vertical, which is an unnatural gesture and causes some layout issues (e. g. a dragged card has another position on the screen than the mouse).

Proposal: The stacks should stretch to maximum width when possible (this means, one stack: 100% width, two stacks: 50% width, ...) of course, when you have very much stacks (and "much" is depending on the screen width), each stack should have a minimum width, so they do not get too small.

[juliusknorr]

Makes sense to me. I think that is a good starter issue using css flexbox for implementation.

[stefan-niedermann]

Only one question left: where to display the input field and submit button for new stacks, if the present stacks consume all the horizontal space? maybe a plus button in the top right corner of the most right stack?

[juliusknorr]

@stefan-niedermann The add stack input has been moved to the top with #95

[x9t9]

I Believe that only putting display:flex on #innerBoard and maybe .stack with width:100% would already achieve that . It would potentially create other problems ( like stack delete/edit icons, which IMHO are misplaced ) , but should work for this specific issue .

On the same note : I believe all the CSS should go flex now, which will also allow for support on mobile ( for display mainly , not editing )

[artemanufrij]

@x9t9 and min-width: XXpx;

[juliusknorr]

@x9t9 It would be great if you could open a pull request. We can figure out smaller issues during the review process.

On the same note : I believe all the CSS should go flex now, which will also allow for support on mobile ( for display mainly , not editing )

👍 For moving to flex. The code here was mostly written before I discovered that it exists. 😉

[pixelipo]

+1 for flex, but just FYI, now there is Aldo grid:
https://www.mozilla.org/en-US/developer/css-grid/

[x9t9]

@pixelipo - Right ,Honestly I never worked with grid, mainly because comparing http://caniuse.com#search=flex and http://caniuse.com#search=css-grid reveals some support issues for now .

But the way I see it , they are not challenging , but more completing each other. grid is more about the big picture layout where flex has advantages on the positioning of children elements . Which means that one can start with the more-supported flex, and later add grid if needed .

[juliusknorr]

Closing as discussed in #199

I'm not sure if the dynamic sizing proposed in #82 of stacks makes much sense. I don't see much value, since it does only depend on the number of stacks not the browser width