b72a3c1e95
This is the second iteration on the topic card design, in which we bring
back the OP and change the layout.
**Changes**:
* Show OP avatar
* Remove activity avatar and replace by reply icon
* Remove activity icon background
* Move category tag to top left
* Replace long activity copy ("…replied at…") with dot separator
* Change date formatting to `tiny`
* Adjust bulk select styling to new layout + align checkbox to top on
mobile VS keep centred on desktop
* Why: On desktop, the avatar is taking 2 lines (usually) and aligning
the checkbox vertically looks nice. Exception for excerpts, but since
that's only available for pinned topics atm that's a low occurrence. On
mobile, the topic card is 3 lines, with a smaller avatar, which makes
the checkbox "float" around a bit when centred. Hence aligning it to the
top, which for solid avatars aligns nicely too.
* CSS refactor: grid, breakpoints
Messages/bookmarks have not been changed.
| Description | Visual |
|--------|--------|
| Large topic list | |
| Large bulk edit | 
|
| Medium topic list | 
|
| Medium bulk edit | 
|
| Small topic list | 
|
| Small bulk edit | 
|
| Messages page (remains unchanged) | 
|
| Bookmark page (remains unchanged) | 
|
66 lines
1016 B
SCSS
66 lines
1016 B
SCSS
// Fixing bulk select (only needed for desktop)
|
|
.bulk-select-enabled {
|
|
.topic-list-header {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
|
|
.topic-author-avatar-data {
|
|
display: none;
|
|
}
|
|
|
|
.bulk-select.topic-list-data {
|
|
grid-area: bulk-select;
|
|
margin-left: -0.5em;
|
|
|
|
@media screen and (max-width: 576px) {
|
|
margin-top: 0;
|
|
|
|
label {
|
|
padding-block: 0.345em;
|
|
}
|
|
}
|
|
|
|
input {
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-list-header {
|
|
tr {
|
|
border: none;
|
|
}
|
|
|
|
.topic-list-data {
|
|
padding: 0;
|
|
|
|
&:not(.default) {
|
|
display: none;
|
|
}
|
|
|
|
&.default {
|
|
.bulk-select,
|
|
span:not(.bulk-select-topics, .d-button-label) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// bulk select
|
|
.bulk-select-topics {
|
|
position: absolute;
|
|
right: 0;
|
|
background: var(--secondary);
|
|
border-radius: 0 0 0 var(--d-border-radius);
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin: 0.5rem;
|
|
|
|
button {
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|