refactor: added class names to the divs and made a separate grid design for mobile layout

- added/modified the class names of both date & button in commits_list
- created a new vertical layout for mobile (3rows, 212cols-per-row)
This commit is contained in:
iamyaash 2025-05-29 13:25:13 +05:30
commit 1b16e5bcfd
2 changed files with 34 additions and 10 deletions

View file

@ -2775,14 +2775,38 @@ tbody.commit-list {
row-gap: 0.5rem;
grid-template-columns: minmax(8ch, 15%) 1fr minmax(20ch, 1%) minmax(10ch, 10%) auto;
align-items: center;
.message {padding-left: 10%}
.author {margin-right: 10%}
}
@media (max-width: 640px) {
.commit-ui-redesign {
grid-template-columns: minmax(12ch, 100%) minmax(12ch,10%) auto minmax(10ch,40%) auto;
align-items: center;
column-gap: 0.5rem;
.sha.label {display:none}
grid-template-columns: 1fr 1fr;
}
}
/* manual div allocation in grid cols, since it uses a new layout for mobile */
.commit-ui-redesign .author {
grid-row: 1;
grid-column: 1;
}
.commit-ui-redesign .date {
grid-row: 1;
grid-column: 2;
justify-self: right;
}
.commit-ui-redesign .message {
grid-row: 2;
grid-column: 1 / span 2;
}
.commit-ui-redesign .ui.sha.label {
grid-row: 3;
grid-column: 1;
}
.commit-ui-redesign .btn {
grid-row: 3;
grid-column: 2;
justify-self: right;
}
}