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

[Enhancement] Allow for Image Banner to be used in Slides with slideStretchHeight enabled #3712

Closed
11 tasks
troelslenda opened this issue Nov 18, 2024 · 0 comments · Fixed by #3716
Closed
11 tasks
Labels
enhancement New feature or request 👶🏻 New For new issues before prioritisation and refinement NOT Prioritized Issue not yet prioritized and added to a Milestone NOT Tech refined Needs Tech kickoff - solution outlined and agreed

Comments

@troelslenda
Copy link
Collaborator

Describe the enhancement

Using slideStretchHeight with kirby-x-image-banner makes the host element the correct height, however the kirby-card inside will not grow vertically to fill the kirby-x-image-banner element.

Describe the solution you'd like

Simply adding the css property height:100% to the selector kirby-card could solve this problem.

Have you considered any alternatives?

I haven't thought of any. I was trying to solve it with the css variable min-height that was recently introduced, but that property targets an element way in there. Maybe that could be refactored to work on the kirby-card instead.

Are there any additional context?

As is

image

Wanted

image

This is achieved as of right now with the following (but unwanted due to deprecation of ng-deep)

::ng-deep kirby-x-image-banner kirby-card {
  height: 100%;
}

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

  • Request that the issue is UX refined
  • Request that the issue is tech refined; do not proceed until this is done.

Implementation

When were settled on a solution I would gladly do the PR.

The contributor who wants to implement this issue should:

  • Make sure you have read: "Before you get coding".
  • Signal to others you are working on the issue by assigning yourself.
  • Create a branch from the develop branch following our branch naming convention.
  • Publish a WIP implementation to Github as a draft PR and ask for feedback.
  • Make sure you have implemented tests following the guidelines in: "The good: Test".
  • Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

  • Do a self-review.
  • Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".
@troelslenda troelslenda added enhancement New feature or request NOT Tech refined Needs Tech kickoff - solution outlined and agreed NOT Prioritized Issue not yet prioritized and added to a Milestone 👶🏻 New For new issues before prioritisation and refinement labels Nov 18, 2024
@github-project-automation github-project-automation bot moved this to 📙 Backlog in Kirby Nov 18, 2024
@RasmusKjeldgaard RasmusKjeldgaard moved this from 📙 Backlog to 🔎 Review pending in Kirby Nov 20, 2024
@github-project-automation github-project-automation bot moved this from 🔎 Review pending to ✅ Done in Kirby Nov 20, 2024
@jakobe jakobe changed the title [Enhancement] Allow for Image Banner to be used in Slider with slideStretchHeight enabled [Enhancement] Allow for Image Banner to be used in Slides with slideStretchHeight enabled Nov 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request 👶🏻 New For new issues before prioritisation and refinement NOT Prioritized Issue not yet prioritized and added to a Milestone NOT Tech refined Needs Tech kickoff - solution outlined and agreed
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

1 participant