mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-14 10:09:31 -07:00
bd2354e2f5
- Added a new SCSS partial `_collection.scss` to define styles for the collection component. - Added a new SCSS partial `_gallery.scss` to define styles for the gallery component. The new partials contain styles for the collection and gallery components, including layout, positioning, and animations. --- feat: add support for gallery functionality in mobile - Created a new file `gallery.ts` to handle the gallery functionality in the mobile view. - Added functions `slideUp()` and `slideDown()` to handle the sliding animation of the gallery. - Initialized the gallery with the provided image data in the `initGallery()` function. - Added event listeners to update the active slide and index text when the slide is changed. - Created a helper function `changeSlide()` to change the active slide in the gallery. - Created a helper function `scrollToActive()` to scroll to the active image in the collection. - Created a helper function `updateIndexText()` to update the index text in the navigation. - Created a helper function `createGallery()` to dynamically create the gallery HTML structure. --- feat: add scrollable flag for mobile view - Created a new file `scroll.ts` to handle the scrollable flag for the mobile view. - Added a `scrollable` variable as a Watchable object to control the scrollability of the view. --- fix: change port variable case from lowercase `port` to uppercase `PORT` to improve semantics - Changed the variable name `port` to `PORT` in the `server.ts` file to improve code readability and semantics. - The variable `PORT` is now used to define the port number for the server to listen on.
57 lines
911 B
SCSS
57 lines
911 B
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|