Bug 627504, Base templates for mobile and homepage

This commit is contained in:
Matt Claypotch 2011-01-27 11:38:48 -08:00
Родитель a81f6d7489
Коммит 69f52d332a
9 изменённых файлов: 558 добавлений и 18 удалений

Просмотреть файл

@ -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>
<ul>
{% for addon in popular %}
<li>{{ addon.name }}</li>
{% endfor %}
</ul>
{% endif %}
</body>
{% 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>
<li class="selected">{{ _('Featured') }}</li>
<li>{{ _('Popular') }}</li>
<li>{{ _('Categories') }}</li>
</ul>
</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);
});
});

Просмотреть файл

@ -36,4 +36,46 @@ $.fn.vtruncate = function(opts) {
}
});
return this;
};
$.fn.htruncate = function(opts) {
opts = opts || {};
var showTitle = opts.showTitle || false,
truncText = opts.truncText || "&hellip;",
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&amp;WT.js=No&amp;WT.tv=8.6.2" />
</noscript>
{# End Webtrends #}
</body>
</html>