IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Condense layout when suggested and related messages are available

Browse Source
This commit is contained in:
Kris 2018-11-14 11:01:50 -05:00
parent ea075fa4f7
commit 1e15c16f77
2 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/discourse/templates/topic.hbs
View File

@ -283,13 +283,14 @@
{{/if}} {{/if}}
{{plugin-outlet name="topic-above-suggested" args=(hash model=model)}} {{plugin-outlet name="topic-above-suggested" args=(hash model=model)}}
<div class="{{if model.relatedMessages.length 'related-messages-wrapper'}}{{if model.suggestedTopics.length 'suggested-topics-wrapper'}}">
{{#if model.relatedMessages.length}} {{#if model.relatedMessages.length}}
{{related-messages topic=model}} {{related-messages topic=model}}
{{/if}} {{/if}}
{{#if model.suggestedTopics.length}} {{#if model.suggestedTopics.length}}
{{suggested-topics topic=model}} {{suggested-topics topic=model}}
{{/if}} {{/if}}
</div>
{{/if}} {{/if}}
{{/conditional-loading-spinner}} {{/conditional-loading-spinner}}

38
app/assets/stylesheets/common/base/topic.scss
View File

@ -167,6 +167,44 @@ a.badge-category {
max-width: 757px; max-width: 757px;
} }
@include breakpoint(medium, min-width) {
.suggested-topics-wrapper.related-messages-wrapper {
display: flex;
width: 100%;
.suggested-topics,
.related-messages {
thead {
display: none;
}
.posts,
.age {
width: 45px;
}
.views {
display: none;
}
.posters {
width: 60px;
a {
display: none;
&:first-of-type,
&:last-of-type {
display: inline;
}
}
}
}
#suggested-topics {
order: 1;
margin-right: 1em;
}
#related-messages {
order: 2;
margin-left: 1em;
}
}
}
// Target the .badge-category text, the bullet icon needs to maintain `display: block` // Target the .badge-category text, the bullet icon needs to maintain `display: block`
.suggested-topics h3 .badge-wrapper.bullet span.badge-category, .suggested-topics h3 .badge-wrapper.bullet span.badge-category,
.suggested-topics h3 .badge-wrapper.box span, .suggested-topics h3 .badge-wrapper.box span,