mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-14 10:09:31 -07:00
1f65b08b56
* feat: refactor file structure and imports in mobile and desktop components - Removed the import of `scrollable` from `assets/ts/mobile/scroll.ts` - Renamed `assets/ts/mobile/mounted.ts` to `assets/ts/mobile/state.ts` - Changed the import of `active` from `./stage` to `./state` in `assets/ts/desktop/customCursor.ts` - Changed the import of `active` from `../state` to `../globalState` in `assets/ts/desktop/stage.ts` - Changed the import of `active` from `./stage` to `./state` in `assets/ts/desktop/stageNav.ts` - Renamed `assets/ts/state.ts` to `assets/ts/globalState.ts` - Created a new file `assets/ts/desktop/state.ts` - Added the interface `HistoryItem` to `assets/ts/desktop/state.ts` - Added the variables `cordHist`, `isOpen`, `active`, and `isLoading` to `assets/ts/desktop/state.ts` - Deleted the function `loader` from `assets/ts/desktop/stage.ts` and replaced it with `setLoaderForImage` - Deleted the import of `./stage` from `assets/ts/desktop/stageNav.ts` - Added the import of `minimizeImage` from `./stage` in `assets/ts/desktop/stageNav.ts` - Deleted the import of `./mounted` from `assets/ts/mobile/collection.ts` - Changed the import of `mounted` from `./mounted` to `./state` in ` * refactor: refactor the `onVisible` function to improve performance - Modify the type of the `onVisible` function parameter `T` to extend `HTMLElement` - Change the `entries.forEach` loop in the `onVisible` function to `entries.every` * feat: add new function for detecting opacity changes in element - Add a new function `onOpacityOne` in `assets/ts/utils.ts` - The function uses a `MutationObserver` to check for opacity changes on an element - When the element's opacity reaches `1`, the provided callback function is called - The `MutationObserver` is disconnected after the callback is executed * refactor: refactor function names and parameters in intersection and mutation observers - Change the function name `onVisible` to `onIntersection` - Modify the `callback` parameter in the `onIntersection` function to accept `IntersectionObserverEntry[]` and `IntersectionObserver` parameters - Remove the code block that checks for intersection ratio and immediately calls the `callback` function in the `onIntersection` function - Modify the function name `onOpacityOne` to `onMutation` - Modify the `callback` parameter in the `onMutation` function to accept `MutationRecord[]` and `MutationObserver` parameters - Add a default value for the `observeOptions` parameter in the `onMutation` function * refactor: refine preload logic on both mobile and desktop * refactor: refactor import statements and add new files - The import statement for `Watchable` in `assets/ts/globalState.ts` has been changed from `../utils` to `../globalUtils` - The import statement for `Watchable` in `assets/ts/desktop/state.ts` has been changed from `../utils` to `../globalUtils` - The import statement for `decrement` and `increment` in `assets/ts/desktop/stageNav.ts` has been changed from `../utils` to `../globalUtils` - A new file `utils.ts` has been added in the `assets/ts/desktop` directory - The import statements for `getRandom`, `onIntersection`, and `type MobileImage` in `assets/ts/mobile/collection.ts` have been changed from `../utils` to `./utils` - The `imgs` array in `assets/ts/mobile/collection.ts` has been changed from an array of `HTMLImageElement` to an array of `MobileImage` - The import statements for `expand`, `loadGsap`, `loadSwiper`, and `removeDuplicates` in `assets/ts/mobile/gallery.ts` have been changed from `../utils` to `../globalUtils` - The import statement for `type MobileImage` in `assets/ts/mobile/gallery.ts` has been changed from `./utils` to `../mobile/utils` - The `galleryLoadImages` function in `assets/ts/mobile/gallery.ts` has been removed - A new file `utils.ts` * refactor: refactor swiper import and functions in mobile and global utils * refactor: refactor navigation and image loading logic in desktop and mobile * refactor: remove print function and optimize removeDuplicates return * refactor: update text variable assignments and attributes * refactor: update variable types in galleryImages and collectionImages in mobile/gallery.ts * refactor: refactor variable types for consistency with naming conventions * refactor: update animation durations and types in gallery functions * refactor: refactor image loading logic and add console logs * refactor: refactor sass hierarchy * refactor: remove console logs in multiple files
69 lines
1.0 KiB
SCSS
69 lines
1.0 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;
|
|
}
|