luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-06-21 00:20:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

fix(ui): ensure same width of usercards in grid (#6799)

Browse source 
Followup to https://codeberg.org/forgejo/forgejo/pulls/4760

* some refactoring
    * move rules out of repo.css to a new module
    * simplify selectors by omitting .list: it is now only used to style the list itself, they're still precise enough in scope of .user-cards
* apply wrap/ellipsis to cards' content. Done via CSS to avoid spamming gt-ellipsis in the template
    * prevent cards with long content from taking horizontal space from other cards
    * prevent such cards from causing horizontal overflow on mobile
    * prevent varying card height, it doesn't look good even with text wrapping

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6799
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-05-25 13:31:53 +02:00 • committed by Gusted
parent 0dd605a8d3
commit 8b93f41aaa
7 changed files with 100 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

55
web_src/css/modules/user-cards.css Normal file
View file

@ -0,0 +1,55 @@
.user-cards .list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 0 0 10px;
padding: 0;
}
@media (max-width: 767.98px) {
.user-cards .list {
grid-template-columns: repeat(1, 1fr);
}
}
@media (max-width: 900px) {
.user.profile .user-cards .list {
grid-template-columns: repeat(1, 1fr);
}
}
.user-cards .card {
display: flex;
flex-direction: row;
width: 100%;
margin: 0;
padding: 14px;
border-radius: 0.28571429rem;
border: 1px solid var(--color-secondary);
background: var(--color-box-body);
}
.user-cards .card,
.user-cards .card .content,
.user-cards .card .name,
.user-cards .card .meta {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.user-cards .card .avatar {
width: 48px;
height: 48px;
margin-right: 14px;
}
.user-cards .card .name {
margin-top: 0;
margin-bottom: 0;
font-weight: var(--font-weight-normal);
}
.user-cards .card .meta {
margin-top: 5px;
}