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

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

@ -90,10 +90,8 @@
}) })
</script> </script>
<!-- Svelte template --> <!-- Display all parsed ratings -->
<div> {#if parsedRatings}
<!-- Display all parsed ratings -->
{#if parsedRatings}
{#each [{title: "Old", data: parsedRatings.old}, {title: "New", data: parsedRatings.new}] as section} {#each [{title: "Old", data: parsedRatings.old}, {title: "New", data: parsedRatings.new}] as section}
<h2>{section.title}</h2> <h2>{section.title}</h2>
<div class="rating-cards"> <div class="rating-cards">
@ -115,16 +113,20 @@
{/each} {/each}
</div> </div>
{/each} {/each}
{/if} {/if}
</div>
<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>