UX: Improve topic footer alignment and layout (#12420)

This commit is contained in:
Kris 2021-03-17 22:42:52 -04:00 committed by GitHub
parent 74dbf2b1dc
commit 7e470bf8ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 5 deletions

View File

@ -1098,7 +1098,9 @@ a.mention-group {
button {
margin-right: 0.54em;
}
> * {
margin-bottom: 0.5em; // all immediate children should have a bottom margin in case of wrapping
}
.topic-admin-menu-button-container {
display: inline-flex;
> span {
@ -1113,7 +1115,7 @@ a.mention-group {
.pinned-button,
.topic-notifications-button {
margin: 1em 0;
margin: 0.5em 0 1em;
.reason {
color: var(--primary-high);
@ -1121,8 +1123,19 @@ a.mention-group {
margin: 0;
align-items: center;
.dropdown-select-box {
.select-kit-selected-name {
width: 100%;
overflow: hidden;
}
.name {
@include ellipsis;
}
}
.text {
margin-left: 0.5em;
line-height: $line-height-medium;
}
}
}

View File

@ -433,6 +433,12 @@ pre.copy-codeblocks:hover .copy-cmd {
#topic-footer-buttons {
max-width: calc(690px + (11px * 2) + 45px);
@media screen and (max-width: 924px) {
.topic-footer-main-buttons {
margin-top: 1em; // some extra space for the docked progress bar
}
}
.bookmark {
.d-icon-bookmark.bookmarked {
color: var(--tertiary);

View File

@ -15,7 +15,7 @@
}
.post-stream {
padding-bottom: 30px;
padding-bottom: 3em;
}
span.badge-posts {
@ -243,8 +243,7 @@ a.reply-to-tab {
}
.topic-footer-mobile-dropdown {
margin: 0 0.75em 0 0;
width: 160px;
margin-right: 0.5em;
display: flex;
}
@ -256,6 +255,13 @@ a.reply-to-tab {
.pinned-button {
display: flex;
align-items: center;
.reason {
align-items: flex-start;
.select-kit {
max-width: 40%;
}
}
@include breakpoint(mobile-medium) {
display: inline-block;
.reason {