EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4565 book: Fix book page footer

main
Pau Ferrer Ocaña 2024-04-23 11:39:06 +02:00
parent fc225cbdc1
commit 23fccb22e5
5 changed files with 68 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/mod/book/pages/contents/contents.scss
View File

@ -4,4 +4,8 @@
flex: none;
}
}
.has-collapsible-footer ::ng-deep swiper-container::part(container) {
padding-bottom: 50px;
}
}

2
src/core/components/swipe-slides/swipe-slides.ts
View File

@ -348,7 +348,7 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
return;
}
this.swiper?.update();
this.swiper.update();
// We need to ensure the slides are updated before continuing.
await CoreUtils.nextTicks(2);

62
src/theme/components/swiper.scss 100644
View File

@ -0,0 +1,62 @@
swiper-container {
--swiper-theme-color: var(--ion-color-primary, #3880ff);
--swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
--swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
--swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
--swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
width: 100%;
max-width: 100%;
max-height: 100vh;
// CSS Grid/Flexbox bug size workaround
// @see https://github.com/kenwheeler/slick/issues/982
// @see https://github.com/nolimits4web/swiper/issues/3599
min-height: 0;
min-width: 0;
swiper-slide {
display: flex;
position: relative;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 18px;
text-align: center;
box-sizing: border-box;
img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
}
}
// To make core-swipe-slides fill the remaining height.
.core-swipe-slides-container {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 100%;
core-swipe-slides {
display: flex;
flex-direction: column;
flex-grow: 1;
swiper-container {
flex-grow: 1;
max-width: 100%;
}
}
}

61
src/theme/theme.base.scss
View File

@ -1243,67 +1243,6 @@ ion-grid.core-no-grid > ion-row {
}
}
// To make core-swipe-slides fill the remaining height.
.core-swipe-slides-container {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 100%;
core-swipe-slides {
display: flex;
flex-direction: column;
flex-grow: 1;
swiper-container {
flex-grow: 1;
max-width: 100%;
}
}
}
swiper-container {
--swiper-theme-color: var(--ion-color-primary, #3880ff);
--swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
--swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
--swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
--swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
width: 100%;
max-width: 100%;
max-height: 100vh;
// CSS Grid/Flexbox bug size workaround
// @see https://github.com/kenwheeler/slick/issues/982
// @see https://github.com/nolimits4web/swiper/issues/3599
min-height: 0;
min-width: 0;
swiper-slide {
display: flex;
position: relative;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 18px;
text-align: center;
box-sizing: border-box;
img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
}
}
.has-spacer,
.core-flex-fill {
display: flex;

1
src/theme/theme.scss
View File

@ -44,6 +44,7 @@ html {
@import "components/ion-searchbar.scss";
@import "components/ion-spinner.scss";
@import "components/ion-toast.scss";
@import "components/swiper.scss";
}
/* Some styles from 3rd party libraries. */