FIX: Make extra info header properly responseive

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

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>

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; }