diff options
| -rw-r--r-- | mediagoblin/static/css/base.css | 147 | ||||
| -rw-r--r-- | mediagoblin/static/images/background_edit.png | bin | 221 -> 0 bytes | |||
| -rw-r--r-- | mediagoblin/static/images/background_lines.png | bin | 158 -> 0 bytes | |||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/base.html | 2 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/edit/edit.html | 2 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/user_pages/media.html | 105 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html | 4 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/utils/exif.html | 2 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/utils/geolocation_map.html | 2 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/utils/license.html | 2 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/utils/object_gallery.html | 36 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/utils/prev_next.html | 46 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/utils/tags.html | 9 |
13 files changed, 194 insertions, 163 deletions
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 73b07384..9302db1b 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -160,7 +160,6 @@ footer { .media_sidebar { width: 280px; margin-left: 10px; - margin-right: 0px; float: left; } @@ -178,7 +177,7 @@ footer { /* common website elements */ -.button_action, .button_action_highlight { +.button_action, .button_action_highlight, .button_form { display: inline-block; color: #c3c3c3; background-color: #363636; @@ -193,43 +192,17 @@ footer { cursor: pointer; } -.button_action_highlight { +.button_action_highlight, .button_form { background-color: #86D4B1; border-color: #A2DEC3 #6CAA8E #5C9179; color: #283F35; } -.button_form, .cancel_link { - height: 32px; +.button_form { min-width: 99px; - background-color: #86d4b1; - background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2)); - background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2); - background-image: -moz-linear-gradient(top, #86d4b1, #62caa2); - background-image: -ms-linear-gradient(top, #86d4b1, #62caa2); - background-image: -o-linear-gradient(top, #86d4b1, #62caa2); - background-image: linear-gradient(top, #86d4b1, #62caa2); - box-shadow: 0px 0px 4px #000; - border-radius: 3px; - border: none; - color: #272727; margin: 10px 0px 10px 15px; text-align: center; - padding-left: 11px; - padding-right: 11px; - text-decoration: none; font-family: 'Lato', sans-serif; - font-weight: bold; -} - -.cancel_link { - background-color: #aaa; - background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa)); - background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa); - background-image: -moz-linear-gradient(top, #D2D2D2, #aaa); - background-image: -ms-linear-gradient(top, #D2D2D2, #aaa); - background-image: -o-linear-gradient(top, #D2D2D2, #aaa); - background-image: linear-gradient(top, #D2D2D2, #aaa); } .pagination { @@ -252,15 +225,6 @@ 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; @@ -270,12 +234,20 @@ textarea#comment_content { 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 { background-color: #222; - background-image: url("../images/background_lines.png"); - background-repeat: repeat-x; + border-top: 6px solid #D49086; padding: 3% 5%; display: block; float: none; @@ -290,7 +262,7 @@ textarea#comment_content { } .edit_box { - background-image: url("../images/background_edit.png"); + border-top: 6px dashed #D49086 } .form_field_input input, .form_field_input textarea { @@ -352,23 +324,29 @@ textarea#description, textarea#bio { } textarea#comment_content { - width: 634px; + resize: vertical; + width: 100%; height: 90px; border: none; background-color: #f1f1f1; padding: 3px; } +#form_comment .form_field_input { + padding-right: 6px; +} + /* media galleries */ .media_thumbnail { + display: inline-block; padding: 0px; width: 180px; overflow: hidden; - float: left; - margin: 0px 4px 10px 4px; + margin: 0px 5px 10px 5px; text-align: center; font-size: 0.875em; + list-style: none; } .media_thumbnail a { @@ -380,6 +358,12 @@ textarea#comment_content { h2.media_title { margin-bottom: 0px; + display: inline-block; +} + +p.context { + display: inline-block; + padding-top: 4px; } p.media_specs { @@ -406,19 +390,21 @@ img.media_icon { /* navigation */ +.navigation { + float: right; +} + .navigation_button { width: 135px; - display: block; - float: left; + display: inline-block; text-align: center; background-color: #1d1d1d; border: 1px solid; border-color: #2c2c2c #232323 #1a1a1a; border-radius: 4px; text-decoration: none; - padding: 12px 0 16px; - font-size: 1.4em; - margin: 0 0 20px + padding: 4px 0 8px; + margin: 0 0 6px; } .navigation_left { @@ -503,23 +489,78 @@ table.media_panel th { } /* Media queries and other responsivisivity */ -@media screen and (max-width: 680px) { +@media screen and (max-width: 940px) { .media_pane { width: 100%; margin: 0px; } + + .media_sidebar { + width: 100%; + margin: 0px; + } + img.media_image { width: 100%; + display: inline; + } + + .media_thumbnail { + width: 21%; } -} -@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; + } + + .navigation { + float: none; + } + + .navigation_button { + width: 49%; + float: right; + padding: 10px 0 14px; + } + + .navigation_left { + margin-right: 0; + float: left; + } + + .button_action, .button_action_highlight, .button_form { + padding: 9px 14px; + } +} + +@media screen and (max-width: 570px) { + .media_thumbnail { + width: 29%; + } +} + +@media screen and (max-width: 380px) { + .media_thumbnail { + width: 46%; + } } diff --git a/mediagoblin/static/images/background_edit.png b/mediagoblin/static/images/background_edit.png Binary files differdeleted file mode 100644 index 4071fd53..00000000 --- a/mediagoblin/static/images/background_edit.png +++ /dev/null diff --git a/mediagoblin/static/images/background_lines.png b/mediagoblin/static/images/background_lines.png Binary files differdeleted file mode 100644 index e1b07afe..00000000 --- a/mediagoblin/static/images/background_lines.png +++ /dev/null diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index f3ebc3fa..7a810727 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -19,7 +19,7 @@ <html> <head> <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}{{ app_config['html_title'] }}{% endblock %}</title> <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/extlib/reset.css') }}"/> diff --git a/mediagoblin/templates/mediagoblin/edit/edit.html b/mediagoblin/templates/mediagoblin/edit/edit.html index 0c4d5bb1..3f7cbe0e 100644 --- a/mediagoblin/templates/mediagoblin/edit/edit.html +++ b/mediagoblin/templates/mediagoblin/edit/edit.html @@ -33,7 +33,7 @@ </div> {{ wtforms_util.render_divs(form) }} <div class="form_submit_buttons"> - <a href="{{ media.url_for_self(request.urlgen) }}">{% trans %}Cancel{% endtrans %}</a> + <a class="button_action" href="{{ media.url_for_self(request.urlgen) }}">{% trans %}Cancel{% endtrans %}</a> <input type="submit" value="{% trans %}Save changes{% endtrans %}" class="button_form" /> {{ csrf_token }} </div> diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html index 0b9bb808..11daaac7 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/media.html +++ b/mediagoblin/templates/mediagoblin/user_pages/media.html @@ -42,7 +42,14 @@ {% endblock mediagoblin_head %} {% block mediagoblin_content %} - <div class="media_pane"> + {% 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_pane"> <div class="media_image_container"> {% block mediagoblin_media %} {% set display_media = request.app.public_store.file_url( @@ -67,42 +74,52 @@ <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 %} - <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> + {% 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 %} {% 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 one{% endtrans %} + {% trans %}Add a comment{% endtrans %} </a> </div> </h3> @@ -152,35 +169,10 @@ {% endif %} </div> <div class="media_sidebar"> - {% 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 %} + {% trans date=media.created.strftime("%Y-%m-%d") -%} + <h3 class="sidedata">Added on</h3> + <p>{{ date }}</p> + {%- endtrans %} {% if media.tags %} {% include "mediagoblin/utils/tags.html" %} {% endif %} @@ -191,4 +183,5 @@ {% include "mediagoblin/utils/exif.html" %} </div> + <div class="clear"></div> {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html b/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html index e64845e7..a3459206 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html +++ b/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html @@ -46,8 +46,8 @@ <div class="form_submit_buttons"> {# TODO: This isn't a button really... might do unexpected things :) #} - <a class="cancel_link" href="{{ media.url_for_self(request.urlgen) }}">{% trans %}Cancel{% endtrans %}</a> - <input type="submit" value="{% trans %}Delete Permanently{% endtrans %}" class="button_form" /> + <a class="button_action" href="{{ media.url_for_self(request.urlgen) }}">{% trans %}Cancel{% endtrans %}</a> + <input type="submit" value="{% trans %}Delete permanently{% endtrans %}" class="button_form" /> {{ csrf_token }} </div> </div> diff --git a/mediagoblin/templates/mediagoblin/utils/exif.html b/mediagoblin/templates/mediagoblin/utils/exif.html index 0dd187f2..bd2e3307 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') %} - <h4>EXIF</h4> + <h3 class="sidedata">EXIF</h3> <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 c1909ae5..118d0e62 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 %} - <h4>Map</h4> + <h3 class="sidedata">Location</h3> <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 2438ed4e..ab157508 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 81506a84..6b5988fb 100644 --- a/mediagoblin/templates/mediagoblin/utils/object_gallery.html +++ b/mediagoblin/templates/mediagoblin/utils/object_gallery.html @@ -19,29 +19,23 @@ {% from "mediagoblin/utils/pagination.html" import render_pagination %} {% macro media_grid(request, media_entries, col_number=5) %} - <table class="thumb_gallery"> + <ul class="thumb_gallery"> {% for row in gridify_cursor(media_entries, col_number) %} - <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> + {% 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 %} {% endfor %} - </table> + </ul> {%- endmacro %} {# diff --git a/mediagoblin/templates/mediagoblin/utils/prev_next.html b/mediagoblin/templates/mediagoblin/utils/prev_next.html index 83d83ad6..9e262ed9 100644 --- a/mediagoblin/templates/mediagoblin/utils/prev_next.html +++ b/mediagoblin/templates/mediagoblin/utils/prev_next.html @@ -21,26 +21,28 @@ {% set next_entry_url = media.url_to_next(request.urlgen) %} {% if prev_entry_url or next_entry_url %} - {# 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 navigation_right" href="{{ next_entry_url }}"> - {% trans %}older{% endtrans %} → - </a> - {% else %} - {# This is the last entry. display greyed-out 'next' image #} - <p class="navigation_button navigation_right"> - {% trans %}older{% endtrans %} → - </p> - {% endif %} + <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 navigation_right" href="{{ next_entry_url }}"> + {% trans %}older{% endtrans %} → + </a> + {% else %} + {# This is the last entry. display greyed-out 'next' image #} + <p class="navigation_button navigation_right"> + {% trans %}older{% endtrans %} → + </p> + {% endif %} + </div> {% endif %} diff --git a/mediagoblin/templates/mediagoblin/utils/tags.html b/mediagoblin/templates/mediagoblin/utils/tags.html index 6408102d..bcf3b5fd 100644 --- a/mediagoblin/templates/mediagoblin/utils/tags.html +++ b/mediagoblin/templates/mediagoblin/utils/tags.html @@ -17,16 +17,17 @@ #} {% block tags_content -%} - <p>{% trans %}View more media tagged with{% endtrans %} + <h3 class="sidedata">Tagged with</h3> + <p> {% 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', @@ -34,7 +35,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> |
