Hi, I would like to suggest an improvement to animate the padding of the expanded content in Expandable Cards, so it would look nicer and unobstructed in iOS devices. I'll be happy to open new PRs for it.
When I open the Expandable Card from the official demo/kitchen sink as a PWA, the content heading and the Close button are obstructed by the system statusbar.
This could be fixed and improved by setting the heading's top padding to match the top safe area inset. Note that I applied them only when the card has been opened.
.card-expandable.card-opened .card-content .card-header {
padding-top: calc(var(--f7-card-header-padding-vertical) + var(--f7-safe-area-top));
}
.card-expandable.card-opened .card-content .card-close {
top: calc(15px + var(--f7-safe-area-top)) !important;
}
I also added several CSS rules to make the card opening and closing transitions as smooth as possible.
.card-expandable.card-opening .card-content .card-header {
padding-top: calc(var(--f7-card-header-padding-vertical) + var(--f7-safe-area-top));
transform: scale(1);
transition: 0.5s all ease;
}
.card-expandable.card-opening .card-content .card-close {
top: calc(15px + var(--f7-safe-area-top)) !important;
transform: scale(1);
transition: 0.5s all ease;
}
.card-expandable.card-closing .card-content .card-header {
transform: scale(1);
transition: 0.5s all ease;
}
I have implemented this fix in https://github.com/reinhart1010/aqualife-mockup/blob/lead/src/pages/explore.vue, which the final result can be found on https://reinhart1010.github.io/aqualife-mockup/ under the "Explore Tab". When previewed in iOS as a standalone web app, the card heading and the Close button are now positioned correctly.
Hi, I would like to suggest an improvement to animate the padding of the expanded content in Expandable Cards, so it would look nicer and unobstructed in iOS devices. I'll be happy to open new PRs for it.
When I open the Expandable Card from the official demo/kitchen sink as a PWA, the content heading and the Close button are obstructed by the system statusbar.
This could be fixed and improved by setting the heading's top padding to match the top safe area inset. Note that I applied them only when the card has been opened.
I also added several CSS rules to make the card opening and closing transitions as smooth as possible.
I have implemented this fix in https://github.com/reinhart1010/aqualife-mockup/blob/lead/src/pages/explore.vue, which the final result can be found on https://reinhart1010.github.io/aqualife-mockup/ under the "Explore Tab". When previewed in iOS as a standalone web app, the card heading and the Close button are now positioned correctly.