diff options
8 files changed, 146 insertions, 173 deletions
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 9c429404..73b07384 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -109,7 +109,7 @@ input, textarea { .container { margin: auto; width: 96%; - max-width: 820px; + max-width: 940px; } header { @@ -151,19 +151,16 @@ footer { } .media_pane { - width: 560px; + width: 640px; margin-left: 0px; margin-right: 10px; float: left; } -img.media_image { - width: 100%; -} - .media_sidebar { - width: 240px; + width: 280px; margin-left: 10px; + margin-right: 0px; float: left; } @@ -255,6 +252,15 @@ text-align: center; float: right; } +textarea#comment_content { + resize: vertical; + width: 634px; + height: 90px; + border: none; + background-color: #f1f1f1; + padding: 3px; +} + .clear { clear: both; display: block; @@ -264,15 +270,6 @@ text-align: center; height: 0; } -h3.sidedata { - border: none; - background-color: #212121; - border-radius: 4px 4px 0 0; - padding: 3px 8px; - margin: 20px 0 5px 0; - font-size: 1em; -} - /* forms */ .form_box,.form_box_xl { @@ -355,18 +352,13 @@ textarea#description, textarea#bio { } textarea#comment_content { - resize: vertical; - width: 100%; + width: 634px; height: 90px; border: none; background-color: #f1f1f1; padding: 3px; } -#form_comment .form_field_input { - padding-right: 6px; -} - /* media galleries */ .media_thumbnail { @@ -377,7 +369,6 @@ textarea#comment_content { margin: 0px 4px 10px 4px; text-align: center; font-size: 0.875em; - list-style: none; } .media_thumbnail a { @@ -389,12 +380,6 @@ textarea#comment_content { h2.media_title { margin-bottom: 0px; - display: inline-block; -} - -p.context { - display: inline-block; - padding-top: 4px; } p.media_specs { @@ -421,21 +406,19 @@ img.media_icon { /* navigation */ -.navigation { - float: right; -} - .navigation_button { width: 135px; - display: inline-block; + display: block; + float: left; text-align: center; background-color: #1d1d1d; border: 1px solid; border-color: #2c2c2c #232323 #1a1a1a; border-radius: 4px; text-decoration: none; - padding: 4px 0 8px; - margin: 0 0 6px + padding: 12px 0 16px; + font-size: 1.4em; + margin: 0 0 20px } .navigation_left { @@ -520,43 +503,23 @@ table.media_panel th { } /* Media queries and other responsivisivity */ - -@media screen and (max-width: 820px) { +@media screen and (max-width: 680px) { .media_pane { width: 100%; margin: 0px; } - - .media_sidebar { - width: 100%; - margin: 0px; - } - img.media_image { width: 100%; } +} +@media screen and (max-width: 960px) { .profile_sidebar { width: 100%; margin: 0px; } - .profile_showcase { width: 100%; margin: 0px; } - - .navigation { - float: none; - } - - .navigation_button { - width: 49%; - float: right; - } - - .navigation_left { - margin-right: 0; - float: left; - } } diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html index 3e711e92..d2503a4e 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/media.html +++ b/mediagoblin/templates/mediagoblin/user_pages/media.html @@ -40,84 +40,67 @@ {% endblock mediagoblin_head %} {% block mediagoblin_content %} - {% trans user_url=request.urlgen( - 'mediagoblin.user_pages.user_home', - user=media.get_uploader.username), - username=media.get_uploader.username -%} - <p class="context">❖ Browsing media by <a href="{{ user_url }}">{{ username }}</a></p> - {%- endtrans %} - {% include "mediagoblin/utils/prev_next.html" %} - <div class="media_image_container"> - {% block mediagoblin_media %} - {% set display_media = request.app.public_store.file_url( - media.get_display_media(media.media_files)) %} - {# if there's a medium file size, that means the medium size - # isn't the original... so link to the original! - #} - {% if media.media_files.has_key('medium') %} - <a href="{{ request.app.public_store.file_url( - media.media_files['original']) }}"> + <div class="media_pane"> + <div class="media_image_container"> + {% block mediagoblin_media %} + {% set display_media = request.app.public_store.file_url( + media.get_display_media(media.media_files)) %} + {# if there's a medium file size, that means the medium size + # isn't the original... so link to the original! + #} + {% if media.media_files.has_key('medium') %} + <a href="{{ request.app.public_store.file_url( + media.media_files['original']) }}"> + <img class="media_image" + src="{{ display_media }}" + alt="Image for {{ media.title }}" /> + </a> + {% else %} <img class="media_image" src="{{ display_media }}" alt="Image for {{ media.title }}" /> - </a> - {% else %} - <img class="media_image" - src="{{ display_media }}" - alt="Image for {{ media.title }}" /> - {% endif %} - {% endblock %} - </div> - <div class="media_pane"> + {% endif %} + {% endblock %} + </div> <h2 class="media_title"> {{ media.title }} </h2> - {% if request.user and - (media.uploader == request.user._id or - request.user.is_admin) %} - {% set edit_url = request.urlgen('mediagoblin.edit.edit_media', - user= media.get_uploader.username, - media= media._id) %} - <a class="button_action" href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a> - {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete', - user= media.get_uploader.username, - media= media._id) %} - <a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a> - {% endif %} {% autoescape False %} <p>{{ media.description_html }}</p> - {% endautoescape %} - {% if media.attachment_files|count %} - <h3>Attachments</h3> - <ul> - {% for attachment in media.attachment_files %} - <li> - <a href="{{ request.app.public_store.file_url(attachment.filepath) }}"> - {{ attachment.name }} - </a> - </li> - {% endfor %} - </ul> - {% endif %} - {% if app_config['allow_attachments'] - and request.user - and (media.uploader == request.user._id - or request.user.is_admin) %} - <p> - <a href="{{ request.urlgen('mediagoblin.edit.attachments', - user=media.get_uploader.username, - media=media._id) }}">Add attachment</a> - </p> - {% endif %} + {% endautoescape %} + <p class="media_specs"> + {% trans date=media.created.strftime("%Y-%m-%d") -%} + Added on {{ date }}. + {%- endtrans %} + {% if request.user and + (media.uploader == request.user._id or + request.user.is_admin) %} + {% set edit_url = request.urlgen('mediagoblin.edit.edit_media', + user= media.get_uploader.username, + media= media._id) %} + <a class="button_action" href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a> + {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete', + user= media.get_uploader.username, + media= media._id) %} + <a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a> + {% endif %} + </p> {% if comments %} <h3> + {% if comments.count()==1 %} + {% trans comment_count=comments.count() -%}{{ comment_count }} comment{%- endtrans %} + {% elif comments.count()>1 %} + {% trans comment_count=comments.count() -%}{{ comment_count }} comments{%- endtrans %} + {% else %} + {% trans %}No comments yet.{% endtrans %} + {% endif %} <div class="right_align"> <a {% if not request.user %} href="{{ request.urlgen('mediagoblin.auth.login') }}" {% endif %} class="button_action" id="button_addcomment" title="Add a comment"> - {% trans %}Add a comment{% endtrans %} + {% trans %}Add one{% endtrans %} </a> </div> </h3> @@ -167,11 +150,35 @@ {% endif %} </div> <div class="media_sidebar"> - {% trans date=media.created.strftime("%Y-%m-%d") -%} - <h3 class="sidedata">Added on</h3> - <p>{{ date }}</p> - {%- endtrans %} - + {% trans user_url=request.urlgen( + 'mediagoblin.user_pages.user_home', + user=media.get_uploader.username), + username=media.get_uploader.username -%} + <p>❖ Browsing media by <a href="{{ user_url }}">{{ username }}</a></p> + {%- endtrans %} + {% include "mediagoblin/utils/prev_next.html" %} + {% if media.attachment_files|count %} + <h3>Attachments</h3> + <ul> + {% for attachment in media.attachment_files %} + <li> + <a href="{{ request.app.public_store.file_url(attachment.filepath) }}"> + {{ attachment.name }} + </a> + </li> + {% endfor %} + </ul> + {% endif %} + {% if app_config['allow_attachments'] + and request.user + and (media.uploader == request.user._id + or request.user.is_admin) %} + <p> + <a href="{{ request.urlgen('mediagoblin.edit.attachments', + user=media.get_uploader.username, + media=media._id) }}">Add attachment</a> + </p> + {% endif %} {% if media.tags %} {% include "mediagoblin/utils/tags.html" %} {% endif %} diff --git a/mediagoblin/templates/mediagoblin/utils/exif.html b/mediagoblin/templates/mediagoblin/utils/exif.html index bd2e3307..0dd187f2 100644 --- a/mediagoblin/templates/mediagoblin/utils/exif.html +++ b/mediagoblin/templates/mediagoblin/utils/exif.html @@ -20,7 +20,7 @@ {% if media.media_data.has_key('exif') and app_config['exif_visible'] and media.media_data.exif.has_key('useful') %} - <h3 class="sidedata">EXIF</h3> + <h4>EXIF</h4> <table> {% for key, tag in media.media_data.exif.useful.items() %} <tr> diff --git a/mediagoblin/templates/mediagoblin/utils/geolocation_map.html b/mediagoblin/templates/mediagoblin/utils/geolocation_map.html index 118d0e62..c1909ae5 100644 --- a/mediagoblin/templates/mediagoblin/utils/geolocation_map.html +++ b/mediagoblin/templates/mediagoblin/utils/geolocation_map.html @@ -20,7 +20,7 @@ {% if media.media_data.has_key('gps') and app_config['geolocation_map_visible'] and media.media_data.gps %} - <h3 class="sidedata">Location</h3> + <h4>Map</h4> <div> {% set gps = media.media_data.gps %} <div id="tile-map" style="width: 100%; height: 196px;"> diff --git a/mediagoblin/templates/mediagoblin/utils/license.html b/mediagoblin/templates/mediagoblin/utils/license.html index ab157508..2438ed4e 100644 --- a/mediagoblin/templates/mediagoblin/utils/license.html +++ b/mediagoblin/templates/mediagoblin/utils/license.html @@ -17,8 +17,8 @@ #} {% block license_content -%} - <h3 class="sidedata">{% trans %}License{% endtrans %}</h3> <p> + {% trans %}License:{% endtrans %} {% if media.license %} <a href="{{ media.license }}">{{ media.get_license_data().abbreviation }}</a> {% else %} diff --git a/mediagoblin/templates/mediagoblin/utils/object_gallery.html b/mediagoblin/templates/mediagoblin/utils/object_gallery.html index 6b5988fb..81506a84 100644 --- a/mediagoblin/templates/mediagoblin/utils/object_gallery.html +++ b/mediagoblin/templates/mediagoblin/utils/object_gallery.html @@ -19,23 +19,29 @@ {% from "mediagoblin/utils/pagination.html" import render_pagination %} {% macro media_grid(request, media_entries, col_number=5) %} - <ul class="thumb_gallery"> + <table class="thumb_gallery"> {% for row in gridify_cursor(media_entries, col_number) %} - {% for entry in row %} - {% set entry_url = entry.url_for_self(request.urlgen) %} - <li class="media_thumbnail"> - <a href="{{ entry_url }}"> - <img src="{{ request.app.public_store.file_url( - entry.media_files['thumb']) }}" /> - </a> - {% if entry.title %} - <br /> - <a href="{{ entry_url }}">{{ entry.title }}</a> - {% endif %} - </li> - {% endfor %} + <tr class="thumb_row + {%- if loop.first %} thumb_row_first + {%- elif loop.last %} thumb_row_last{% endif %}"> + {% for entry in row %} + {% set entry_url = entry.url_for_self(request.urlgen) %} + <td class="media_thumbnail thumb_entry + {%- if loop.first %} thumb_entry_first + {%- elif loop.last %} thumb_entry_last{% endif %}"> + <a href="{{ entry_url }}"> + <img src="{{ request.app.public_store.file_url( + entry.media_files['thumb']) }}" /> + </a> + {% if entry.title %} + <br /> + <a href="{{ entry_url }}">{{ entry.title }}</a> + {% endif %} + </td> + {% endfor %} + </tr> {% endfor %} - </ul> + </table> {%- endmacro %} {# diff --git a/mediagoblin/templates/mediagoblin/utils/prev_next.html b/mediagoblin/templates/mediagoblin/utils/prev_next.html index f1175ce4..d0cf3f8c 100644 --- a/mediagoblin/templates/mediagoblin/utils/prev_next.html +++ b/mediagoblin/templates/mediagoblin/utils/prev_next.html @@ -21,28 +21,26 @@ {% set next_entry_url = media.url_to_next(request.urlgen) %} {% if prev_entry_url or next_entry_url %} - <div class="navigation"> - {# There are no previous entries for the very first media entry #} - {% if prev_entry_url %} - <a class="navigation_button navigation_left" href="{{ prev_entry_url }}"> - ← {% trans %}newer{% endtrans %} - </a> - {% else %} - {# This is the first entry. display greyed-out 'previous' image #} - <p class="navigation_button navigation_left"> - ← {% trans %}newer{% endtrans %} - </p> - {% endif %} - {# Likewise, this could be the very last media entry #} - {% if next_entry_url %} - <a class="navigation_button" href="{{ next_entry_url }}"> - {% trans %}older{% endtrans %} → - </a> - {% else %} - {# This is the last entry. display greyed-out 'next' image #} - <p class="navigation_button"> - {% trans %}older{% endtrans %} → - </p> - {% endif %} - </div> + {# There are no previous entries for the very first media entry #} + {% if prev_entry_url %} + <a class="navigation_button navigation_left" href="{{ prev_entry_url }}"> + ← {% trans %}newer{% endtrans %} + </a> + {% else %} + {# This is the first entry. display greyed-out 'previous' image #} + <p class="navigation_button navigation_left"> + ← {% trans %}newer{% endtrans %} + </p> + {% endif %} + {# Likewise, this could be the very last media entry #} + {% if next_entry_url %} + <a class="navigation_button" href="{{ next_entry_url }}"> + {% trans %}older{% endtrans %} → + </a> + {% else %} + {# This is the last entry. display greyed-out 'next' image #} + <p class="navigation_button"> + {% trans %}older{% endtrans %} → + </p> + {% endif %} {% endif %} diff --git a/mediagoblin/templates/mediagoblin/utils/tags.html b/mediagoblin/templates/mediagoblin/utils/tags.html index bcf3b5fd..6408102d 100644 --- a/mediagoblin/templates/mediagoblin/utils/tags.html +++ b/mediagoblin/templates/mediagoblin/utils/tags.html @@ -17,17 +17,16 @@ #} {% block tags_content -%} - <h3 class="sidedata">Tagged with</h3> - <p> + <p>{% trans %}View more media tagged with{% endtrans %} {% for tag in media.tags %} {% if loop.last %} {# the 'and' should only appear if there is more than one tag #} {% if media.tags|length > 1 %} - · + {% trans %}or{% endtrans %} {% endif %} <a href="{{ request.urlgen( 'mediagoblin.listings.tags_listing', - tag=tag['slug']) }}">{{ tag['name'] }}</a> + tag=tag['slug']) }}">{{ tag['name'] }}</a>. {% elif loop.revindex == 2 %} <a href="{{ request.urlgen( 'mediagoblin.listings.tags_listing', @@ -35,7 +34,7 @@ {% else %} <a href="{{ request.urlgen( 'mediagoblin.listings.tags_listing', - tag=tag['slug']) }}">{{ tag['name'] }}</a> · + tag=tag['slug']) }}">{{ tag['name'] }}</a>, {% endif %} {% endfor %} </p> |