golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-11-02 20:23:29 +08:00
Code Issues Packages Projects Releases Wiki 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 {

6
web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
View File

@ -101,9 +101,9 @@ const mocks = {
disabledAt: null,
},
{
link: 'https://gamethattune.club/users/thelinkfloyd',
name: 'thelinkfloyd',
username: 'thelinkfloyd@gamethattune.club',
link: 'https://gamethattune.club/users/fourthwall',
name: ':fourthwall: █████ :fourthwall: (( MagmaSys ))',
username: 'EnlightenmentSurrealX@gamethattune.club',
image: '',
timestamp: '2022-04-05T12:23:32Z',
disabledAt: null,

3
web/components/ui/followers/SingleFollower/SingleFollower.module.scss
View File

@ -10,6 +10,9 @@
margin: 0.5em;
font-size: 1rem;
line-height: 1.5rem;
height: 100%;
align-items: center;
transition: border-color 0.2s ease-in-out;
&:hover {
border-color: var(--theme-text-link);