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

feat(gallery): add grid display - FRONT-4459 #3434

Merged
merged 10 commits into from
Jun 19, 2024
Merged

Conversation

emeryro
Copy link
Contributor

@emeryro emeryro commented Jun 13, 2024

  • alternative display using css grid. Twig parameter: grid
  • when in grid display, added possibility to change number of column and aspect ratio. Twig parameters column and ratio

Copy link

github-actions bot commented Jun 13, 2024

@github-actions github-actions bot temporarily deployed to pull request June 13, 2024 11:46 Inactive
@github-actions github-actions bot temporarily deployed to pull request June 13, 2024 12:02 Inactive
@emeryro emeryro marked this pull request as ready for review June 13, 2024 12:52
@github-actions github-actions bot temporarily deployed to pull request June 17, 2024 06:51 Inactive
@emeryro emeryro changed the title feat(gallery): add grid display feat(gallery): add grid display - FRONT-4459 Jun 17, 2024
@github-actions github-actions bot temporarily deployed to pull request June 17, 2024 11:59 Inactive
@github-actions github-actions bot temporarily deployed to pull request June 18, 2024 08:49 Inactive
@planctus
Copy link
Contributor

planctus commented Jun 18, 2024

The columns control doesn't seem to do anything, i see the reason why, the css is missing an & for the columns selectors

@include breakpoints.up('m') {
  .ecl-gallery--grid {
    .ecl-gallery__list {
      grid-template-columns: repeat(3, 1fr);
    }

    .ecl-gallery--col-2 {
      .ecl-gallery__list {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .ecl-gallery--col-4 {
      .ecl-gallery__list {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }
}

@github-actions github-actions bot temporarily deployed to pull request June 18, 2024 11:01 Inactive
{% if _grid %}
{% set _css_class = _css_class ~ ' ecl-gallery--grid' %}

{% if _column is not empty %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we set the default to 3 for the column..

{% set _css_class = _css_class ~ ' ecl-gallery--col-' ~ _column %}
{% endif %}

{% if _ratio is not empty %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here for the ratio, it cannot be empty, basically..

@planctus planctus merged commit 52d8284 into v4-dev Jun 19, 2024
6 checks passed
@planctus planctus deleted the FRONT-4459-gallery-grid branch June 19, 2024 11:01
@github-actions github-actions bot temporarily deployed to pull request June 19, 2024 11:10 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants