Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed problem with background images

This commit is contained in:
DrMint 2024-05-11 16:47:33 +02:00
parent 2c9a257286
commit 2fe38c38e1
3 changed files with 3 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@ -2,7 +2,6 @@
## Short term ## Short term
- Background images some times lack gradient at the bottom and fade in before they could load
- Number of audio players seems limited (on Chrome and Firefox) - Number of audio players seems limited (on Chrome and Firefox)
- Create a tool to upload scans images and apply them to collectible - Create a tool to upload scans images and apply them to collectible
- Automatically generate different sizes of images - Automatically generate different sizes of images

4
src/components/AppLayout/components/AppLayoutBackgroundImg.astro
View File

@ -12,7 +12,7 @@ const {
const uniqueId = getRandomId(); const uniqueId = getRandomId();
const style = ` const style = `
@media (max-aspect-ratio: ${width}/${height}) { @media (max-aspect-ratio: ${width}/${height * 0.85}) {
#${uniqueId} { #${uniqueId} {
mask-image: linear-gradient( to bottom, rgba(0 0 0 / 30%) 0%, transparent 100% ); mask-image: linear-gradient( to bottom, rgba(0 0 0 / 30%) 0%, transparent 100% );
} }
@ -23,7 +23,7 @@ const style = `
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<img id={uniqueId} src={url} class="when-no-print when-js" /> <img id={uniqueId} src={url} class="when-no-print when-js" />
<img src={url} class="when-no-print when-no-js" /> <img id={uniqueId} src={url} class="when-no-print when-no-js" />
{/* ------------------------------------------- CSS -------------------------------------------- */} {/* ------------------------------------------- CSS -------------------------------------------- */}

2
src/utils/random.ts
View File

@ -1 +1 @@
export const getRandomId = () => Math.random().toString(36).substring(2); export const getRandomId = () => "id" + Math.random().toString(36).substring(2);