Commit Graph

3 Commits

Author SHA1 Message Date
Spedon
9fa1b718b8 feat: add loading indicator for desktop and mobile (#244)
* 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
2024-01-20 23:34:13 +08:00
Sped0n
3d88d5a243 style(base.scss): remove empty line at the end of the file for consistency
style(nav.scss): remove unused import statement for mixins in _core folder
2023-11-01 23:02:02 +08:00
Sped0n
ca4f2d2902 feat(scss): add core base styles
Add a new file `_base.scss` to the `_core` directory. This file contains base styles for the entire application. The styles include setting font smoothing properties, setting the background color of the body, and disabling overscroll behavior on the html and body elements. Additionally, the styles set the cursor property to pointer for anchor tags and buttons.

feat(scss): add core font styles

Add a new file `_font.scss` to the `_core` directory. This file defines the `HelveticaNow` font face and specifies the font weight and style.

feat(scss): add core mixins

Add a new file `_mixins.scss` to the `_core` directory. This file defines mixins for working with breakpoints. The mixins allow for specifying styles based on minimum and maximum widths of breakpoints defined in the `$breakpoints` map.

feat(scss): add core typography styles

Add a new file `_typography.scss` to the `_core` directory. This file defines typography styles for the body element. The styles set the line height, font size, and font family. Additionally, the styles use the `min-width` mixin to increase the font size at tablet and laptop breakpoints.

feat(scss): add partial customCursor styles

Add a new file `_customCursor.scss` to the `_partial` directory. This file defines styles for a custom cursor. The styles position the cursor element, set its color and blend mode, and define an inner element for the cursor.

feat(scss): add partial stage styles

Add a new file `_stage.scss` to the `_partial` directory. This file defines styles for a stage element. The styles position the stage element, set its width and height, and define styles for an image element within the stage.

feat(scss): add partial stageNav styles

Add a new file `_stageNav.scss` to the `_partial` directory. This file defines styles for a stage navigation overlay. The styles position the overlay element and set its width and height. The styles also define an inactive state for the overlay.

feat(scss): add variables

Add a new file `_variables.scss` to the root directory. This file defines CSS variables for various aspects of the application, such as window height, navigation height, spacing, and z-index values.

feat(scss): import styles in main style.scss

Add import statements for the newly created files in the `style.scss` file. This ensures that the
2023-10-29 22:09:36 +08:00