github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-28 01:14:56 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Make extra info header properly responseive

Browse Source 
The current solution assumed the width of the logo which caused
the user info and icons bar to shift down when the title is shown.

This fixes that by making the extra info wrapper responsive
and use up the full width, not needing manual breakpoints.
This commit is contained in:
Jacob Chapel 2014-09-11 01:21:19 -07:00
parent 0f2e8a65e2
commit 0d0d9adb80
2 changed files with 31 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app/assets/javascripts/discourse/templates/header.js.handlebars
View File

@ -3,35 +3,6 @@
{{home-logo minimized=showExtraInfo}}
{{#if showExtraInfo}}
<div class="extra-info-wrapper">
<div class="extra-info">
{{#if showStarButton}}
<a {{bind-attr class=":star topic.starred:starred"}} {{action toggleStar}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
{{/if}}
<h1>
{{#if showPrivateMessageGlyph}}
<span class="private-message-glyph">{{fa-icon envelope}}</span>
{{/if}}
{{#if topic.category.parentCategory}}
{{bound-category-link topic.category.parentCategory}}
{{/if}}
{{bound-category-link topic.category}}
{{#if topic.details.loaded}}
{{topic-status topic=topic}}
<a class='topic-link' href='{{unbound topic.url}}' {{action jumpToTopPost}}>{{{topic.fancy_title}}}</a>
{{else}}
{{#if topic.errorLoading}}
{{topic.errorTitle}}
{{else}}
{{i18n topic.loading}}
{{/if}}
{{/if}}
</h1>
</div>
</div>
{{/if}}
<div class='panel clearfix'>
{{#unless currentUser}}
{{#if showSignUpButton}}
@ -120,6 +91,36 @@
{{render "userDropdown"}}
</div>
{{#if showExtraInfo}}
<div class="extra-info-wrapper">
<div class="extra-info">
{{#if showStarButton}}
<a {{bind-attr class=":star topic.starred:starred"}} {{action toggleStar}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
{{/if}}
<h1>
{{#if showPrivateMessageGlyph}}
<span class="private-message-glyph">{{fa-icon envelope}}</span>
{{/if}}
{{#if topic.category.parentCategory}}
{{bound-category-link topic.category.parentCategory}}
{{/if}}
{{bound-category-link topic.category}}
{{#if topic.details.loaded}}
{{topic-status topic=topic}}
<a class='topic-link' href='{{unbound topic.url}}' {{action jumpToTopPost}}>{{{topic.fancy_title}}}</a>
{{else}}
{{#if topic.errorLoading}}
{{topic.errorTitle}}
{{else}}
{{i18n topic.loading}}
{{/if}}
{{/if}}
</h1>
</div>
</div>
{{/if}}
</div>
</div>

15
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -522,20 +522,7 @@ iframe {
}
.extra-info-wrapper {
float: left;
width: 78%;
@media all and (max-width : 1080px) {
width: 75%;
}
@media all and (max-width : 870px) {
width: 70%;
}
@media all and (max-width : 725px) {
width: 61%;
}
overflow: hidden;
.topic-statuses {
i { color: $header_primary; }