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:
parent
0f2e8a65e2
commit
0d0d9adb80
|
@ -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>
|
||||
|
||||
|
|
|
@ -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; }
|
||||
|
|
Loading…
Reference in New Issue