[603787] Media gallery fits in with the new theme.

* Update grid view and individual media file view to match chowse's mockups. * Get rid of the gallery base.html template and use the wiki one. * No more ?locale query param, just switch the site language * Add generic autosubmit selects, initialized in main.js
2010-11-02 09:04:17 -07:00 · 2010-11-02 09:04:17 -07:00 · 984a2969c9
--- a/apps/gallery/templates/gallery/base.html
+++ b/apps/gallery/templates/gallery/base.html
@ -1,18 +0,0 @@
-{# vim: set ts=2 et sts=2 sw=2: #}
-{% extends "layout/base.html" %}
-{% set styles = ('gallery',) %}
-
-{% block content_area %}
-
-<div id="main-content">
-  {% block content %}
-  {% endblock %}
-</div>
-
-{% endblock %}
-
-{% block breadcrumbs %}
-{% endblock %}
-
-{% block sidebar %}
-{% endblock %}
--- a/apps/gallery/templates/gallery/gallery.html
+++ b/apps/gallery/templates/gallery/gallery.html
@ -1,51 +1,60 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
-{% extends "gallery/base.html" %}
-{% set title = _('Media Gallery | Firefox Support') %}
+{% extends "wiki/base.html" %}
+{% from "wiki/includes/sidebar_modules.html" import for_contributors, quick_links %}
+{% set title = _('Media Gallery') %}
+{% set styles= ('wiki', 'gallery') %}
 {% set crumbs = [(None, _('Media Gallery'))] %}

 {% block content %}
-  <div id="breadcrumbs">
-    {{ _('You are here:') }}
-    {{ breadcrumbs(crumbs) }}
-  </div>
-  <section class="gallery">
-    <header>
-      <h1>{{ _('Media Gallery') }}</h1>
-      <div id="locale-filter">
-        <form action="" method="get">
-          <label for="select-locale">{{ _('Show media for:') }}</label>
-          <select id="select-locale" name="locale">
-            {% for lang in settings.LANGUAGE_CHOICES %}
-              <option value="{{ lang[0] }}" {% if lang[0] == locale %}selected="selected"{% endif %}>{{ lang[1] }} ({{ lang[0] }})</option>
-            {% endfor %}
-          </select>
+  <article id="gallery-list" class="main">
+    <div id="breadcrumbs">
+      {{ _('You are here:') }}
+      {{ breadcrumbs(crumbs) }}
+    </div>
+    <h1>{{ _('Media Gallery') }}</h1>
+    <div id="locale-filter">
+      <a class="btn-upload" href="#">{{ _('Upload a New Media File') }}</a>
+      <form action="" method="get">
+        <label for="select-locale">{{ _('Show media for:') }}</label>
+        <select id="select-locale" name="lang" class="autosubmit">
+          {% for lang in settings.LANGUAGE_CHOICES %}
+            <option value="{{ lang[0] }}" {% if lang[0] == request.locale %}selected="selected"{% endif %}>{{ lang[1] }} ({{ lang[0] }})</option>
+          {% endfor %}
+        </select>
+        <noscript>
          <input type="submit" value="{{ _('Go') }}">
-        </form>
-      </div>
-      <div class="wrap">
-        <div id="gallery-search">
-          <form action="" method="get">
-            <input type="text" name="q" required="required" />
-            <input type="submit" value="{{ _('Search Gallery') }}">
-          </form>
-        </div>
-        <div id="media-type-filter">
-          {{ _("Show:") }}
-          {% if filter == 'images' %}
+        </noscript>
+      </form>
+    </div>
+    <div id="search-filter">
+      <div id="media-type-filter">
+        <span>{{ _("Show:") }}</span>
+        <ol>
+        <li>
+          {% if media_type == 'image' %}
            <span>{{ _('Images') }}</span>
          {% else %}
            <a href="{{ url('gallery.gallery_media', 'image') }}">{{ _('Images') }}</a>
          {% endif %}
-          {% if filter == 'videos' %}
+        </li>
+        <li>
+          {% if media_type == 'video' %}
            <span>{{ _('Videos') }}</span>
          {% else %}
            <a href="{{ url('gallery.gallery_media', 'video') }}">{{ _('Videos') }}</a>
          {% endif %}
-        </div>
+        </li>
+        </ol>
      </div>
-    </header>
+      <div id="gallery-search">
+        <form action="" method="get">
+          <input type="text" name="q" required="required" />
+          <input type="submit" value="{{ _('Search Gallery') }}">
+        </form>
+      </div>
+    </div>
    {% if media.object_list %}
-      <ol>
+      <ol id="media-list">
        {% for m in media.object_list %}
          <li>
            <a href="{{ m.get_absolute_url() }}" title="{{ m.title }}">
@ -54,11 +63,14 @@
          </li>
        {% endfor %}
      </ol>
-    {% else %}
-      <p>{{ _('Nothing to show.') }}</p>
-    {% endif %}
-    <footer>
      {{ media|paginator }}
-    </footer>
-  </section>
+    {% else %}
+      <p>{{ _('No media files available.') }}</p>
+    {% endif %}
+  </article>
+{% endblock %}
+
+{% block side %}
+  {{ for_contributors() }}
+  {{ quick_links() }}
 {% endblock %}
--- a/apps/gallery/templates/gallery/media.html
+++ b/apps/gallery/templates/gallery/media.html
@ -1,51 +1,68 @@
 {# vim: set ts=2 et sts=2 sw=2: #}
-{% extends "gallery/base.html" %}
-{% set title = _('{title} | Media Gallery | Firefox Support')|f(title=media.title) %}
-{% set crumbs = [(url('gallery.gallery'), _('Media Gallery')),
+{% extends "wiki/base.html" %}
+{% from "wiki/includes/sidebar_modules.html" import for_contributors, quick_links %}
+{% set title = _('{title} | Media Gallery')|f(title=media.title) %}
+{% set styles = ('wiki', 'gallery') %}
+{% set crumbs = [(url('gallery.gallery_media', media_type=media_type), _('Media Gallery')),
                 (None, media.title)] %}

 {% block content %}
-  <div id="breadcrumbs">
-    {{ _('You are here:') }}
-    {{ breadcrumbs(crumbs) }}
-  </div>
-  <section class="media">
-    <header>
-      <h1>{{ media.title }}</h1>
-      <div class="creator">
-        {{ _('by {user}')|f(user=media.creator) }}
-      </div>
-      <div class="created">
-        {{ _('Uploaded {date}')|f(date=datetimeformat(media.created, format='longdatetime'))|safe }}
-      </div>
-      <div class="locale">
-        {{ media.locale }}
-      </div>
-      {% if media_type =='image' %}
-        <div class="dimensions">
-          {{ media.file.width }} x {{ media.file.height }}px
-        </div>
-      {% endif %}
-      <div class="size">
-        {{ media.file.size // 1024 }}KB
-      </div>
-    </header>
-    <div class="media">
+  <article id="media-object" class="main">
+    <div id="breadcrumbs">
+      {{ _('You are here:') }}
+      {{ breadcrumbs(crumbs) }}
+    </div>
+    <h1>{{ media.title|truncate(length=55, killwords=True) }}</h1>
+    <div id="media-metainfo">
+      <ul id="media-info">
+        {% if media_type =='image' %}
+          <li class="dimensions">
+            {{ media.file.width }} x {{ media.file.height }} px
+          </li>
+          <li class="size">
+            {{ media.file.size // 1024 }} KB
+          </li>
+        {% else %}{# video #}
+          {% if media.flv %}
+            <li class="format-flv">
+              FLV ({{ media.flv.size // 1024 }} KB)
+            </li>
+          {% endif %}
+          {% if media.ogv %}
+            <li class="format-ogv">
+              OGV ({{ media.ogv.size // 1024 }} KB)
+            </li>
+          {% endif %}
+          {% if media.webm %}
+            <li class="format-webm">
+              WEBM ({{ media.webm.size // 1024 }})
+            </li>
+          {% endif %}
+        {% endif %}
+        {% if media_format %}
+          <li class="format">{{ media_format|upper }}</li>
+        {% endif %}
+      </ul>
+      <ul id="media-meta">
+        <li class="creator">{{ _('by {user}')|f(user=media.creator) }}</li>
+        <li class="created">{{ _('Uploaded {date}')|f(date=datetimeformat(media.created, format='datetime'))|safe }}</li>
+        <li class="locale">{{ settings.LANGUAGES[media.locale.lower()] }}</li>
+      </ul>
+    </div>
+    <div id="media-view">
      {% if media_type == 'image' %}
        <img src="{{ media.file.url }}" alt="{{ media.title }}" />
      {% else %}
-        <video src="{{ media.file.url }}" controls="controls"></video>
+        {{ generate_video(media) }}
      {% endif %}
    </div>
    <div class="description">{{ media.description }}</div>
-    <footer>
-      <form action="{# TODO delete view #}" method="post">
-        {% if media_type == 'image' %}
-          <input type="submit" value="{{ _('Delete this Image') }}" />
-        {% else %}
-          <input type="submit" value="{{ _('Delete this Video') }}" />
-        {% endif %}
-      </form>
-    </footer>
-  </section>
-{% endblock %}
+    <form id="media-actions" action="{# TODO delete view #}" method="post">
+      {% if media_type == 'image' %}
+        <input type="submit" value="{{ _('Delete this Image') }}" />
+      {% else %}
+        <input type="submit" value="{{ _('Delete this Video') }}" />
+      {% endif %}
+    </form>
+  </article>
+{% endblock %}
--- a/apps/gallery/tests/test_templates.py
+++ b/apps/gallery/tests/test_templates.py
@ -1,7 +1,6 @@
 from nose.tools import eq_
 from pyquery import PyQuery as pq

-from sumo.helpers import urlparams
 from sumo.tests import TestCase, get
 from sumo.urlresolvers import reverse
 from gallery.models import Image
@ -26,7 +25,7 @@ class GalleryPageCase(TestCase):
                       args=['image'])
        eq_(200, response.status_code)
        doc = pq(response.content)
-        imgs = doc('section.gallery li img')
+        imgs = doc('#media-list li img')
        eq_(1, len(imgs))
        eq_(img.thumbnail_url_if_set(), imgs[0].attrib['src'])

@ -37,14 +36,15 @@ class GalleryPageCase(TestCase):
        response = self.client.get(url, follow=True)
        eq_(200, response.status_code)
        doc = pq(response.content)
-        imgs = doc('section.gallery li img')
+        imgs = doc('#media-list li img')
        eq_(0, len(imgs))

-        locale_url = urlparams(url, locale='es')
+        locale_url = reverse('gallery.gallery_media', locale='es',
+                             args=['image'])
        response = self.client.get(locale_url, follow=True)
        eq_(200, response.status_code)
        doc = pq(response.content)
-        imgs = doc('section.gallery li img')
+        imgs = doc('#media-list li img')
        eq_(1, len(imgs))


@ -61,6 +61,6 @@ class MediaPageCase(TestCase):
        response = self.client.get(img.get_absolute_url(), follow=True)
        eq_(200, response.status_code)
        doc = pq(response.content)
-        eq_(img.title, doc('section.media h1').text())
-        eq_(img.description, doc('section.media div.description').text())
-        eq_(img.file.url, doc('section.media div.media img')[0].attrib['src'])
+        eq_(img.title, doc('#media-object h1').text())
+        eq_(img.description, doc('#media-object div.description').text())
+        eq_(img.file.url, doc('#media-view img')[0].attrib['src'])
--- a/apps/gallery/views.py
+++ b/apps/gallery/views.py
@ -1,3 +1,4 @@
+import imghdr
 import json

 from django.contrib.auth.decorators import login_required
@ -28,24 +29,23 @@ def gallery(request, media_type='image'):
    Filter can be set to 'images' or 'videos'.

    """
-    locale = request.GET.get('locale', request.locale)
-
    if media_type == 'image':
-        media_qs = Image.objects.filter(locale=locale)
+        media_qs = Image.objects.filter(locale=request.locale)
    else:
-        media_qs = Video.objects.filter(locale=locale)
+        media_qs = Video.objects.filter(locale=request.locale)
    media = paginate(request, media_qs, per_page=constants.ITEMS_PER_PAGE)

    return jingo.render(request, 'gallery/gallery.html',
                        {'media': media,
-                         'filter': filter,
-                         'locale': locale})
+                         'media_type': media_type})


 def media(request, media_id, media_type='image'):
    """The media page."""
+    media_format = None
    if media_type == 'image':
        media = get_object_or_404(Image, pk=media_id)
+        media_format = imghdr.what(media.file.path)
    elif media_type == 'video':
        media = get_object_or_404(Video, pk=media_id)
    else:
@ -53,6 +53,7 @@ def media(request, media_id, media_type='image'):

    return jingo.render(request, 'gallery/media.html',
                        {'media': media,
+                         'media_format': media_format,
                         'media_type': media_type})


--- a/apps/wiki/helpers.py
+++ b/apps/wiki/helpers.py
@ -4,6 +4,7 @@ import jinja2
 from jingo import register

 from wiki import DIFF_WRAP_COLUMN
+from wiki import parser


@register.function
@ -13,3 +14,8 @@ def diff_table(content_from, content_to):
    diff = html_diff.make_table(content_from.splitlines(),
                                content_to.splitlines(), context=True)
    return jinja2.Markup(diff)
+
+
+@register.function
+def generate_video(v):
+    return jinja2.Markup(parser.generate_video(v))
--- a/apps/wiki/parser.py
+++ b/apps/wiki/parser.py
@ -374,19 +374,24 @@ class WikiParser(sumo.parser.WikiParser):
        if isinstance(v, basestring):
            return v

-        sources = []
-        if v.webm:
-            sources.append(SOURCE_TEMPLATE % {'src': v.webm.url,
-                                              'type': 'webm'})
-        if v.ogv:
-            sources.append(SOURCE_TEMPLATE % {'src': v.ogv.url,
-                                              'type': 'ogg'})
-        data_fallback = ''
-        # Flash fallback
-        if v.flv:
-            data_fallback = ' data-fallback="' + v.flv.url + '"'
-        return VIDEO_TEMPLATE % {'fallback': data_fallback,
-                                 'sources': ''.join(sources),
-                                 'text': unicode(VIDEO_TEXT),
-                                 'height': settings.WIKI_VIDEO_HEIGHT,
-                                 'width': settings.WIKI_VIDEO_WIDTH}
+        return generate_video(v)
+
+
+def generate_video(v):
+    """Takes a video object and returns HTML markup for embedding it."""
+    sources = []
+    if v.webm:
+        sources.append(SOURCE_TEMPLATE % {'src': v.webm.url,
+                                          'type': 'webm'})
+    if v.ogv:
+        sources.append(SOURCE_TEMPLATE % {'src': v.ogv.url,
+                                          'type': 'ogg'})
+    data_fallback = ''
+    # Flash fallback
+    if v.flv:
+        data_fallback = ' data-fallback="' + v.flv.url + '"'
+    return VIDEO_TEMPLATE % {'fallback': data_fallback,
+                             'sources': ''.join(sources),
+                             'text': unicode(VIDEO_TEXT),
+                             'height': settings.WIKI_VIDEO_HEIGHT,
+                             'width': settings.WIKI_VIDEO_WIDTH}
--- a/media/css/gallery.css
+++ b/media/css/gallery.css
@ -3,49 +3,154 @@
 */

 /* media gallery grid view */
-section.gallery header div.wrap {
-    border-bottom: solid 1px #aaa;
-    border-top: solid 1px #aaa;
+#gallery-list {
+    color: #565656;
+}
+
+#locale-filter {
+    margin: 25px 0 20px;
+}
+
+#locale-filter label {
+    font-weight: bold;
+    padding-right: .3em;
+}
+
+#locale-filter select {
+    position: relative;
+    margin-right: .3em;
+    top: -.2em;
+}
+
+a.btn-upload {
+    float: right;
+    margin-top: .4em;
+}
+
+#search-filter input[type="text"] {
+    background: url("../img/icon.searchloupe.png") no-repeat scroll 7px center #FFFFFF;
+    padding-left: 33px;
+}
+
+#search-filter {
+    border-bottom: 1px solid #9ACCF7;
+    border-top: 1px solid #9ACCF7;
    display: block;
-    margin: 5px 0;
-    padding: 5px 0;
-}
-
-#gallery-search,
-#media-type-filter {
-    display: inline-block;
-    width: 458px;
+    padding: 12px 0;
 }

 #media-type-filter {
-    text-align: right;
+    color: #929292;
+    float: right;
+    margin-top: .5em;
+}
+
+#media-type-filter ol {
+    float: left;
+    list-style-type: none;
 }

 #media-type-filter span {
+    float: left;
+}
+
+#media-type-filter ol li {
+    border-left: 2px solid #929292;
+    float: left;
+    padding: 0 .5em;
+}
+
+#media-type-filter ol li:first-child {
+    border-left: 0;
+}
+
+#media-type-filter li span {
+    color: #565656;
    font-weight: bold;
 }

-section.gallery ol li {
+#media-list {
+    margin: 20px 0 -40px 0;
+}
+
+#media-list li {
    display: inline-block;
-    height: 184px;
+    height: 120px;
+    margin: 15px;
    text-align: center;
-    width: 183px;
+    width: 120px;
 }

-section.gallery ol li img {
-    max-height: 175px;
-    max-width: 175px;
+#media-list li:nth-child(5n+1) {
+    margin-left: 0;
 }

-/* media page */
-section.media header,
-section.media footer {
+#media-list li:nth-child(5n) {
+    margin-right: 0;
+}
+
+#media-list li img {
+    max-height: 120px;
+    max-width: 120px;
+}
+
+#gallery-search input[type="submit"] {
+    height: 31px;
+    position: relative;
+    top: -1px;
+}
+
+#media-metainfo {
+    border-bottom: 1px solid #9ACCF7;
+    border-top: 1px solid #9ACCF7;
+    height: 1.3em;
+    margin: 10px 0 20px;
+    padding: 5px 0;
+}
+
+#media-meta, #media-info {
+    list-style-type: none;
+}
+
+#media-info {
+    float: right;
+}
+
+#media-meta li,
+#media-info li {
+    float: left;
+    margin-left: .5em;
+}
+
+#media-meta li:before,
+#media-info li:before {
+    content: '·';
+    margin-right: .5em;
+}
+
+#media-meta li:first-child:before,
+#media-info li:first-child:before {
+    content: '';
+    margin-right: 0;
+}
+
+#media-view {
+    margin: 5px 0;
+    text-align: center;
+}
+
+#media-view div.video a {
+    display: none;
+}
+
+#media-view div.video-wrap {
    display: block;
-    margin: 10px 0;
-    padding: 10px 0;
 }

-section.media header div {
-    display: inline-block;
-    padding: 0 5px;
+#media-object div.description {
+    padding: 10px;
+}
+
+#media-actions {
+    margin-top: 20px;
 }
--- a/media/js/main.js
+++ b/media/js/main.js
@ -12,16 +12,15 @@
            $forms.find('input[type=image]').css('opacity', .5);
        }

-        initLocaleSwitcher();
+        initAutoSubmitSelects();

    });

    /*
-     * Initialize the locale form in the footer so that it auto-submits
-     * when the select changes.
+     * Initialize some selects so that they auto-submit on change.
     */
-    function initLocaleSwitcher() {
-        $('#flang').change(function() {
+    function initAutoSubmitSelects() {
+        $('select.autosubmit').change(function() {
            $(this).closest('form').submit();
        });
    }
--- a/templates/layout/footer.html
+++ b/templates/layout/footer.html
@ -3,7 +3,7 @@
  <form id="lang_form" dir="ltr" method="get" action="">
    <div>
    	<label for="flang">Other Languages</label>
-      <select id="flang" name="lang" dir="ltr">
+      <select id="flang" class="autosubmit" name="lang" dir="ltr">
        {% for locale in settings.LANGUAGE_CHOICES %}
          <option value="{{ locale[0] }}" {% if request.locale == locale[0] %}selected="selected"{% endif %}>{{ locale[1] }}</option>
        {% endfor %}