mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 09:42:07 +08:00
e7fb4be23e
This PR updates how we display related and suggested topics on mobile and desktop. It adds a new `PluginOutlet` specifically designed for adding new topic lists, which automatically work if following the same conventions as the ones inside `<MoreTopics />`. While we display lists side by side on desktop, we only display one in mobile. You can switch to another one by clicking on the nav pills, and we'll automatically save your preference for next time.
156 lines
2.4 KiB
SCSS
156 lines
2.4 KiB
SCSS
.post-actions {
|
|
@include unselectable;
|
|
clear: both;
|
|
text-align: right;
|
|
margin-bottom: 10px;
|
|
.post-action {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.post-menu-area {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
#topic-title {
|
|
z-index: z("base");
|
|
margin-bottom: 1em;
|
|
|
|
#edit-title,
|
|
.category-chooser,
|
|
.edit-controls {
|
|
width: 500px;
|
|
}
|
|
h1 {
|
|
font-size: var(--font-up-4);
|
|
line-height: var(--line-height-medium);
|
|
overflow-wrap: break-word;
|
|
width: 100%;
|
|
a {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.remove-featured-link {
|
|
float: right;
|
|
text-transform: lowercase;
|
|
color: var(--primary-med-or-secondary-med);
|
|
font-size: 0.857rem;
|
|
}
|
|
}
|
|
|
|
.topic-error {
|
|
padding: 18px;
|
|
width: 60%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-size: var(--font-up-4);
|
|
text-align: center;
|
|
line-height: var(--line-height-medium);
|
|
|
|
.topic-retry {
|
|
display: block;
|
|
margin-top: 28px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
#topic-progress-expanded {
|
|
border: 1px solid var(--primary-low);
|
|
padding: 5px;
|
|
background: var(--secondary);
|
|
|
|
position: relative;
|
|
left: 340px;
|
|
width: 135px;
|
|
|
|
button.full {
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
.d-icon {
|
|
display: block;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
font-size: var(--font-up-2);
|
|
}
|
|
}
|
|
.jump-form {
|
|
input[type="text"] {
|
|
float: left;
|
|
width: 45px;
|
|
height: 20px;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
font-size: var(--font-up-1);
|
|
}
|
|
button.btn {
|
|
float: right;
|
|
width: 55px;
|
|
}
|
|
}
|
|
button.btn.jump-prompt {
|
|
margin: 0;
|
|
}
|
|
|
|
button.btn.jump-bottom {
|
|
margin: 5px 0 0 0;
|
|
}
|
|
}
|
|
|
|
#topic-filter {
|
|
background-color: var(--highlight-bg);
|
|
padding: 8px;
|
|
bottom: 0;
|
|
position: fixed;
|
|
width: 100%;
|
|
font-size: var(--font-0);
|
|
z-index: z("dropdown");
|
|
}
|
|
|
|
#topic-progress:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#topic-progress,
|
|
#topic-progress-expanded {
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.onscreen-post .row {
|
|
display: flex; // children should never wrap
|
|
}
|
|
|
|
@media all and (min-width: 400px) {
|
|
#topic-footer-main-buttons {
|
|
max-width: 70%;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 485px) {
|
|
#topic-footer-main-buttons {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.more-content-wrapper {
|
|
display: flex;
|
|
|
|
.topic-list-header,
|
|
.posts-map,
|
|
.views {
|
|
display: none;
|
|
}
|
|
|
|
.topic-list-body {
|
|
border-top: none;
|
|
|
|
.topic-list-item:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|