Permalink
Browse files

[bug 795880] Redesign article listing page

  • Loading branch information...
1 parent d11223d commit cc7338bb848a7c7bc6e916694e52956721ac63f0 @rehandalal rehandalal committed Oct 17, 2012
@@ -0,0 +1,58 @@
+{% extends 'mobile/base.html' %}
+
+{% set styles = ('products-mobile',) %}
+{% set classes = 'documents' %}
+{% set scripts = ('products-mobile',) %}
+
+{% block title %}{{ _(topic.title, 'DB: topics.Topic.title') }} | {{ _('{product} Help')|f(product=_(product.title, 'DB: products.Product.title')) }}{% endblock %}
+
+{% block header %}
+ <a href="{{ url('products.product', slug=product.slug) }}" class="return-button icon-sprite">Back</a>
+ <h1>{{ _(topic.title, 'DB: topics.Topic.title') }}</h1>
+{% endblock %}
+
+{% block content %}
+ <div class="filter-bar">
+ <span>{{ _('Showing') }}</span>
+ <div class="filter" id="select-filter">
+ {% if refine %}
+ {{ refine }}
+ {% else %}
+ {{ _('All articles') }}
+ {% endif %}
+ </div>
+ </div>
+
+ <ul class="document-list">
+ {% for document in documents %}
+ <li>
+ <a class="cf" href="{{ document['url'] }}">{{ document['document_title'] }}</a>
+ </li>
+ {% endfor %}
+ </ul>
+
+ {% if fallback_documents %}
+ <h2>{{ _('In English') }}</h2>
+ {% for document in fallback_documents %}
+ {% if loop.first %}<ul class="document-list">{% endif %}
+ <li>
+ <a href="{{ document['url']|replace('/'+ settings.WIKI_DEFAULT_LANGUAGE +'/', '/' + request.locale + '/') }}">{{ document['document_title'] }}</a>
+ </li>
+ {% if loop.last %}</ul>{% endif %}
+ {% endfor %}
+ {% endif %}
+{% endblock %}
+
+{% block after_main %}
+ <div id="filter-overlay" class="overlay" style="display: none;">
+ <header>{{ _('Showing') }}</header>
+ <div class="wrapper">
+ <ul>
+ <li {{ refine|class_selected(None) }}><a href="{{ request.path }}">{{ _('All') }}</a></li>
+ {% for topic_ in refine_topics if topic_ != topic %}
+ <li {{ refine|class_selected(topic_) }}><a href="?refine={{ _(topic_.slug) }}">{{ _(topic_.title, 'DB: topics.Topic.title') }} ({{ topic_.num_docs }})</a></li>
+ {% endfor %}
+ </ul>
+ </div>
+ </div>
+{% endblock %}
@@ -24,4 +24,4 @@
{% endif %}
{% endfor %}
</ul>
-{% endblock %}
+{% endblock %}
@@ -10,10 +10,10 @@
<li>
<a class="cf" href="{{ url('products.product', slug=product.slug) }}">
<img src="{{ MEDIA_URL }}img/blank.png" class="logo-sprite" alt="">
- <span class="title">{{ product.title }}</span>
- {{ product.description }}
+ <span class="title">{{ _(product.title, 'DB: products.Product.title') }}</span>
+ {{ _(product.description, 'DB: products.Product.description') }}
</a>
</li>
{% endfor %}
</ul>
-{% endblock %}
+{% endblock %}
@@ -43,7 +43,8 @@ def product_landing(request, template, slug):
'fallback_hot_docs': fallback_hot_docs})
-def document_listing(request, product_slug, topic_slug):
+@mobile_template('products/{mobile/}documents.html')
+def document_listing(request, template, product_slug, topic_slug):
"""The document listing page for a product + topic."""
product = get_object_or_404(Product, slug=product_slug)
topic = get_object_or_404(Topic, slug=topic_slug)
@@ -57,7 +58,7 @@ def document_listing(request, product_slug, topic_slug):
documents, fallback_documents = documents_for(
locale=request.locale, products=[product], topics=topics)
- return jingo.render(request, 'products/documents.html', {
+ return jingo.render(request, template, {
'product': product,
'topic': topic,
'topics': topics_for(products=[product]),
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
@@ -0,0 +1,7 @@
+(function($) {
+ $(function() {
+ $('#select-filter').on('click', function() {
+ $('#filter-overlay').show();
+ });
+ });
+})(jQuery)
View
@@ -2,26 +2,11 @@
$(function() {
// Menu toggling
$('#menu-button').on('click', function() {
- $page = $('#page');
- $nav = $('body > nav');
-
- var animation = {};
-
- if ($('body').data('orientation') === 'right') {
- if ($page.css('right') === '0px') {
- animation.right = $nav.outerWidth();
- } else {
- animation.right = 0;
- }
- } else {
- if ($page.css('left') === '0px') {
- animation.left = $nav.outerWidth();
- } else {
- animation.left = 0;
- }
- }
+ $('#page').toggleClass('exposed');
+ });
- $page.animate(animation);
+ $('.overlay > header').on('click', function() {
+ $(this).closest('.overlay').hide();
});
// iOS Standalone Web App Fix
@@ -36,4 +21,4 @@
});
}
});
-})(jQuery)
+})(jQuery)
@@ -63,4 +63,4 @@
url('@{fontpath}/Moz-Medium-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('@{fontpath}/Moz-Medium-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
-}
+}
@@ -19,4 +19,4 @@
text-decoration: none;
}
}
-}
+}
@@ -23,6 +23,7 @@ body {
color: #fff;
left: 0;
overflow: auto;
+ -webkit-overflow-scrolling: touch;
position: absolute;
top: 0;
width: 270px;
@@ -102,6 +103,10 @@ body {
#page {
left: auto;
right: 0;
+
+ &.exposed {
+ right: 270px;
+ }
}
}
}
@@ -120,6 +125,49 @@ body {
}
}
+.overlay {
+ background: rgba(40, 40, 40, 0.98) url('../../img/grain.png') 0 0 repeat;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 100;
+
+ > header {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+ .box-shadow(0 0 10px 0 rgba(0, 0, 0, 0.5));
+ color: #fff;
+ cursor: pointer;
+ height: 50px;
+ left: 0;
+ line-height: 50px;
+ padding: 0 30px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+
+ .wrapper {
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ position: absolute;
+ right: 0;
+ top: 51px;
+ }
+}
+
+.return-button {
+ background-position: -56px -299px;
+ float: left;
+ height: 24px;
+ margin: 13px 12px 13px 4px;
+ text-indent: -9999px;
+ width: 12px;
+}
+
.topic-sprite {
background: url('../../img/mobile/topics-sprite.png') -50px -494px no-repeat;
height: 48px;
@@ -158,9 +206,15 @@ body {
overflow: hidden;
position: absolute;
top: 0;
+ .transition-property(~'left, right');
+ .transition-duration(0.5s);
z-index: 10;
width: 100%;
+ &.exposed {
+ left: 270px;
+ }
+
> header {
.gradient(#cd6723, #cd6723, #bb482d);
border-bottom: 1px solid #992f21;
@@ -200,13 +254,14 @@ body {
float: right;
height: 24px;
margin: 13px;
+ text-indent: -9999px;
width: 24px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.icon-sprite {
background-image: url('../../img/mobile/icons-sprite-2x.png');
- .background-size(124px 248px);
+ .background-size(124px 372px);
}
.logo-sprite {
@@ -218,4 +273,4 @@ body {
background-image: url('../../img/mobile/topics-sprite-2x.png');
.background-size(148px 888px);
}
-}
+}
Oops, something went wrong.

0 comments on commit cc7338b

Please sign in to comment.