mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-14 10:09:31 -07:00
9fa1b718b8
* feat: add new CSS rule for hiding elements - Add a new CSS rule for the class "hide" with a display property set to "none". * feat: refactor image loading and navigation logic on desktop - Add a line of code in `assets/ts/desktop/stage.ts` to reset the `src` of `elc` and add a class `hide` to it - Add a line of code in `assets/ts/desktop/stage.ts` to call the `loader` function with `elc` as an argument - Add a function `loader` in `assets/ts/desktop/stage.ts` to handle image loading and error events - Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to watch the `isLoading` state and set custom cursor accordingly - Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle close click events by calling the `handleClick` function and setting `isLoading` state to false - Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle previous/next click events by calling the `handleClick` function only if `isLoading` is false - Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle previous/next hover events by setting `loadedText` and updating custom cursor depending on `isLoading` state * feat: refactor createGallery function and enhance loading functionality on mobile - Add a loading text element to the gallery.scss file - Add a loading indicator to the createGallery function in gallery.ts - Modify the createGallery function in gallery.ts to hide the loading text element on image load - Move the image element append logic to the parent container in the createGallery function in gallery.ts * feat: update translations and add new loading translation in i18n files * chore: remove css source map * chore: modify build command to ignore css source map * refactor: remove unnecessary style * fix: fix desktop cursor text transition bug
69 lines
1.1 KiB
SCSS
69 lines
1.1 KiB
SCSS
.gallery {
|
|
pointer-events: all;
|
|
|
|
position: fixed;
|
|
top: var(--nav-height);
|
|
z-index: var(--z-nav-gallery);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
width: 100vw;
|
|
height: calc(var(--window-height) - var(--nav-height));
|
|
background: white;
|
|
transform: translate3d(0, 100%, 0);
|
|
|
|
.galleryInner {
|
|
flex: 1;
|
|
height: 0;
|
|
|
|
.swiper-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.loadingText {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
}
|
|
|
|
.slideContainer {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
height: var(--nav-height);
|
|
padding: var(--space-standard);
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.curtain {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: var(--z-curtain);
|
|
|
|
width: 100vw;
|
|
height: var(--window-height);
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
}
|