archive
/
AquaDX
mirror of https://github.com/hykilpikonna/AquaDX
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

[O] Responsive

pull/10/head
Azalea 2024-02-08 03:32:33 -05:00
parent 8b5ef24681
commit 4b71cd9940
2 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
AquaNet/src/app.sass
View File

@ -42,7 +42,7 @@ h1
max-width: 1280px max-width: 1280px
margin: 0 auto margin: 0 auto
padding: 2rem padding: 2rem
text-align: center width: 100%
button button

86
AquaNet/src/pages/MaimaiRating.svelte
View File

@ -90,41 +90,43 @@
}) })
</script> </script>
<!-- Svelte template --> <!-- Display all parsed ratings -->
<div> {#if parsedRatings}
<!-- Display all parsed ratings --> {#each [{title: "Old", data: parsedRatings.old}, {title: "New", data: parsedRatings.new}] as section}
{#if parsedRatings} <h2>{section.title}</h2>
{#each [{title: "Old", data: parsedRatings.old}, {title: "New", data: parsedRatings.new}] as section} <div class="rating-cards">
<h2>{section.title}</h2> {#each section.data as rating}
<div class="rating-cards"> <div class="level-{rating.difficulty}">
{#each section.data as rating} <img class="cover" src={`${data_host}/maimai/assetbundle/jacket_s/00${rating.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
<div class="level-{rating.difficulty}">
<img class="cover" src={`${data_host}/maimai/assetbundle/jacket_s/00${rating.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
<div class="detail"> <div class="detail">
<span class="name">{rating.music.name}</span> <span class="name">{rating.music.name}</span>
<span class="rating"> <span class="rating">
<span>{(rating.achievement / 10000).toFixed(2)}%</span> <span>{(rating.achievement / 10000).toFixed(2)}%</span>
<img class="rank" src={`${data_host}/maimai/sprites/rankimage/UI_GAM_Rank_${rating.rank}.png`} alt=""> <img class="rank" src={`${data_host}/maimai/sprites/rankimage/UI_GAM_Rank_${rating.rank}.png`} alt="">
</span> </span>
<span>{rating.calc.toFixed(1)}</span> <span>{rating.calc.toFixed(1)}</span>
</div>
<img class="ver" src={`${data_host}/maimai/sprites/tab/title/UI_CMN_TabTitle_MaimaiTitle_Ver${rating.music.ver.toString().substring(0, 3)}.png`} alt="">
<div class="lv">{rating.music.note.lv}</div>
</div> </div>
{/each} <img class="ver" src={`${data_host}/maimai/sprites/tab/title/UI_CMN_TabTitle_MaimaiTitle_Ver${rating.music.ver.toString().substring(0, 3)}.png`} alt="">
</div> <div class="lv">{rating.music.note.lv}</div>
{/each} </div>
{/if} {/each}
</div> </div>
{/each}
{/if}
<style lang="sass"> <style lang="sass">
.rating-cards .rating-cards
display: grid display: grid
gap: 2rem gap: 2rem
width: 100%
// 5 columns // Fill as many columns as possible
grid-template-columns: repeat(5, 1fr) grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
// Center the cards
justify-items: center
align-items: center
// Style each card // Style each card
> div > div
@ -160,13 +162,6 @@
left: -30px left: -30px
height: 50px height: 50px
//img.rank
// position: absolute
// bottom: 20px
// right: 45px
// z-index: 5
// height: 30px
// Information // Information
.detail .detail
position: absolute position: absolute
@ -188,12 +183,10 @@
// Disable text wrapping, max 2 lines // Disable text wrapping, max 2 lines
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
//max-height: 2.4em
//line-height: 1.2em
white-space: nowrap white-space: nowrap
.name .name
font-size: 1.2rem font-size: 1.2em
font-weight: bold font-weight: bold
.rating .rating
@ -210,9 +203,24 @@
// Top left border radius // Top left border radius
border-radius: 10px 0 border-radius: 10px 0
font-size: 1.3rem font-size: 1.3em
&:before &:before
content: "Lv" content: "Lv"
font-size: 0.8rem font-size: 0.8em
// Mobile
@media (max-width: 500px)
margin-left: -1rem
margin-right: -1rem
width: calc(100% + 2rem)
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr))
font-size: 0.8em
> div
width: 150px
height: 150px
img.ver
height: 45px
left: -20px
</style> </style>