Merge pull request #3272 from riking/featured-css

FEATURE: Style 'Feature Topic' dialog
This commit is contained in:
Régis Hanol 2015-03-16 09:44:46 +01:00
commit 886e325c98
2 changed files with 98 additions and 47 deletions

View File

@ -1,60 +1,81 @@
<div class="modal-body">
<div class="modal-body feature-topic">
{{#if pinned_at}}
<div>
{{d-button action="unpin" icon="thumb-tack" label="topic.actions.unpin" class="btn-primary btn-small"}}
<p>{{{unPinMessage}}}</p>
{{#if pinned_globally}}
<p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount}}}
{{/loading-spinner}}
</p>
{{else}}
<div class="feature-section">
<div class="button">
{{d-button action="unpin" icon="thumb-tack" label="topic.actions.unpin" class="btn-primary"}}
</div>
<div class="desc">
<p>{{{unPinMessage}}}</p>
{{#if pinned_globally}}
<p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount}}}
{{/loading-spinner}}
</p>
{{else}}
<p>{{i18n "topic.feature_topic.pin_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{alreadyPinnedMessage}}}
{{/loading-spinner}}
</p>
{{/if}}
</div>
</div>
{{else}}
<div class="feature-section">
<div class="button">
{{d-button action="pin" icon="thumb-tack" label="topic.actions.pin" class="btn-primary"}}
</div>
<div class="desc">
<p>{{{pinMessage}}}</p>
<p>{{i18n "topic.feature_topic.pin_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{alreadyPinnedMessage}}}
{{/loading-spinner}}
</p>
{{/if}}
</div>
</div>
{{else}}
<div>
{{d-button action="pin" icon="thumb-tack" label="topic.actions.pin" class="btn-primary btn-small"}}
<p>{{{pinMessage}}}</p>
<p>{{i18n "topic.feature_topic.pin_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{alreadyPinnedMessage}}}
{{/loading-spinner}}
</p>
</div>
<div>
{{d-button action="pinGlobally" icon="thumb-tack" label="topic.actions.pin_globally" class="btn-primary btn-small"}}
<p>{{i18n "topic.feature_topic.pin_globally"}}</p>
<p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount}}}
{{/loading-spinner}}
</p>
<hr>
<div class="feature-section">
<div class="button">
{{d-button action="pinGlobally" icon="thumb-tack" label="topic.actions.pin_globally" class="btn-primary"}}
</div>
<div class="desc">
<p>{{i18n "topic.feature_topic.pin_globally"}}</p>
<p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount}}}
{{/loading-spinner}}
</p>
</div>
</div>
{{/if}}
<div>
{{#if isBanner}}
{{d-button action="removeBanner" icon="bullhorn" label="topic.actions.remove_banner" class="btn-primary btn-small"}}
<p>{{i18n "topic.feature_topic.remove_banner"}}</p>
{{else}}
{{d-button action="makeBanner" icon="bullhorn" label="topic.actions.make_banner" class="btn-primary btn-small"}}
<p>{{i18n "topic.feature_topic.make_banner"}}</p>
{{/if}}
<p>{{i18n "topic.feature_topic.banner_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{i18n "topic.feature_topic.already_banner" count=bannerCount}}}
{{/loading-spinner}}
</p>
<hr>
<div class="feature-section">
<div class="button">
{{#if isBanner}}
{{d-button action="removeBanner" icon="bullhorn" label="topic.actions.remove_banner" class="btn-primary"}}
{{else}}
{{d-button action="makeBanner" icon="bullhorn" label="topic.actions.make_banner" class="btn-primary"}}
{{/if}}
</div>
<div class="desc">
{{#if isBanner}}
<p>{{i18n "topic.feature_topic.remove_banner"}}</p>
{{else}}
<p>{{i18n "topic.feature_topic.make_banner"}}</p>
{{/if}}
<p>{{i18n "topic.feature_topic.banner_note"}}</p>
<p>
{{#loading-spinner size="small" condition=loading}}
{{{i18n "topic.feature_topic.already_banner" count=bannerCount}}}
{{/loading-spinner}}
</p>
</div>
</div>
</div>
<div class="modal-footer">

View File

@ -29,3 +29,33 @@
}
}
}
.modal-body.feature-topic .feature-section {
display: block;
.button {
width: 33%;
display: inline-block;
}
.desc {
display: inline-block;
vertical-align: middle;
max-width: 60%;
margin-left: 10px;
p {
margin: 10px 0;
}
}
}
.mobile-view .feature-topic .feature-section {
.button {
width: auto;
display: block;
margin: 0 10px;
}
.desc {
display: block;
clear: both;
max-width: 90%;
margin: 0 10px;
}
}