Bug 627504, Base templates for mobile and homepage
This commit is contained in:
Matt Claypotch
Родитель
a81f6d7489
Коммит
69f52d332a
|
|
@ -130,6 +130,13 @@ def addon_listing_items_compact(context, addons, boundary=0,
|
|||
return new_context(**locals())
|
||||
|
||||
|
||||
@register.inclusion_tag('addons/listing/items_mobile.html')
|
||||
@jinja2.contextfunction
|
||||
def addon_listing_items_mobile(context, addons, show_date=False,
|
||||
src=None):
|
||||
return new_context(**locals())
|
||||
|
||||
|
||||
@register.inclusion_tag('addons/listing_header.html')
|
||||
@jinja2.contextfunction
|
||||
def addon_listing_header(context, url_base, sort_opts, selected):
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
{% cache addons %}
|
||||
{% for addon in addons %}
|
||||
<li class="item">
|
||||
<a href="{{ addon.get_url_path() }}">
|
||||
<img class="icon" width="32" height="32" src="{{ addon.icon_url }}">
|
||||
<h3>{{ addon.name }}</h3>
|
||||
<details>
|
||||
<span class="desc">{{ addon.summary|strip_html()|truncate(250) }}</span>
|
||||
{% with num=addon.total_reviews %}
|
||||
{% if num %}
|
||||
{{ addon.average_rating|float|stars }}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</details>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endcache %}
|
||||
|
|
@ -1,19 +1,61 @@
|
|||
<body>
|
||||
{% if featured %}
|
||||
<h1>Featured</h1>
|
||||
<ul>
|
||||
{% for addon in featured %}
|
||||
<li>{{ addon.name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% extends "mobile/base.html" %}
|
||||
|
||||
{% if popular %}
|
||||
<h1>Popular</h1>
|
||||
{% block title %}{{ _('Add-ons for {0}')|f(request.APP.pretty) }}{% endblock %}
|
||||
|
||||
{% block page %}
|
||||
<header id="home-header">
|
||||
<div class="menu">
|
||||
{# TODO build out the menu #}
|
||||
</div>
|
||||
<hgroup>
|
||||
<h1 class="site-title">
|
||||
{% set appicon = 'firefox' if request.APP == amo.MOBILE else request.APP.short %}
|
||||
<a href="{{ url('home') }}"
|
||||
title="{{ _('Return to the {0} Add-ons homepage')|f(request.APP.pretty) }}">
|
||||
<img alt="{{ request.APP.pretty }}" src="{{ MEDIA_URL + 'img/zamboni/app_icons/' + appicon + '.png' }}">
|
||||
{{ _('Mobile Add-ons') }}
|
||||
</a>
|
||||
</h1>
|
||||
<h2>{{ _('Easy ways to personalize.') }}</h2>
|
||||
</hgroup>
|
||||
{# TODO move this to its own template #}
|
||||
<form id="search">
|
||||
<input name="q" placeholder="{{ _('Search') }}" type="search">
|
||||
<input type="submit" value="">
|
||||
</form>
|
||||
</header>
|
||||
<section id="content">
|
||||
<nav class="tabs">
|
||||
<ul>
|
||||
{% for addon in popular %}
|
||||
<li>{{ addon.name }}</li>
|
||||
{% endfor %}
|
||||
<li class="selected">{{ _('Featured') }}</li>
|
||||
<li>{{ _('Popular') }}</li>
|
||||
<li>{{ _('Categories') }}</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
</body>
|
||||
</nav>
|
||||
<div class="addon-listing addon-listing-popular">
|
||||
<ul id="list-popular" class="listview">
|
||||
{{ addon_listing_items_mobile(popular, show_date=key,
|
||||
src='homepagebrowse') }}
|
||||
<li><a>
|
||||
{{ _('View all Featured add-ons') }}
|
||||
</a></li>
|
||||
</ul> {# listing-{{ key }} #}
|
||||
</div> {# addon-listing #}
|
||||
<h2>{{ _('More Add-ons') }}</h2>
|
||||
<ul id="list-popular" class="listview">
|
||||
{# TODO link up these pages when they're present #}
|
||||
<li><a>
|
||||
{{ _('Highest Rated') }}
|
||||
</a></li>
|
||||
<li><a>
|
||||
{{ _('Newest') }}
|
||||
</a></li>
|
||||
<li><a>
|
||||
{{ _('Collections') }}
|
||||
</a></li>
|
||||
</ul> {# listing-{{ key }} #}
|
||||
</section>
|
||||
<footer>
|
||||
{% include "includes/lang_switcher.html" %}
|
||||
</footer>
|
||||
{% endblock page %}
|
||||
|
|
@ -0,0 +1,351 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
/* end meyer reset */
|
||||
|
||||
/** Clearfix */
|
||||
.listview li a:after,
|
||||
header:after,
|
||||
section:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* TYPOGRAPHY */
|
||||
/************************************/
|
||||
|
||||
h1, h2, h3, .copy {
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
#content h2 {
|
||||
font-style: italic;
|
||||
margin-left: 14px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* GRADIENTS */
|
||||
/************************************/
|
||||
|
||||
/* 'Mozilla' */
|
||||
#home-header .menu {
|
||||
background: #33589f;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left bottom,
|
||||
left top,
|
||||
from(rgb(42,65,135)),
|
||||
to(rgb(59,105,177))
|
||||
);
|
||||
background: -moz-linear-gradient(
|
||||
center bottom,
|
||||
rgb(42,65,135) 0%,
|
||||
rgb(59,105,177) 100%
|
||||
);
|
||||
background: linear-gradient(
|
||||
center bottom,
|
||||
rgb(42,65,135) 0%,
|
||||
rgb(59,105,177) 100%
|
||||
);
|
||||
}
|
||||
|
||||
footer:before,
|
||||
.tabs {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAEElEQVQIHWP8//8/Aw7wHwBR6AP+G53o6QAAAABJRU5ErkJggg=='),
|
||||
-moz-linear-gradient(#fff, #dcedfd);
|
||||
}
|
||||
|
||||
html {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAEElEQVQIHWP8//8/Aw7wHwBR6AP+G53o6QAAAABJRU5ErkJggg=='),
|
||||
-moz-linear-gradient(#dcedfd 0, #fff 120px);
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* GENERAL */
|
||||
/************************************/
|
||||
|
||||
|
||||
#content {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* HEADER */
|
||||
/************************************/
|
||||
#home-header {
|
||||
margin: 0 14px;
|
||||
}
|
||||
#home-header .menu {
|
||||
height: 27px;
|
||||
padding: 8px 10px;
|
||||
-moz-border-radius: 0 0 6px 6px;
|
||||
-moz-box-shadow: 0 -3px rgba(0,0,0,.2) inset;
|
||||
}
|
||||
#home-header hgroup {
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
padding-left: 80px;
|
||||
}
|
||||
#home-header h1 {
|
||||
padding-top: 4px;
|
||||
}
|
||||
.site-title img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.site-title a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-family: Georgia,
|
||||
text-transform: uppercase;
|
||||
font-size: 36px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.site-title span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* LISTVIEWS */
|
||||
/************************************/
|
||||
|
||||
.listview {
|
||||
margin: 14px 14px 0;
|
||||
-moz-border-radius: 6px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f4f4f4;
|
||||
background-image: -moz-linear-gradient(#fff, rgba(255,255,255,0) 12px);
|
||||
-moz-box-shadow: 0 -3px rgba(0,0,0,.1) inset;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.listview li {
|
||||
border-top: 1px solid #ccc;
|
||||
font-size: 1em;
|
||||
}
|
||||
.listview li:first-child {
|
||||
border: 0;
|
||||
}
|
||||
.listview li > a {
|
||||
padding: 14px 10px;
|
||||
color: #444;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
.listview .item > a{
|
||||
padding: 10px;
|
||||
font-size: 1em;
|
||||
}
|
||||
.listview li > a:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
background: url(../../img/zamboni/mobile/arrow.svg) no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.listview li .icon {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.listview .item {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.listview .item h3 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.listview .item .desc {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.listview .item details {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* SEARCH */
|
||||
/************************************/
|
||||
|
||||
#search {
|
||||
margin-top: 8px;
|
||||
display: -moz-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search input[type=search] {
|
||||
-moz-box-flex: 1;
|
||||
height: 41px;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
margin: -1px 8px 0 0;
|
||||
}
|
||||
|
||||
#search input[type=submit] {
|
||||
margin: 0;
|
||||
height: 45px;
|
||||
width: 56px;
|
||||
background-image: -moz-linear-gradient(#83c53c, #4f9c19);
|
||||
border: 0;
|
||||
-moz-box-shadow: 0 -3px rgba(0,0,0,.1) inset;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* TABS */
|
||||
/************************************/
|
||||
|
||||
.tabs {
|
||||
border-bottom: 1px solid #a2bbdc;
|
||||
height: 36px;
|
||||
font: 16px Georgia, serif;
|
||||
padding: 14px 14px 0;
|
||||
box-shadow: 0 -1px 1px rgba(0,0,0,.1) inset;
|
||||
}
|
||||
.tabs ul {
|
||||
display: -moz-box;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tabs ul li {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
-moz-box-flex: 1;
|
||||
color: #447bc4;
|
||||
border: 0;
|
||||
padding: 11px 8px 6px 11px;
|
||||
}
|
||||
.tabs ul li.selected {
|
||||
background: white;
|
||||
-moz-box-flex: 1;
|
||||
color: #444;
|
||||
box-shadow: 0 -1px 1px rgba(0,0,0,.1);
|
||||
border: 1px solid #a2bbdc;
|
||||
border-width: 1px 1px 0 1px;
|
||||
-moz-border-radius: 6px 6px 0 0;
|
||||
padding: 11px 8px 6px 11px;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* REVIEWS */
|
||||
/************************************/
|
||||
|
||||
.stars {
|
||||
text-indent:-5000px;
|
||||
background-image: url(../../img/amo2009/icons/stars.png);
|
||||
background-position: 0 50%;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 0.5em;
|
||||
width: 63px;
|
||||
display: block;
|
||||
}
|
||||
.stars-4 {
|
||||
background-position: -13px 50%;
|
||||
}
|
||||
.stars-3 {
|
||||
background-position: -26px 50%;
|
||||
}
|
||||
.stars-2 {
|
||||
background-position: -39px 50%;
|
||||
}
|
||||
.stars-1 {
|
||||
background-position: -52px 50%;
|
||||
}
|
||||
.stars-0 {
|
||||
background-position: -65px 50%;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* FOOTER */
|
||||
/************************************/
|
||||
|
||||
footer:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
box-shadow: 0 -2px rgba(0,0,0,.1) inset;
|
||||
}
|
||||
footer {
|
||||
font-family: "Droid Sans", sans-serif;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
margin-top: 30px;
|
||||
padding: 14px;
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
box-shadow: 0 2px rgba(0,0,0,.1) inset;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAABCAYAAAASC7TOAAAAFElEQVQIHWO0DZ3xnwELYOXgYwAAOHwCRjqu6SgAAAAASUVORK5CYII=');
|
||||
}
|
||||
footer select {
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon fill="#666666" points="2,0 10,8 2,16 0,14 6,8 0,2"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 162 B |
|
|
@ -0,0 +1,15 @@
|
|||
$(function() {
|
||||
$(window).bind("orientationchange", function(e) {
|
||||
$("details").htruncate({textEl: ".desc"});
|
||||
});
|
||||
$("details").htruncate({textEl: ".desc"});
|
||||
|
||||
$('form.go').change(function() { this.submit(); })
|
||||
.find('button').hide();
|
||||
|
||||
$('span.emaillink').each(function() {
|
||||
$(this).find('.i').remove();
|
||||
var em = $(this).text().split('').reverse().join('');
|
||||
$(this).prev('a').attr('href', 'mailto:' + em);
|
||||
});
|
||||
});
|
||||
|
|
@ -37,3 +37,45 @@ $.fn.vtruncate = function(opts) {
|
|||
});
|
||||
return this;
|
||||
};
|
||||
|
||||
$.fn.htruncate = function(opts) {
|
||||
opts = opts || {};
|
||||
var showTitle = opts.showTitle || false,
|
||||
truncText = opts.truncText || "…",
|
||||
textEl = opts.textEl || false;
|
||||
split = [" ",""];
|
||||
this.each(function() {
|
||||
var $el = $(this),
|
||||
$tel = textEl ? $(textEl, $el) : $el,
|
||||
txt, cutoff,
|
||||
oldtext = $tel.attr("oldtext") || $tel.text();
|
||||
if ($tel.attr("oldtext")) {
|
||||
$tel.text(oldtext);
|
||||
}
|
||||
$tel.attr("oldtext", oldtext);
|
||||
for (var i in split) {
|
||||
delim = split[i];
|
||||
txt = oldtext.split(delim);
|
||||
cutoff = txt.length;
|
||||
var done = (this.scrollWidth - this.offsetWidth) < 2,
|
||||
chunk = Math.ceil(txt.length/2), oc=0, wid, delim;
|
||||
while (!done) {
|
||||
$tel.html(txt.slice(0,cutoff).join(delim)+truncText);
|
||||
wid = (this.scrollWidth - this.offsetWidth);
|
||||
if (wid < 2 && chunk == oc) {
|
||||
done = true;
|
||||
} else if (wid > 1) {
|
||||
cutoff -= chunk;
|
||||
} else {
|
||||
cutoff += chunk;
|
||||
}
|
||||
oc = chunk;
|
||||
chunk = Math.ceil(chunk/2);
|
||||
}
|
||||
}
|
||||
if (showTitle) {
|
||||
$tel.attr("title", oldtext);
|
||||
}
|
||||
});
|
||||
return this;
|
||||
};
|
||||
|
|
@ -373,6 +373,9 @@ MINIFY_BUNDLES = {
|
|||
'zamboni/editors': (
|
||||
'css/zamboni/editors.css',
|
||||
),
|
||||
'zamboni/mobile': (
|
||||
'css/zamboni/mobile.css',
|
||||
),
|
||||
},
|
||||
'js': {
|
||||
# JS files common to the entire site.
|
||||
|
|
@ -437,6 +440,12 @@ MINIFY_BUNDLES = {
|
|||
'zamboni/editors': (
|
||||
'js/zamboni/editors.js',
|
||||
),
|
||||
'zamboni/mobile': (
|
||||
'js/zamboni/jquery-1.4.2.min.js',
|
||||
'js/zamboni/jqmobile.js',
|
||||
'js/zamboni/truncation.js',
|
||||
'js/zamboni/mobile.js',
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ LANG }}" dir="{{ DIR }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}{{ _('Mozilla Add-ons') }}{% endblock %}</title>
|
||||
|
||||
<link rel="shortcut icon" type="image/x-icon"
|
||||
href="{{ MEDIA_URL}}img/favicon.ico">
|
||||
|
||||
{% block rss_feed %}{% endblock %}
|
||||
|
||||
{# L10n: {0} is an application, like Firefox. #}
|
||||
<link title="{{ _('{0} Add-ons')|f(APP.pretty) }}"
|
||||
rel="search" type="application/opensearchdescription+xml"
|
||||
href="{{ url('amo.opensearch') }}" />
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('zamboni/mobile') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}{% endblock %}
|
||||
</head>
|
||||
<body class="html-{{ DIR }} {{ request.APP.short }} lang-{{ LANG }} {% block bodyclass %}{% endblock %}"
|
||||
data-app="{{ request.APP.short }}"
|
||||
data-appname="{{ request.APP.pretty }}"
|
||||
data-appid="{{ request.APP.id }}"
|
||||
data-anonymous="{{ (not request.user.is_authenticated())|json }}"
|
||||
data-readonly="{{ settings.READ_ONLY|json }}"
|
||||
data-media-url="{{ MEDIA_URL }}"
|
||||
{% block bodyattrs %}{% endblock %}>
|
||||
|
||||
{% block page %}
|
||||
|
||||
{% block footer %}
|
||||
{% endblock footer %}
|
||||
{% endblock page %}
|
||||
|
||||
{# js #}
|
||||
{% block site_js %}
|
||||
{{ js('zamboni/mobile') }}
|
||||
{% endblock %}
|
||||
{% block js %}{% endblock %}
|
||||
{# Webtrends Stats Tracking #}
|
||||
<script defer src="{{ MEDIA_URL }}js/webtrends/webtrends-v0.1.js"></script>
|
||||
<noscript>
|
||||
<img id="DCSIMG" width="1" height="1"
|
||||
src="https://statse.webtrendslive.com/dcso6de4r0000082npfcmh4rf_4b1e/njs.gif?dcsuri=/nojavascript&WT.js=No&WT.tv=8.6.2" />
|
||||
</noscript>
|
||||
{# End Webtrends #}
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче