ui: refactor user-cards as a grid

This commit is contained in:
0ko 2024-07-31 16:23:23 +05:00
parent c0dde47d37
commit cad8d09ba8
3 changed files with 45 additions and 28 deletions

View file

@ -2099,35 +2099,49 @@ td .commit-summary {
}
.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 .list .card {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
}
.user-cards .list .item {
list-style: none;
width: 31%;
margin: 15px 15px 0 0;
flex-direction: row;
width: 100%;
margin: 0;
padding: 14px;
float: left;
border-radius: 0.28571429rem;
border: 1px solid var(--color-secondary);
background: var(--color-box-body);
}
.user-cards .list .item .avatar {
.user-cards .list .card .avatar {
width: 48px;
height: 48px;
float: left;
display: block;
margin-right: 10px;
margin-right: 14px;
}
.user-cards .list .item .name {
.user-cards .list .card .name {
margin-top: 0;
margin-bottom: 0;
font-weight: var(--font-weight-normal);
}
.user-cards .list .item .meta {
.user-cards .list .card .meta {
margin-top: 5px;
}