Switch the grid over to using a... erk... table! :)

Also changes the gridification routine a bit.
This commit is contained in:
Christopher Allan Webber 2011-08-18 22:00:55 -05:00
parent 5b21ecf9db
commit b5017dbac8
3 changed files with 49 additions and 35 deletions

View File

@ -199,7 +199,6 @@ text-align: center;
.media_thumbnail { .media_thumbnail {
padding: 0px; padding: 0px;
width: 180px; width: 180px;
height: 180px;
overflow: hidden; overflow: hidden;
float: left; float: left;
margin: 0px 4px 10px 4px; margin: 0px 4px 10px 4px;

View File

@ -18,44 +18,27 @@
{% from "mediagoblin/utils/pagination.html" import render_pagination %} {% from "mediagoblin/utils/pagination.html" import render_pagination %}
{% macro media_grid(request, media_list, col_number=5) %} {% macro media_grid(request, media_entries, col_number=5) %}
{% set num_items = media_list.count() %} <table class="thumb_gallery">
{% set col_counter = 0 %} {% for row in gridify_cursor(media_entries, col_number) %}
{% set row_counter = 0 %} <tr class="thumb_row
{% set item_counter = 0 %} {%- if loop.first %} thumb_row_first
{%- elif loop.last %} thumb_row_last{% endif %}">
{% set num_rows = num_items // col_number %} {% for entry in row %}
{% if num_items % col_number != 0 %} <td class="media_thumbnail thumb_entry
{% set num_rows = num_rows + 1 %} {%- if loop.first %} thumb_entry_first
{% endif %} {%- elif loop.last %} thumb_entry_last{% endif %}">
<div class="thumb_gallery">
{% for entry in media_list %}
{% if col_counter == 0 %}
<div class="thumb_row {% if row_counter == 0 %}thumb_row_first{% endif %}{% if num_rows == row_counter + 1 %}thumb_row_last{% endif %}">
{% endif %}
<div class="media_thumbnail thumb_entry {% if col_counter == 0 %}thumb_entry_first{% endif %}{% if col_number == col_counter + 1 or num_items == item_counter + 1 %}thumb_entry_last{% endif %}">
<a href="{{ entry.url_for_self(request.urlgen) }}"> <a href="{{ entry.url_for_self(request.urlgen) }}">
<img src="{{ request.app.public_store.file_url( <img src="{{ request.app.public_store.file_url(
entry['media_files']['thumb']) }}" /></a> entry['media_files']['thumb']) }}" />
</div> </a>
</td>
{% if col_number == col_counter + 1 or num_items == item_counter + 1 %} {% endfor %}
</div> </tr>
{% set row_counter = row_counter + 1 %}
{% endif %}
{% set item_counter = item_counter + 1 %}
{% set col_counter = col_counter + 1 %}
{% if col_counter == col_number %}
{% set col_counter = 0 %}
{% endif %}
{% endfor %} {% endfor %}
</div> </table>
{%- endmacro %} {%- endmacro %}
{# {#
Render a media gallery with pagination. Render a media gallery with pagination.

View File

@ -100,7 +100,10 @@ def get_jinja_env(template_loader, locale):
# All templates will know how to ... # All templates will know how to ...
# ... fetch all waiting messages and remove them from the queue # ... fetch all waiting messages and remove them from the queue
# ... construct a grid of thumbnails or other media
template_env.globals['fetch_messages'] = messages.fetch_messages template_env.globals['fetch_messages'] = messages.fetch_messages
template_env.globals['gridify_list'] = gridify_list
template_env.globals['gridify_cursor'] = gridify_cursor
if exists(locale): if exists(locale):
SETUP_JINJA_ENVS[locale] = template_env SETUP_JINJA_ENVS[locale] = template_env
@ -628,3 +631,32 @@ class Pagination(object):
""" """
return self.get_page_url_explicit( return self.get_page_url_explicit(
request.path_info, request.GET, page_no) request.path_info, request.GET, page_no)
def gridify_list(this_list, num_cols=5):
"""
Generates a list of lists where each sub-list's length depends on
the number of columns in the list
"""
grid = []
# Figure out how many rows we should have
num_rows = int(ceil(float(len(this_list)) / num_cols))
for row_num in range(num_rows):
slice_min = row_num * num_cols
slice_max = (row_num + 1) * num_cols
row = this_list[slice_min:slice_max]
grid.append(row)
return grid
def gridify_cursor(this_cursor, num_cols=5):
"""
Generates a list of lists where each sub-list's length depends on
the number of columns in the list
"""
return gridify_list(list(this_cursor), num_cols)