detail page work
This commit is contained in:
Matt Claypotch
Родитель
1d9cd00b2e
Коммит
0d1e184cfa
|
|
@ -93,8 +93,12 @@ h1 .num {
|
|||
}
|
||||
|
||||
#upsell {
|
||||
background: @yellow;
|
||||
margin-top: 30px;
|
||||
.fat-button;
|
||||
.highlight;
|
||||
text-align: left;
|
||||
margin: 20px 0;
|
||||
padding: 10px 33px 10px 52px;
|
||||
position: relative;
|
||||
h3 {
|
||||
color: darken(@yellow, 75%);
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -123,14 +127,54 @@ h1 .num {
|
|||
display: block;
|
||||
margin-right: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
vertical-align: top;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
max-height: 32px;
|
||||
max-width: 32px;
|
||||
}
|
||||
.prose {
|
||||
color: @medium-gray;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&:after {
|
||||
background: @arrow-src 100% 50% no-repeat;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 14px;
|
||||
opacity: .8;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 10px;
|
||||
width: 13px;
|
||||
}
|
||||
.avail, .name, .icon {
|
||||
opacity: .85;
|
||||
}
|
||||
&:hover {
|
||||
border-color: @bg-gray;
|
||||
text-decoration: none;
|
||||
&:after, .avail, .name, .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.avail, .name {
|
||||
.ellipsis;
|
||||
display: block;
|
||||
}
|
||||
.avail {
|
||||
color: @green;
|
||||
font-weight: 400;
|
||||
line-height: 12px;
|
||||
margin-bottom: -4px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: -4px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl #upsell {
|
||||
|
|
@ -595,6 +639,8 @@ h1 .num {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: @4col) {
|
||||
#page > .description {
|
||||
border-width: 1px 0;
|
||||
|
|
@ -624,56 +670,6 @@ h1 .num {
|
|||
}
|
||||
}
|
||||
}
|
||||
#upsell.narrow {
|
||||
.highlight;
|
||||
margin: 20px 10px 0;
|
||||
padding: 10px 33px 10px 52px;
|
||||
position: relative;
|
||||
&:after {
|
||||
background: @arrow-src 100% 50% no-repeat;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 14px;
|
||||
opacity: .8;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 10px;
|
||||
width: 13px;
|
||||
}
|
||||
.avail, .name, .icon {
|
||||
opacity: .85;
|
||||
}
|
||||
&:hover {
|
||||
border-color: @bg-gray;
|
||||
text-decoration: none;
|
||||
&:after, .avail, .name, .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.avail, .name {
|
||||
.ellipsis;
|
||||
display: block;
|
||||
}
|
||||
.avail {
|
||||
color: @green;
|
||||
font-weight: 400;
|
||||
line-height: 12px;
|
||||
margin-bottom: -4px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: -4px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.icon {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
max-height: 32px;
|
||||
max-width: 32px;
|
||||
}
|
||||
}
|
||||
.downloads {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
@import 'lib';
|
||||
|
||||
.infobox {
|
||||
border-bottom: 1px solid #abb4ba;
|
||||
border-top: 1px solid #edf0f1;
|
||||
> div {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.not-rated {
|
||||
color: @medium-gray;
|
||||
}
|
||||
.average-rating {
|
||||
width: 100%;
|
||||
}
|
||||
ul {
|
||||
a {
|
||||
.fat-button;
|
||||
}
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
.border-box;
|
||||
float: left;
|
||||
margin: 10px 0 0;
|
||||
min-height: inherit;
|
||||
padding-right: 5px;
|
||||
width: 50%;
|
||||
&:nth-child(2n) {
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
dl {
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
dt, dd {
|
||||
color: @text;
|
||||
display: inline-block;
|
||||
}
|
||||
dt {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.fatbutton {
|
||||
.fat-button;
|
||||
}
|
||||
|
|
@ -146,58 +146,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.featured, .popular {
|
||||
&.slider {
|
||||
.controls {
|
||||
.next-page, .prev-page {
|
||||
height: 225px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
.promo-slider {
|
||||
height: 230px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured {
|
||||
background: #60747F;
|
||||
.grain;
|
||||
color: @white;
|
||||
&.slider {
|
||||
border-bottom: 1px solid #666;
|
||||
}
|
||||
a {
|
||||
color: lighten(@text, 60%);
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popular {
|
||||
h2 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
a {
|
||||
color: @text;
|
||||
&:hover {
|
||||
color: darken(@text, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popular, .categories {
|
||||
h2 {
|
||||
padding-top: 20px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.categories {
|
||||
background: @pale-bg;
|
||||
.controls {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.icon {
|
||||
height: 64px;
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ CSS = {
|
|||
'css/mkt/abuse.less',
|
||||
'css/mkt/slider.less',
|
||||
'css/mkt/menu.less',
|
||||
'css/mkt/infobox.less',
|
||||
'css/mkt/promo-grid.less',
|
||||
'css/mkt/overlay.less',
|
||||
'css/mkt/search.less',
|
||||
|
|
|
|||
|
|
@ -37,62 +37,8 @@
|
|||
{{ notification(product, amo, is_dev) }}
|
||||
{% else %}
|
||||
<section class="product-details">
|
||||
<div class="visual">
|
||||
<img src="{{ product.get_icon_url(64) }}">
|
||||
</div>
|
||||
<div class="vitals c">
|
||||
<h1 class="oneline">
|
||||
{% if 'id' in request.GET %}
|
||||
<b class="num">#{{ product.id }}</b>
|
||||
{% endif %}
|
||||
{{ product.name }}
|
||||
</h1>
|
||||
{% if product.listed_authors %}
|
||||
<h2 class="authors oneline wide">{{ users_list(product.listed_authors, size=3) }}</h2>
|
||||
<h2 class="authors oneline narrow">{{ product.listed_authors[0]|user_link }}</h2>
|
||||
{% endif %}
|
||||
{% set categories = product.all_categories %}
|
||||
{% if is_author and product.is_premium() and product.premium %}
|
||||
<p class="pricetag oneline faked-purchase">
|
||||
<span class="price">{{ product.premium.get_price_locale() }}</span>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if cats %}
|
||||
<p class="cats wide">
|
||||
{% for category in cats %}
|
||||
<a href="{{ category.get_url_path() }}">
|
||||
{{ category }}</a>{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
<p class="downloads oneline">
|
||||
{{ product|weekly_downloads }}
|
||||
</p>
|
||||
{{ device_list(product) }}
|
||||
</div>
|
||||
{{ market_tile(product) }}
|
||||
<div class="actions">
|
||||
{% if product.is_public() %}
|
||||
{% if product.has_author(amo_user) %}
|
||||
{{ market_button(product, 'developer') }}
|
||||
{% else %}
|
||||
{{ market_button(product) }}
|
||||
{% endif %}
|
||||
{% if request.amo_user %}
|
||||
{% if purchased %}
|
||||
<span class="approval checkmark purchased">
|
||||
<b>{{ _('Purchased') }}</b></span>
|
||||
{% elif product.can_purchase() %}
|
||||
{% if user_data(amo_user)['pre_auth'] %}
|
||||
<span class="approval checkmark">
|
||||
<b>{{ _('PayPal pre-approval') }}</b></span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% elif product.has_author(amo_user) %}
|
||||
{{ market_button(product, 'developer') }}
|
||||
{% elif is_reviewer %}
|
||||
{{ market_button(product) }}
|
||||
{% endif %}
|
||||
{% if is_dev %}
|
||||
<p><a href="{{ product.get_dev_url() }}" class="button manage wide">
|
||||
{{ _('Manage') }}</a></p>
|
||||
|
|
@ -104,6 +50,26 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% if product.all_previews %}
|
||||
<section class="previews slider full">
|
||||
<div class="alt-slider">
|
||||
<div class="controls">
|
||||
<a href="#" class="prev-page"></a>
|
||||
<a href="#" class="next-page"></a>
|
||||
</div>
|
||||
<ul class="content">
|
||||
{%- for preview in product.all_previews -%}
|
||||
<li>
|
||||
<a class="screenshot thumbnail arrow{{ ' video' if preview.filetype == 'video/webm' }}"
|
||||
href="{{ preview.image_url }}" title="{{ preview.caption }}">
|
||||
<div class="img" style="background-image:url({{ preview.thumbnail_url }})"></div>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{{ notification(product, amo, is_dev) }}
|
||||
|
||||
|
|
@ -133,95 +99,27 @@
|
|||
</section>
|
||||
<div id="purchased-message"></div>
|
||||
|
||||
{% set upsell = product.upsell %}
|
||||
{% if upsell %}
|
||||
{% set prm = upsell.premium_addon %}
|
||||
{% if prm %}
|
||||
<section id="upsell" class="notification-box wide c">
|
||||
<div class="upsell">
|
||||
<h3>{{ _('Premium version available') }}</h3>
|
||||
<a href="{{ prm.get_url_path()|urlparams(src='mkt-detail-upsell') }}">
|
||||
<img class="icon" src="{{ prm.get_icon_url(64) }}">
|
||||
<span class="name">{{ prm.name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<a class="button special" href="{{ prm.get_url_path()|urlparams(src='mkt-detail-upsell') }}">
|
||||
{{ _('Read More') }}
|
||||
</a>
|
||||
<div class="details">
|
||||
<div class="prose">{{ upsell.text|nl2br }}</div>
|
||||
<div class="vitals">
|
||||
<span class="vital price">{{ prm.get_price() }}</span>
|
||||
<span class="vital downloads">
|
||||
{{ prm|weekly_downloads }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<a id="upsell" class="narrow"
|
||||
href="{{ prm.get_url_path()|urlparams(src='mkt-detail-upsell') }}">
|
||||
<span class="avail">{{ _('Premium version available') }}</span>
|
||||
<img class="icon" src="{{ prm.get_icon_url(16) }}">
|
||||
<span class="name">{{ prm.name }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<section class="description">
|
||||
{% if product.description %}
|
||||
<a href="#" class="collapse wide">{{ _('More…') }}</a>
|
||||
{% endif %}
|
||||
<p class="summary">
|
||||
{{ product.summary|nl2br }}
|
||||
{% if product.description %}
|
||||
<a href="#" class="collapse narrow">{{ _('More…') }}</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% if product.description or product.developer_comments %}
|
||||
<div class="collapse">
|
||||
<section class="description infobox full">
|
||||
<div>
|
||||
<p class="summary">
|
||||
{{ product.summary|nl2br }}
|
||||
{% if product.description %}
|
||||
<div class="more">{{ product.description|nl2br }}</div>
|
||||
<a href="#" class="collapse narrow">{{ _('More…') }}</a>
|
||||
{% endif %}
|
||||
{% if product.developer_comments %}
|
||||
<h3>{{ _('Developer Comments') }}</h3>
|
||||
<div class="developer-comments">{{ product.developer_comments }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
{% if product.all_previews %}
|
||||
<section class="previews slider full">
|
||||
<div class="alt-slider">
|
||||
<div class="controls">
|
||||
<a href="#" class="prev-page"></a>
|
||||
<a href="#" class="next-page"></a>
|
||||
</p>
|
||||
{% if product.description or product.developer_comments %}
|
||||
<div class="collapse">
|
||||
{% if product.description %}
|
||||
<div class="more">{{ product.description|nl2br }}</div>
|
||||
{% endif %}
|
||||
{% if product.developer_comments %}
|
||||
<h3>{{ _('Developer Comments') }}</h3>
|
||||
<div class="developer-comments">{{ product.developer_comments }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<ul class="content">
|
||||
{%- for preview in product.all_previews -%}
|
||||
<li>
|
||||
<a class="screenshot thumbnail arrow{{ ' video' if preview.filetype == 'video/webm' }}"
|
||||
href="{{ preview.image_url }}" title="{{ preview.caption }}">
|
||||
<div class="img" style="background-image:url({{ preview.thumbnail_url }})"></div>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<div id="lightbox">
|
||||
<section>
|
||||
<div class="content">
|
||||
<a class="close" href="#">{{ _('Close') }}</a>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<a href="#" class="control next">»</a>
|
||||
<a href="#" class="control prev">«</a>
|
||||
<div class="caption"><span></span></div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<section id="support" class="support c">
|
||||
|
||||
|
|
@ -277,46 +175,59 @@
|
|||
|
||||
{# TODO: When we retool desktop/tablet to look like mobile, we will for sure
|
||||
pare this down. But until then... code duplication :( #}
|
||||
<ul class="narrow c">
|
||||
{% if False %}
|
||||
{# TODO: Link to Request Support page if I've purchased (up front or in-app). What about for free?
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=760287 #}
|
||||
<li><a href="" class="arrow">{{ _('Support') }}</a></li>
|
||||
<ul class="narrow c">
|
||||
{% if False %}
|
||||
{# TODO: Link to Request Support page if I've purchased (up front or in-app). What about for free?
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=760287 #}
|
||||
<li><a href="" class="arrow">{{ _('Support') }}</a></li>
|
||||
{% endif %}
|
||||
{% if product.support_email %}
|
||||
<li class="support-email">
|
||||
{{ emaillink(product.support_email.localized_string,
|
||||
_('Support Email')) }}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if product.support_url %}
|
||||
<li class="support-url">
|
||||
<a href="{{ product.support_url|external_url }}">
|
||||
{{ _('Support Site') }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if product.homepage %}
|
||||
<li><a href="{{ product.homepage|external_url }}">{{ _('Homepage') }}</a></li>
|
||||
{% endif %}
|
||||
{% if product.is_public() or is_reviewer %}
|
||||
{% if product.privacy_policy %}
|
||||
<li><a href="{{ product.get_detail_url('privacy') }}">
|
||||
{{ _('Privacy Policy') }}</a></li>
|
||||
{% endif %}
|
||||
{% if product.support_email %}
|
||||
<li class="support-email">
|
||||
{{ emaillink(product.support_email.localized_string,
|
||||
_('Support Email')) }}
|
||||
</li>
|
||||
{% if waffle.switch('app-stats') and product.public_stats %}
|
||||
<li><a href="{{ url('mkt.stats.overview', product.app_slug) }}">
|
||||
{{ _('Statistics') }}</a></li>
|
||||
{% endif %}
|
||||
{% if product.support_url %}
|
||||
<li class="support-url">
|
||||
<a href="{{ product.support_url|external_url }}">
|
||||
{{ _('Support Site') }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if product.homepage %}
|
||||
<li><a href="{{ product.homepage|external_url }}">{{ _('Homepage') }}</a></li>
|
||||
{% endif %}
|
||||
{% if product.is_public() or is_reviewer %}
|
||||
{% if product.privacy_policy %}
|
||||
<li><a href="{{ product.get_detail_url('privacy') }}">
|
||||
{{ _('Privacy Policy') }}</a></li>
|
||||
{% endif %}
|
||||
{% if waffle.switch('app-stats') and product.public_stats %}
|
||||
<li><a href="{{ url('mkt.stats.overview', product.app_slug) }}">
|
||||
{{ _('Statistics') }}</a></li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if abuse_form %}
|
||||
<li><a href="{{ product.get_detail_url('abuse') }}">
|
||||
{{ _('Report Abuse') }}</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<dl class="narrow">
|
||||
<dt>{{ _('Published') }}</dt>
|
||||
<dd>{{ product.created|timelabel }}</dd>
|
||||
</dl>
|
||||
{% endif %}
|
||||
{% if abuse_form %}
|
||||
<li><a href="{{ product.get_detail_url('abuse') }}">
|
||||
{{ _('Report Abuse') }}</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% set upsell = product.upsell %}
|
||||
{% if upsell %}
|
||||
{% set prm = upsell.premium_addon %}
|
||||
{% if prm %}
|
||||
<a id="upsell" class="narrow"
|
||||
href="{{ prm.get_url_path()|urlparams(src='mkt-detail-upsell') }}">
|
||||
<span class="avail">{{ _('Premium version available') }}</span>
|
||||
<img class="icon" src="{{ prm.get_icon_url(16) }}">
|
||||
<span class="name">{{ prm.name }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<dl class="narrow">
|
||||
<dt>{{ _('Published') }}</dt>
|
||||
<dd>{{ product.created|timelabel }}</dd>
|
||||
</dl>
|
||||
|
||||
<ul class="wide">
|
||||
{% if product.support_email or product.support_url %}
|
||||
|
|
@ -379,6 +290,5 @@
|
|||
{% endif %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -14,5 +14,9 @@
|
|||
{% if waffle.switch('ratings') %}
|
||||
<div class="rating vital">{{ product.average_rating|float|stars }}</div>
|
||||
{% endif %}
|
||||
{{ market_button(product) }}
|
||||
{% if product.has_author(request.amo_user) %}
|
||||
{{ market_button(product, 'developer') }}
|
||||
{% else %}
|
||||
{{ market_button(product) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -149,6 +149,20 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- screenshot lightbox -->
|
||||
<div id="lightbox">
|
||||
<section>
|
||||
<div class="content">
|
||||
<a class="close" href="#">{{ _('Close') }}</a>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<a href="#" class="control next">»</a>
|
||||
<a href="#" class="control prev">«</a>
|
||||
<div class="caption"><span></span></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<svg height="0">
|
||||
<mask id="tabMaskStart" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
|
||||
<rect width="1" height="1" x="0" y="0.5" fill="white" />
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче