Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Card Layout in column breaks site width #1666

Closed
HashandSalt opened this issue Apr 8, 2019 · 5 comments
Closed

Card Layout in column breaks site width #1666

HashandSalt opened this issue Apr 8, 2019 · 5 comments

Comments

@HashandSalt
Copy link

@HashandSalt HashandSalt commented Apr 8, 2019

Describe the bug
Setting a file sections with large card layout enabled, inside a 1/3 right hand column breaks the width of the panel.

To Reproduce
Steps to reproduce the behavior:

  1. Set two columns in a blue print, left 2/3, right 1/3
  2. Set a files section in the right hand column
  3. Set layout to card, ratio to 16/9

My files section for reference:

heroimagefiles:
  type:                   files
  template:               imagefocus
  headline:               Images
  layout:                 cards
  size:                   large
  image:
    cover:                true
    ratio:                16/9
    back:                 black

Expected behavior
Card fills the column width.

Screenshots

card-bug

Kirby Version
Kirby 3.1.1

Desktop

  • OS: macOS High Sierra
  • Opera Browser 58.0.3135.127
@distantnative distantnative modified the milestones: 3.1.4, 3.2.0 Apr 14, 2019
@distantnative distantnative modified the milestones: 3.2.0, 3.1.4 May 3, 2019
@distantnative distantnative modified the milestones: 3.1.4, 3.2.0, 3.2.1 May 12, 2019
@bastianallgeier bastianallgeier modified the milestones: 3.2.1, 3.2.2 Jul 2, 2019
@bastianallgeier bastianallgeier modified the milestones: 3.2.2, 3.2.3 Jul 10, 2019
@bastianallgeier bastianallgeier modified the milestones: 3.2.3, 3.2.4 Jul 30, 2019
@bastianallgeier bastianallgeier removed this from the 3.2.4 milestone Aug 19, 2019
@afbora

This comment has been minimized.

Copy link
Contributor

@afbora afbora commented Oct 14, 2019

@distantnative I have few tests on 3.2.5 and this issue about following lines. When I deleted these lines, it fixed in all screen resolutions. To be honest, I don't know exactly what it does and why here 😅

@media screen and (min-width: $breakpoint-medium) {
  .k-cards[data-size="large"] {
    grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
  }
}

https://github.com/getkirby/kirby/blob/develop/panel/src/components/Layout/Cards.vue#L45-L49

@HashandSalt

This comment has been minimized.

Copy link
Author

@HashandSalt HashandSalt commented Oct 14, 2019

@afbora It is probably the 32rem part doing it. That rule basically makes the cards fit equally, but they won't get ever get a width of less than 32rem. If the panels base font size is 12px, then 32rem is 32x that = 384px. It should be set to whatever the smallest possible column width is at the least.

Ideally though, it shouldn't kick in unless the card is in a column that's wide enough to handle multiple cards. Therefore, it probably needs a parent selector before the .k-cards so that it can only happen on 2/3, 3/3, 1/2, 2/2, 2/4. 3/4, 4/4 columns because 1/3 and 1/4 columns are probably too small.

Basically the rule needs to kick in if the screen size is large enough AND the parent column is large enough to cope with more than one card side by side, and the min card width needs to be no greater than the smallest a 1/4 column can get.

@afbora afbora added this to the When we find the time milestone Jan 22, 2020
@distantnative

This comment has been minimized.

Copy link
Contributor

@distantnative distantnative commented Feb 14, 2020

Basically the rule needs to kick in if the screen size is large enough AND the parent column is large enough to cope with more than one card side by side, and the min card width needs to be no greater than the smallest a 1/4 column can get.

Indeed. And I think without CSS container queries, this won't be solvable.

@distantnative distantnative self-assigned this Mar 6, 2020
@distantnative

This comment has been minimized.

Copy link
Contributor

@distantnative distantnative commented Mar 6, 2020

Basically, @HashandSalt described the exact problem and solution. But I only figured out today how to actually do that in CSS with an extra min(): #2494

distantnative added a commit that referenced this issue Mar 6, 2020
bastianallgeier added a commit that referenced this issue Mar 9, 2020
@bastianallgeier

This comment has been minimized.

Copy link
Contributor

@bastianallgeier bastianallgeier commented Mar 9, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

4 participants
You can’t perform that action at this time.