LogalDeveloper/owncast
0
Fork 0
Code Activity

Update follower cards to have better responsive design (#4198)

Browse Source 
* change a follower's name to be very long

* Add more media query and make the entire row match the tallest card

* fix lint in followerCollection file

* make media queries easier to read
This commit is contained in:
Germaine Lee
2025-02-12 23:46:54 -05:00
committed by GitHub
parent 788b582e35
commit f1ca5f9549
3 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
View File

@@ -3,17 +3,14 @@
.followers {
width: 100%;
padding: 5px;
margin: 0 auto;
min-height: 20vh;
.followerRow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (width <= 900px) {
.followerRow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
gap: 16px 0;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: min-content;
}
@include screen(mobile) {
@@ -22,6 +19,24 @@
justify-content: center;
}
}
@media (640px <= width < 960px) {
.followerRow {
grid-template-columns: repeat(2, 1fr);
}
}
@media (960px <= width < 1280px) {
.followerRow {
grid-template-columns: repeat(3, 1fr);
}
}
@media (width >= 1280px) {
.followerRow {
grid-template-columns: repeat(4, 1fr);
}
}
}
.noFollowers {