jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-28 13:37:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #234 from nagisa77/codex/update-homepageview-for-avatar-responsive-resizing

Browse Source 
Implement avatar width adjustments via container queries
This commit is contained in:
Tim
2025-07-17 16:10:22 +08:00
committed by GitHub
parent 36b53aa1a8 a57fc91e93
commit 386fd99ed4
1 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
open-isle-cli/src/views/HomePageView.vue
View File

@@ -331,6 +331,9 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-y: auto; overflow-y: auto;
/* enable container queries */
container-type: inline-size;
container-name: home-page;
/* width variables shared between header and article rows */ /* width variables shared between header and article rows */
--main-width: 60%; --main-width: 60%;
--avatars-width: 20%; --avatars-width: 20%;
@@ -529,7 +532,24 @@ export default {
opacity: 0.7; opacity: 0.7;
} }
@container home-page (min-width: 900px) { @container home-page (max-width: 900px) {
.home-page {
--main-width: 65%;
--avatars-width: 15%;
}
.article-member-avatar-item:nth-child(n+4) {
display: none;
}
}
@container home-page (max-width: 768px) {
.home-page {
--main-width: 70%;
--avatars-width: 10%;
}
.article-member-avatar-item:nth-child(n+2) {
display: none;
}
} }
</style> </style>