diff options
21 files changed, 531 insertions, 377 deletions
diff --git a/.gitmodules b/.gitmodules index 95a76e1f..20fa20e2 100644 --- a/.gitmodules +++ b/.gitmodules @@ -4,4 +4,6 @@ [submodule "extlib/pdf.js"] path = extlib/pdf.js url = git://github.com/mozilla/pdf.js.git - +[submodule "extlib/skeleton"] + path = extlib/skeleton + url = git://github.com/dhg/Skeleton.git diff --git a/extlib/skeleton b/extlib/skeleton new file mode 160000 +Subproject 7ab682091d1032035cfcb668e6bd4b465bfa467 diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 7b422167..32c6c6cb 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -78,6 +78,11 @@ a.highlight { color: #fff; } +.header_right a { + text-decoration: none; + color: #fff; +} + em { font-style: italic; } @@ -105,26 +110,26 @@ input, textarea { /* website structure */ -.container { - margin: auto; - width: 96%; - max-width: 940px; -} - header { width: 100%; - max-width: 940px; - margin-left: auto; - margin-right: auto; padding: 0; margin-bottom: 42px; border-bottom: 1px solid #333; } +.header_left { + width: 47%; + margin: 0 0 0 8px; + display: inline-block; +} + .header_right { - margin: 8px; + width: 47%; + margin: 8px 8px 4px 0; display: inline-block; float: right; + text-align: right; + line-height: 1.6em; } .header_dropdown { @@ -156,6 +161,10 @@ a.logo { margin: 6px 8px 6px 0; } +.welcomeimage { + float: right; +} + .fine_print { font-size: 0.8em; } @@ -176,29 +185,39 @@ footer { clear: both; } -.media_pane { - width: 640px; - margin-left: 0px; +.thumb_gallery { + margin-left: 10px; margin-right: 10px; - float: left; } -.media_sidebar { - width: 280px; - margin-left: 10px; - float: left; +.profile_showcase .thumb_gallery { + margin-left: 0; + margin-right: 0; } -.profile_sidebar { - width: 340px; - margin-right: 10px; - float: left; +.media_image_container { + display: flex; + justify-content: center; } -.profile_showcase { - width: 580px; - margin-left: 10px; - float: left; +.media_image { + max-width: 100%; +} + +.media_pane { +/* in place for possible future wide view */ +/* border-bottom: 1px solid #333333;*/ +} + +.media_sidebar { +/* in place for possible future wide view */ +/* border-left: 1px solid #333333;*/ +/* padding-left: 1em;*/ +/* padding-top: 1em;*/ +} + +.media_comments { + padding-top: 1em; } /* common website elements */ @@ -224,6 +243,17 @@ footer { color: #283F35; } +.button_info { + background-color: #508BB5; + border-color: #5899C7 #437699 #427496; + color: #C3C3C3; +} + +.button_warning { + background-color: #8A2D2D; + border-color: #913030 #451717 #431212; + color: #C3C3C3; +} .button_form { min-width: 99px; @@ -248,10 +278,28 @@ text-align: center; padding-top: 70px; } +.no_background { + background-image: none; + height: 0; + padding-top: 0; + display: inline-block; +} + .right_align { float: right; } +.left_align { + float: right; +} + +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} + .clear { clear: both; display: block; @@ -266,13 +314,29 @@ text-align: center; } .media_sidebar h3 { - font-size: 1em; - margin: 0 0 5px; - border: none; + font-size: 1em; + margin: 0 0 5px; + border: none; } .media_sidebar p { - margin-left: 8px; + margin-left: 8px; +} + +.alpha { + margin-left:0; +} + +.omega { + margin-right:0; +} + +.head { + margin-top:0; +} + +.foot { + margin-bottom:0; } /* forms */ @@ -339,7 +403,7 @@ text-align: center; border-top: 6px dashed #D49086 } -.form_field_input input, .form_field_input textarea { +/*.form_field_input input,*/ .form_field_input textarea { width: 100%; } @@ -555,44 +619,49 @@ img.media_icon { /* EXIF information */ -#exif_content h3 { - border-bottom: 1px solid #333; +#exif_content { + padding-bottom: 20px; } #exif_camera_information { - margin-bottom: 20px; + margin-bottom: 20px; + margin-left: 8px; +} + +#exif_additional_info_button { + margin-left: 8px; } #exif_additional_info { - display: none; + display: none; + margin-left: 8px; } #exif_additional_info table { - font-size: 11px; - margin-top: 10px; + font-size: 11px; + margin-top: 10px; } #exif_additional_info td { - vertical-align: top; - padding-bottom: 5px; + vertical-align: top; + padding-bottom: 5px; } #exif_content .col1 { - padding-right: 20px; + padding-right: 20px; } #exif_additional_info table tr { - margin-bottom: 10px; + margin-bottom: 10px; } /* navigation */ .navigation { - float: right; } .navigation_button { - width: 135px; + width: 48%; display: inline-block; text-align: center; background-color: #1d1d1d; @@ -605,7 +674,7 @@ img.media_icon { } .navigation_left { - margin-right: 6px; + margin-right: 3px; } /* messages */ @@ -673,7 +742,8 @@ table.admin_panel { } table.admin_side_panel { - width: 60% + width: 90%; + margin-bottom: 10px; } table.admin_panel th, table.admin_side_panel th { @@ -754,24 +824,16 @@ pre { } /* Media queries and other responsivisivity */ -@media screen and (max-width: 940px) { - .media_pane { - width: 100%; - margin: 0px; - } - - .media_sidebar { - width: 100%; - margin: 0px; - } - +/* initial GMG max 940 */ +@media screen and (max-width: 960px) { + img.media_image { - width: 100%; - display: inline; + max-width: 100%; +/* display: inline;*/ } .media_thumbnail { - width: 21%; +/* width: 21%;*/ } .profile_sidebar { @@ -784,26 +846,11 @@ pre { 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; } @@ -814,59 +861,75 @@ pre { } .button_action, .button_action_highlight, .button_form { - padding: 9px 14px; + padding: 5px 14px; + margin-bottom: 0.5em; } - - header { - text-align: center; + +} +/* desktop resolutions */ +@media screen and (min-width: 960px) { + .container .three.columns.media_thumbnail { + width:180px; + margin-left:3px; + margin-right:3px; } - - .header_right { - margin-right: 2%; - float: none; +} +/* Tablet Portrait size to standard 960 (devices and browsers) */ +@media only screen and (min-width: 768px) and (max-width: 959px) { + .container .three.columns.media_thumbnail { + width:147px; + margin-left:2px; + margin-right:2px; } - - a.logo { - margin-left: 2%; + .media_thumbnail.thumb_entry img { + margin-left: -16.5px; + } + .thumb_gallery { + margin-left: 0; + margin-right: 0; + } + .navigation_button { } } +/* All Mobile Sizes (devices and browser) */ +@media screen and (max-width: 767px) { + .thumb_row { + margin-bottom: 0; + } + .thumb_gallery { + margin-left: 0; + margin-right: 0; + } + h1,h2,h3,p { + margin-bottom: 10px !important; + } -@media screen and (max-width: 570px) { - .media_thumbnail { - width: 29%; + header { + text-align: center; } -} -@media screen and (max-width: 380px) { - .media_thumbnail { - width: 46%; + .header_right { + text-align: center; } -} -/* Exif display */ -#exif_content h3 { - border-bottom: 1px solid #333; -} -#exif_camera_information { - margin-bottom: 20px; -} + .welcomeimage { + float: none; + display: inherit; + margin-left: auto; + margin-right: auto; + margin-top: 1em; + } -#exif_additional_info { - display: none; -} -#exif_additional_info table { - font-size: 11px; - margin-top: 10px; -} -#exif_additional_info td { - vertical-align: top; - padding-bottom: 5px; -} -#exif_content .col1 { - padding-right: 20px; -} -#exif_additional_info table tr { - margin-bottom: 10px; + .media_sidebar { + border-left: none; + padding-left: 0; + padding-top: 1em; + margin-top: 1em; + } + + .media_comments { + border-bottom: 1px solid #333333; + } } p.verifier { diff --git a/mediagoblin/static/css/extlib/skeleton.css b/mediagoblin/static/css/extlib/skeleton.css new file mode 120000 index 00000000..6ecf4919 --- /dev/null +++ b/mediagoblin/static/css/extlib/skeleton.css @@ -0,0 +1 @@ +../../../../extlib/skeleton/stylesheets/skeleton.css
\ No newline at end of file diff --git a/mediagoblin/static/extlib/skeleton b/mediagoblin/static/extlib/skeleton new file mode 120000 index 00000000..737bfce4 --- /dev/null +++ b/mediagoblin/static/extlib/skeleton @@ -0,0 +1 @@ +../../../extlib/skeleton/
\ No newline at end of file diff --git a/mediagoblin/templates/mediagoblin/banned.html b/mediagoblin/templates/mediagoblin/banned.html index 0b5a6884..151f2b9c 100644 --- a/mediagoblin/templates/mediagoblin/banned.html +++ b/mediagoblin/templates/mediagoblin/banned.html @@ -21,7 +21,7 @@ {% block mediagoblin_content %} <img class="right_align" src="{{ request.staticdirect('/images/404.png') }}" - alt="{% trans %}Image of goblin stressing out{% endtrans %}" /> + alt="{% trans %}Image of goblin stressing out{% endtrans %}" style="max-width:100%;"/> <h1>{% trans %}You have been banned{% endtrans %} {% if expiration_date %} diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index 6d49ff47..b4c7eb8b 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -32,6 +32,8 @@ <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/extlib/reset.css') }}"/> <link rel="stylesheet" type="text/css" + href="{{ request.staticdirect('/css/extlib/skeleton.css') }}"/> + <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/base.css') }}"/> <link rel="shortcut icon" href="{{ request.staticdirect('/images/goblin.ico') }}" /> @@ -61,110 +63,116 @@ {% include 'mediagoblin/bits/body_start.html' %} {% block mediagoblin_body %} {% block mediagoblin_header %} - <header> - {%- include "mediagoblin/bits/logo.html" -%} - {% block mediagoblin_header_title %}{% endblock %} - <div class="header_right"> - {%- if request.user %} - {% if request.user and - request.user.has_privilege('active') and - not request.user.is_banned() %} + <div class="container"> + <header> + <div class="row foot"> + <div class="header_left"> + {%- include "mediagoblin/bits/logo.html" -%} + {% block mediagoblin_header_title %}{% endblock %} + </div> + <div class="header_right"> + {%- if request.user %} + {% if request.user and + request.user.has_privilege('active') and + not request.user.is_banned() %} - {% set notification_count = get_notification_count(request.user.id) %} - {% if notification_count %} - <a href="javascript:;" class="notification-gem button_action" title="Notifications"> - {{ notification_count }}</a> + {% set notification_count = get_notification_count(request.user.id) %} + {% if notification_count %} + <a href="javascript:;" class="notification-gem button_action button_info" title="Notifications"> + {{ notification_count }}</a> + {% endif %} + <a href="javascript:;" class="button_action header_dropdown_down">▼</a> + <a href="javascript:;" class="button_action header_dropdown_up">▲</a> + {% elif request.user and not request.user.has_privilege('active') %} + {# the following link should only appear when verification is needed #} + <a href="{{ request.urlgen('mediagoblin.user_pages.user_home', + user=request.user.username) }}" + class="button_action_highlight"> + {% trans %}Verify your email!{% endtrans %}</a> + or <a id="logout" href= + {% if persona is not defined %} + "{{ request.urlgen('mediagoblin.auth.logout') }}" + {% else %} + "javascript:;" + {% endif %} + >{% trans %}log out{% endtrans %}</a> + {% elif request.user and request.user.is_banned() %} + <a id="logout" href= + {% if persona is not defined %} + "{{ request.urlgen('mediagoblin.auth.logout') }}" + {% else %} + "javascript:;" + {% endif %} + >{% trans %}log out{% endtrans %}</a> {% endif %} - <a href="javascript:;" class="button_action header_dropdown_down">▼</a> - <a href="javascript:;" class="button_action header_dropdown_up">▲</a> - {% elif request.user and not request.user.has_privilege('active') %} - {# the following link should only appear when verification is needed #} - <a href="{{ request.urlgen('mediagoblin.user_pages.user_home', - user=request.user.username) }}" - class="button_action_highlight"> - {% trans %}Verify your email!{% endtrans %}</a> - or <a id="logout" href= - {% if persona is not defined %} - "{{ request.urlgen('mediagoblin.auth.logout') }}" - {% else %} - "javascript:;" - {% endif %} - >{% trans %}log out{% endtrans %}</a> - {% elif request.user and request.user.is_banned() %} - <a id="logout" href= - {% if persona is not defined %} - "{{ request.urlgen('mediagoblin.auth.logout') }}" - {% else %} - "javascript:;" - {% endif %} - >{% trans %}log out{% endtrans %}</a> - {% endif %} - {%- elif auth %} - <a href= - {% if persona_auth is defined %} - "javascript:;" id="persona_login" - {% else %} - "{{ request.urlgen('mediagoblin.auth.login') }}" - {% endif %} - > - {%- trans %}Log in{% endtrans -%} - </a> - {%- endif %} - </div> - <div class="clear"></div> - {% if request.user and request.user.has_privilege('active') %} - <div class="header_dropdown"> - <p> - <span class="dropdown_title"> - {% trans user_url=request.urlgen('mediagoblin.user_pages.user_home', - user=request.user.username), - user_name=request.user.username -%} - <a href="{{ user_url }}">{{ user_name }}</a>'s account - {%- endtrans %} - </span> - · - <a href="{{ request.urlgen('mediagoblin.edit.account') }}">{%- trans %}Change account settings{% endtrans -%}</a> - · - <a href="{{ request.urlgen('mediagoblin.user_pages.processing_panel', - user=request.user.username) }}"> - {%- trans %}Media processing panel{% endtrans -%} + {%- elif auth %} + <a href= + {% if persona_auth is defined %} + "javascript:;" id="persona_login" + {% else %} + "{{ request.urlgen('mediagoblin.auth.login') }}" + {% endif %} + > + {%- trans %}Log in{% endtrans -%} </a> - · - {% template_hook("blog_dashboard_home") %} - <a id="logout" href= - {% if persona is not defined %} - "{{ request.urlgen('mediagoblin.auth.logout') }}" - {% else %} - "javascript:;" - {% endif %} - >{% trans %}Log out{% endtrans %}</a> - </p> - <a class="button_action" href="{{ request.urlgen('mediagoblin.submit.start') }}"> - {%- trans %}Add media{% endtrans -%} - </a> - <a class="button_action" href="{{ request.urlgen('mediagoblin.submit.collection') }}"> - {%- trans %}Create new collection{% endtrans -%} - </a> - {% if request.user.has_privilege('admin','moderator') %} + {%- endif %} + </div> + <div class="clear"></div> + {% if request.user and request.user.has_privilege('active') %} + <div class="header_dropdown"> <p> - <span class="dropdown_title">Moderation powers:</span> - <a href="{{ request.urlgen('mediagoblin.moderation.media_panel') }}"> - {%- trans %}Media processing panel{% endtrans -%} - </a> + <span class="dropdown_title"> + {% trans user_url=request.urlgen('mediagoblin.user_pages.user_home', + user=request.user.username), + user_name=request.user.username -%} + <a href="{{ user_url }}">{{ user_name }}</a>'s account + {%- endtrans %} + </span> · - <a href="{{ request.urlgen('mediagoblin.moderation.users') }}"> - {%- trans %}User management panel{% endtrans -%} - </a> + <a href="{{ request.urlgen('mediagoblin.edit.account') }}">{%- trans %}Change account settings{% endtrans -%}</a> · - <a href="{{ request.urlgen('mediagoblin.moderation.reports') }}"> - {%- trans %}Report management panel{% endtrans -%} + <a href="{{ request.urlgen('mediagoblin.user_pages.processing_panel', + user=request.user.username) }}"> + {%- trans %}Media processing panel{% endtrans -%} </a> + · + {% template_hook("blog_dashboard_home") %} + <a id="logout" href= + {% if persona is not defined %} + "{{ request.urlgen('mediagoblin.auth.logout') }}" + {% else %} + "javascript:;" + {% endif %} + >{% trans %}Log out{% endtrans %}</a> </p> - {% endif %} - {% include 'mediagoblin/fragments/header_notifications.html' %} - </div> - {% endif %} - </header> + <a class="button_action" href="{{ request.urlgen('mediagoblin.submit.start') }}"> + {%- trans %}Add media{% endtrans -%} + </a> + <a class="button_action" href="{{ request.urlgen('mediagoblin.submit.collection') }}"> + {%- trans %}Create new collection{% endtrans -%} + </a> + {% if request.user.has_privilege('admin','moderator') %} + <p> + <span class="dropdown_title">Moderation powers:</span> + <a href="{{ request.urlgen('mediagoblin.moderation.media_panel') }}"> + {%- trans %}Media processing panel{% endtrans -%} + </a> + · + <a href="{{ request.urlgen('mediagoblin.moderation.users') }}"> + {%- trans %}User management panel{% endtrans -%} + </a> + · + <a href="{{ request.urlgen('mediagoblin.moderation.reports') }}"> + {%- trans %}Report management panel{% endtrans -%} + </a> + </p> + {% endif %} + {% include 'mediagoblin/fragments/header_notifications.html' %} + </div> + {% endif %} + </div><!-- end row --> + </header> + </div> {% endblock %} <div class="container"> {% include 'mediagoblin/bits/above_content.html' %} diff --git a/mediagoblin/templates/mediagoblin/bits/frontpage_welcome.html b/mediagoblin/templates/mediagoblin/bits/frontpage_welcome.html index 4e55e618..3d93ea52 100644 --- a/mediagoblin/templates/mediagoblin/bits/frontpage_welcome.html +++ b/mediagoblin/templates/mediagoblin/bits/frontpage_welcome.html @@ -19,29 +19,34 @@ {% if request.user %} <h1>{% trans %}Explore{% endtrans %}</h1> {% else %} - <img class="right_align" src="{{ request.staticdirect('/images/home_goblin.png') }}" /> - <h1>{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}</h1> - <p>{% trans %}This site is running <a href="http://mediagoblin.org">MediaGoblin</a>, an extraordinarily great piece of media hosting software.{% endtrans %}</p> - {% if auth %} - <p>{% trans %}To add your own media, place comments, and more, you can log in with your MediaGoblin account.{% endtrans %}</p> - {% if allow_registration %} - <p>{% trans %}Don't have one yet? It's easy!{% endtrans %}</p> - <a class="button_action_highlight" href= - {% if persona_auth is defined %} - "javascript:;" id="persona_login1" - {% else %} - "{{ request.urlgen('mediagoblin.auth.register') }}" + <div class="row foot"> + <div class="eleven columns"> + <h1>{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}</h1> + <p>{% trans %}This site is running <a href="http://mediagoblin.org">MediaGoblin</a>, an extraordinarily great piece of media hosting software.{% endtrans %}</p> + {% if auth %} + <p>{% trans %}To add your own media, place comments, and more, you can log in with your MediaGoblin account.{% endtrans %}</p> + {% if allow_registration %} + <p>{% trans %}Don't have one yet? It's easy!{% endtrans %}</p> + <a class="button_action_highlight" href= + {% if persona_auth is defined %} + "javascript:;" id="persona_login1" + {% else %} + "{{ request.urlgen('mediagoblin.auth.register') }}" + {% endif %} + {% trans %} + >Create an account at this site</a> + or + {%- endtrans %} {% endif %} - {% trans %} - >Create an account at this site</a> - or - {%- endtrans %} - {% endif %} - {% endif %} - {% trans %} - <a class="button_action" href="http://mediagoblin.readthedocs.org/">Set up MediaGoblin on your own server</a> - {%- endtrans %} - + {% endif %} + {% trans %} + <a class="button_action" href="http://mediagoblin.readthedocs.org/">Set up MediaGoblin on your own server</a> + {%- endtrans %} + </div> + <div class="four columns offset-by-one"> + <img class="welcomeimage" src="/mgoblin_static/images/home_goblin.png"> + </div> + </div> <div class="clear"></div> {% endif %} diff --git a/mediagoblin/templates/mediagoblin/edit/attachments.html b/mediagoblin/templates/mediagoblin/edit/attachments.html index 3fbea3be..d1e33c47 100644 --- a/mediagoblin/templates/mediagoblin/edit/attachments.html +++ b/mediagoblin/templates/mediagoblin/edit/attachments.html @@ -57,7 +57,7 @@ <h2>{% trans %}Add attachment{% endtrans %}</h2> {{- wtforms_util.render_divs(form) }} <div class="form_submit_buttons"> - <a href="{{ media.url_for_self(request.urlgen) }}"> + <a class="button_action" href="{{ media.url_for_self(request.urlgen) }}"> {%- trans %}Cancel{% endtrans -%} </a> <input type="submit" value="{% trans %}Save changes{% endtrans %}" diff --git a/mediagoblin/templates/mediagoblin/edit/delete_account.html b/mediagoblin/templates/mediagoblin/edit/delete_account.html index 84d0b580..a7a3c3d2 100644 --- a/mediagoblin/templates/mediagoblin/edit/delete_account.html +++ b/mediagoblin/templates/mediagoblin/edit/delete_account.html @@ -41,7 +41,7 @@ 'mediagoblin.user_pages.user_home', user=user.username) }}">{% trans %}Cancel{% endtrans %}</a> {{ csrf_token }} - <input type="submit" value="{% trans %}Delete permanently{% endtrans %}" class="button_form" /> + <input type="submit" value="{% trans %}Delete permanently{% endtrans %}" class="button_form button_warning" /> </div> </div> </form> diff --git a/mediagoblin/templates/mediagoblin/error.html b/mediagoblin/templates/mediagoblin/error.html index c16b650f..a8412b24 100644 --- a/mediagoblin/templates/mediagoblin/error.html +++ b/mediagoblin/templates/mediagoblin/error.html @@ -21,7 +21,7 @@ {% block mediagoblin_content %} <img class="right_align" src="{{ request.staticdirect('/images/404.png') }}" - alt="{% trans %}Image of goblin stressing out{% endtrans %}" /> + alt="{% trans %}Image of goblin stressing out{% endtrans %}" style="max-width:100%;"/> <h1>{{ title }}</h1> <p>{{ err_msg|safe }}</p> <div class="clear"></div> diff --git a/mediagoblin/templates/mediagoblin/moderation/report.html b/mediagoblin/templates/mediagoblin/moderation/report.html index cedbd49a..5bff0ffa 100644 --- a/mediagoblin/templates/mediagoblin/moderation/report.html +++ b/mediagoblin/templates/mediagoblin/moderation/report.html @@ -26,10 +26,12 @@ {% if not report %} {% trans %}Sorry, no such report found.{% endtrans %} {% else %} + <div class="row"> <a href="{{ request.urlgen('mediagoblin.moderation.reports') }}" class="return_to_panel button_action" title="Return to Reports Panel"> {% trans %}Return to Reports Panel{% endtrans %}</a> + </div> <h2>{% trans %}Report{% endtrans %} #{{ report.id }}</h2> {% if report.is_comment_report() and report.comment %} @@ -66,7 +68,7 @@ {% elif report.is_media_entry_report() and report.media_entry %} {% set media_entry = report.media_entry %} - <div class="media_thumbnail"> + <div class="three columns media_thumbnail"> <a href="{{ request.urlgen('mediagoblin.user_pages.media_home', user=media_entry.get_uploader.username, media=media_entry.slug_or_id) }}"> diff --git a/mediagoblin/templates/mediagoblin/moderation/user.html b/mediagoblin/templates/mediagoblin/moderation/user.html index 6335ea12..37e7eee9 100644 --- a/mediagoblin/templates/mediagoblin/moderation/user.html +++ b/mediagoblin/templates/mediagoblin/moderation/user.html @@ -34,6 +34,16 @@ {% endblock %} {% block mediagoblin_content -%} + <div class="row"> + <div class="sixteen columns"> + <a href="{{ request.urlgen('mediagoblin.moderation.users') }}" + class="return_to_panel button_action" + title="Return to Users Panel"> + {% trans %}Return to Users Panel{% endtrans %}</a> + </div> + </div> + <div class="row"> + <div class="six columns"> {# If no user... #} {% if not user %} <p>{% trans %}Sorry, no such user found.{% endtrans %}</p> @@ -52,127 +62,115 @@ {# Active(?) (or at least verified at some point) user, horray! #} {% else %} - <a href="{{ request.urlgen('mediagoblin.moderation.users') }}" - class="return_to_panel button_action" - title="Return to Users Panel"> - {% trans %}Return to Users Panel{% endtrans %}</a> - <h1> - {%- trans username=user.username %}{{ username }}'s profile{% endtrans -%} - {% if user_banned and user_banned.expiration_date %} - — {% trans expiration_date=user_banned.expiration_date -%} - BANNED until {{ expiration_date }} - {%- endtrans %} - {% elif user_banned %} - — {% trans %}Banned Indefinitely{% endtrans %} - {% endif %} - </h1> - {% if not user.url and not user.bio %} - <div class="profile_sidebar empty_space"> + <h1> + {%- trans username=user.username %}{{ username }}'s profile{% endtrans -%} + {% if user_banned and user_banned.expiration_date %} + — {% trans expiration_date=user_banned.expiration_date -%} + BANNED until {{ expiration_date }} + {%- endtrans %} + {% elif user_banned %} + — {% trans %}Banned Indefinitely{% endtrans %} + {% endif %} + </h1> + {% if not user.url and not user.bio %} + <div class="profile_sidebar empty_space"> + <p> + {% trans -%} + This user hasn't filled in their profile (yet). + {%- endtrans %} + </p> + {% else %} + <div class="profile_sidebar"> + {% include "mediagoblin/utils/profile.html" %} + {% if request.user and + (request.user.id == user.id or request.user.has_privilege('admin')) %} + <a href="{{ request.urlgen('mediagoblin.edit.profile', + user=user.username) }}"> + {%- trans %}Edit profile{% endtrans -%} + </a> + {% endif %} + {% endif %} <p> - {% trans -%} - This user hasn't filled in their profile (yet). - {%- endtrans %} + <a href="{{ request.urlgen('mediagoblin.user_pages.collection_list', + user=user.username) }}"> + {%- trans %}Browse collections{% endtrans -%} + </a> </p> - {% else %} - <div class="profile_sidebar"> - {% include "mediagoblin/utils/profile.html" %} - {% if request.user and - (request.user.id == user.id or request.user.has_privilege('admin')) %} - <a href="{{ request.urlgen('mediagoblin.edit.profile', - user=user.username) }}"> - {%- trans %}Edit profile{% endtrans -%} - </a> - {% endif %} - {% endif %} - <p> - <a href="{{ request.urlgen('mediagoblin.user_pages.collection_list', - user=user.username) }}"> - {%- trans %}Browse collections{% endtrans -%} - </a> - </p> - </div> + </div> {% endif %} + </div> {% if user %} - <h2> - {%- trans username=user.username -%} - Active Reports on {{ username }} - {%- endtrans -%} - </h2> - {% if reports.count() %} - <table class="admin_side_panel"> - <tr> - <th>{%- trans %}Report ID{% endtrans -%}</th> - <th>{%- trans %}Reported Content{% endtrans -%}</th> - <th>{%- trans %}Description of Report{% endtrans -%}</th> - </tr> - {% for report in reports %} - <tr> - <td> - <img src="{{ request.staticdirect('/images/icon_clipboard.png') }}" /> - <a href="{{ request.urlgen('mediagoblin.moderation.reports_detail', - report_id=report.id) }}"> - {%- trans report_number=report.id -%} - Report #{{ report_number }} - {%- endtrans -%} - </a> - </td> - <td> - {% if report.discriminator == "comment_report" %} - <a>{%- trans %}Reported Comment{% endtrans -%}</a> - {% elif report.discriminator == "media_report" %} - <a>{%- trans %}Reported Media Entry{% endtrans -%}</a> - {% endif %} - </td> - <td>{{ report.report_content[:21] }} - {% if report.report_content|count >20 %}...{% endif %}</td> - <td>{%- trans %}Resolve{% endtrans -%}</td> - </tr> - {% endfor %} - <tr><td></td><td></td> - </table> - {% else %} - {%- trans username=user.username -%} - No active reports filed on {{ username }} - {%- endtrans -%} - {% endif %} - <span class="right_align"> - <a href="{{ request.urlgen( - 'mediagoblin.moderation.reports') }}?reported_user={{user.id}}"> - {%- trans - username=user.username %}All reports on {{ username }}{% endtrans %}</a> - · - <a href="{{ request.urlgen( - 'mediagoblin.moderation.reports') }}?reporter={{user.id}}"> - {%- trans username=user.username -%} - All reports that {{ username }} has filed - {%- endtrans %}</a> - </span> - <span class=clear></span> + <div class="ten columns"> + <h2> + {%- trans username=user.username -%} + Active Reports on {{ username }} + {%- endtrans -%} + </h2> + {% if reports.count() %} + <table class="admin_side_panel"> + <tr> + <th>{%- trans %}Report ID{% endtrans -%}</th> + <th>{%- trans %}Reported Content{% endtrans -%}</th> + <th>{%- trans %}Description of Report{% endtrans -%}</th> + </tr> + {% for report in reports %} + <tr> + <td> + <img src="{{ request.staticdirect('/images/icon_clipboard.png') }}" /> + <a href="{{ request.urlgen('mediagoblin.moderation.reports_detail', + report_id=report.id) }}"> + {%- trans report_number=report.id -%} + Report #{{ report_number }} + {%- endtrans -%} + </a> + </td> + <td> + {% if report.discriminator == "comment_report" %} + <a>{%- trans %}Reported Comment{% endtrans -%}</a> + {% elif report.discriminator == "media_report" %} + <a>{%- trans %}Reported Media Entry{% endtrans -%}</a> + {% endif %} + </td> + <td>{{ report.report_content[:21] }} + {% if report.report_content|count >20 %}...{% endif %}</td> + <td>{%- trans %}Resolve{% endtrans -%}</td> + </tr> + {% endfor %} + <tr><td></td><td></td> + </table> + {% else %} + {%- trans username=user.username -%} + No active reports filed on {{ username }} + {%- endtrans -%} + {% endif %} + <p> + <span> + <a href="{{ request.urlgen( + 'mediagoblin.moderation.reports') }}?reported_user={{user.id}}"> + {%- trans + username=user.username %}All reports on {{ username }}{% endtrans %}</a> + · + <a href="{{ request.urlgen( + 'mediagoblin.moderation.reports') }}?reporter={{user.id}}"> + {%- trans username=user.username -%} + All reports that {{ username }} has filed + {%- endtrans %}</a> + </span> + <span class=clear></span> + </p> + </div> + </div> + <div class="row foot"> <h2>{% trans username=user.username -%} {{ username }}'s Privileges{% endtrans %}</h2> - <form method=POST action="{{ request.urlgen( - 'mediagoblin.moderation.ban_or_unban', - user=user.username) }}" class="right_align"> - {{ csrf_token }} - {% if request.user.has_privilege('admin') and not user_banned and - not user.id == request.user.id %} - {{ wtforms_util.render_divs(ban_form) }} - <input type=submit class="button_action" - value="{% trans %}Ban User{% endtrans %}" - id="ban_user_submit" /> - {% elif request.user.has_privilege('admin') and - not user.id == request.user.id %} - <input type=submit class="button_action right_align" - value="{% trans %}UnBan User{% endtrans %}" /> - {% endif %} - </form> + <div class="six columns"> <form action="{{ request.urlgen('mediagoblin.moderation.give_or_take_away_privilege', user=user.username) }}" method=post > <table class="admin_side_panel"> <tr> <th>{% trans %}Privilege{% endtrans %}</th> - <th>{% trans %}User Has Privilege{% endtrans %}</th> + <th>{% trans %}Granted{% endtrans %}</th> </tr> {% for privilege in privileges %} <tr> @@ -202,6 +200,25 @@ {{ csrf_token }} <input type=hidden name=privilege_name id=hidden_privilege_name /> </form> + </div> + <div class="five columns"> + <form method=POST action="{{ request.urlgen( + 'mediagoblin.moderation.ban_or_unban', + user=user.username) }}"> + {{ csrf_token }} + {% if request.user.has_privilege('admin') and not user_banned and + not user.id == request.user.id %} + {{ wtforms_util.render_divs(ban_form) }} + <input type=submit class="button_action" + value="{% trans %}Ban User{% endtrans %}" + id="ban_user_submit" /> + {% elif request.user.has_privilege('admin') and + not user.id == request.user.id %} + <input type=submit class="button_action" + value="{% trans %}UnBan User{% endtrans %}" /> + {% endif %} + </form> + </div> {% endif %} <script> $(document).ready(function(){ @@ -214,4 +231,5 @@ $(document).ready(function(){ }); }); </script> +</div><!--whoami--> {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/user_pages/collection_confirm_delete.html b/mediagoblin/templates/mediagoblin/user_pages/collection_confirm_delete.html index 694eb979..8cfe4b29 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/collection_confirm_delete.html +++ b/mediagoblin/templates/mediagoblin/user_pages/collection_confirm_delete.html @@ -19,6 +19,14 @@ {% import "/mediagoblin/utils/wtforms.html" as wtforms_util %} +{% block title %} + {%- trans collection_title=collection.title + -%} + Delete collection {{ collection_title }} + {%- endtrans %} — {{ super() }} + +{% endblock %} + {% block mediagoblin_content %} <form action="{{ request.urlgen('mediagoblin.user_pages.collection_confirm_delete', @@ -28,7 +36,7 @@ <div class="form_box"> <h1> {%- trans title=collection.title -%} - Really delete {{ title }}? + Really delete collection: {{ title }}? {%- endtrans %} </h1> @@ -45,7 +53,7 @@ {{- collection.url_for_self(request.urlgen) }}"> {%- trans %}Cancel{% endtrans -%} </a> - <input type="submit" value="{% trans %}Delete permanently{% endtrans %}" class="button_form" /> + <input type="submit" value="{% trans %}Delete permanently{% endtrans %}" class="button_form button_warning" /> {{ csrf_token }} </div> </div> diff --git a/mediagoblin/templates/mediagoblin/user_pages/collection_item_confirm_remove.html b/mediagoblin/templates/mediagoblin/user_pages/collection_item_confirm_remove.html index dc31d90f..84d3eb4c 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/collection_item_confirm_remove.html +++ b/mediagoblin/templates/mediagoblin/user_pages/collection_item_confirm_remove.html @@ -19,6 +19,14 @@ {% import "/mediagoblin/utils/wtforms.html" as wtforms_util %} +{% block title %} + {%- trans media_title=collection_item.get_media_entry.title, + collection_title=collection_item.in_collection.title -%} + Remove {{ media_title }} from {{ collection_title }} + {%- endtrans %} — {{ super() }} + +{% endblock %} + {% block mediagoblin_content %} <form action="{{ request.urlgen('mediagoblin.user_pages.collection_item_confirm_remove', @@ -51,7 +59,7 @@ {{- collection_item.in_collection.url_for_self(request.urlgen) }}"> {%- trans %}Cancel{% endtrans -%} </a> - <input type="submit" value="{% trans %}Remove{% endtrans %}" class="button_form" /> + <input type="submit" value="{% trans %}Remove{% endtrans %}" class="button_form button_warning" /> {{ csrf_token }} </div> </div> diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html index 81e5013e..e01cce5c 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/media.html +++ b/mediagoblin/templates/mediagoblin/user_pages/media.html @@ -32,9 +32,9 @@ {% template_hook("media_head") %} {% endblock mediagoblin_head %} - {% block mediagoblin_content %} - <p class="context"> +<div class="row foot"> + <p class="eleven columns context"> {%- trans user_url=request.urlgen( 'mediagoblin.user_pages.user_home', user=media.get_uploader.username), @@ -42,8 +42,11 @@ ❖ Browsing media by <a href="{{user_url}}">{{username}}</a> {%- endtrans -%} </p> - {% include "mediagoblin/utils/prev_next.html" %} - <div class="media_pane"> + <div class="five columns"> + {% include "mediagoblin/utils/prev_next.html" %} + </div> +</div> + <div class="media_pane eleven columns"> <div class="media_image_container"> {% block mediagoblin_media %} {% set display_media = request.app.public_store.file_url( @@ -67,12 +70,14 @@ {% endif %} {% endblock %} </div> + <div class="row head foot"> <h2 class="media_title"> {{ media.title }} </h2> {% if request.user and (media.uploader == request.user.id or request.user.has_privilege('admin')) %} + <div class="pull-right" style="padding-top:20px;"> {% set edit_url = request.urlgen('mediagoblin.edit.edit_media', user= media.get_uploader.username, media_id=media.id) %} @@ -80,13 +85,15 @@ {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete', user= media.get_uploader.username, media_id=media.id) %} - <a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a> - + <a class="button_action button_warning" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a> + </div> {% endif %} {% autoescape False %} <p>{{ media.description_html }}</p> {% endautoescape %} + </div> {% if comments and request.user and request.user.has_privilege('commenter') %} + <div class="media_comments"> {% if app_config['allow_comments'] %} <a {% if not request.user %} @@ -160,9 +167,15 @@ </ul> {{ render_pagination(request, pagination, media.url_for_self(request.urlgen)) }} + {% else %} + <div class="empty_space no_background"> {% endif %} </div> - <div class="media_sidebar"> + + </div> + + + <div class="five columns media_sidebar"> <h3>{% trans %}Added{% endtrans %}</h3> <p><span title="{{ media.created.strftime("%I:%M%p %Y-%m-%d") }}"> {%- trans formatted_time=timesince(media.created) -%} @@ -220,6 +233,7 @@ {% block mediagoblin_sidebar %} {% endblock %} - </div> + </div><!--end media_sidebar--> + <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 1d7dcc17..c948ccec 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html +++ b/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html @@ -46,7 +46,7 @@ <div class="form_submit_buttons"> {# TODO: This isn't a button really... might do unexpected things :) #} <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" /> + <input type="submit" value="{% trans %}Delete permanently{% endtrans %}" class="button_form button_warning" /> {{ csrf_token }} </div> </div> diff --git a/mediagoblin/templates/mediagoblin/user_pages/user.html b/mediagoblin/templates/mediagoblin/user_pages/user.html index 14a67431..51baa9bb 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/user.html +++ b/mediagoblin/templates/mediagoblin/user_pages/user.html @@ -41,6 +41,7 @@ {% block mediagoblin_content -%} + <div class="six columns"> <h1> {%- trans username=user.username %}{{ username }}'s profile{% endtrans -%} </h1> @@ -81,9 +82,9 @@ </a> </p> </div> - + </div><!--end six columns--> {% if media_entries.count() %} - <div class="profile_showcase"> + <div class="ten columns profile_showcase"> {{ object_gallery(request, media_entries, pagination, pagination_base_url=user_gallery_url, col_number=3) }} {% include "mediagoblin/utils/object_gallery.html" %} @@ -101,7 +102,7 @@ </div> {% else %} {% if request.user and (request.user.id == user.id) %} - <div class="profile_showcase empty_space"> + <div class="ten columns profile_showcase empty_space"> <p> {% trans -%} This is where your media will appear, but you don't seem to have added anything yet. @@ -113,7 +114,7 @@ </a> </div> {% else %} - <div class="profile_showcase empty_space"> + <div class="ten columns profile_showcase empty_space"> <p> {% trans -%} There doesn't seem to be any media here yet... diff --git a/mediagoblin/templates/mediagoblin/utils/collection_gallery.html b/mediagoblin/templates/mediagoblin/utils/collection_gallery.html index dfe2ebe2..64b30815 100644 --- a/mediagoblin/templates/mediagoblin/utils/collection_gallery.html +++ b/mediagoblin/templates/mediagoblin/utils/collection_gallery.html @@ -19,15 +19,15 @@ {% from "mediagoblin/utils/pagination.html" import render_pagination %} {% macro media_grid(request, collection_items, col_number=5) %} - <table class="thumb_gallery"> + <div class="thumb_gallery"> {% for row in collection_items|batch(col_number) %} - <tr class="thumb_row + <div class="row thumb_row {%- if loop.first %} thumb_row_first {%- elif loop.last %} thumb_row_last{% endif %}"> {% for item in row %} {% set media_entry = item.get_media_entry %} {% set entry_url = media_entry.url_for_self(request.urlgen) %} - <td class="media_thumbnail thumb_entry + <div class="three columns media_thumbnail thumb_entry {%- if loop.first %} thumb_entry_first {%- elif loop.last %} thumb_entry_last{% endif %}"> <a href="{{ entry_url }}"> @@ -49,11 +49,11 @@ {%- trans %}(remove){% endtrans -%} </a> {% endif %} - </td> + </div> {% endfor %} - </tr> + </div> {% endfor %} - </table> + </div> {%- endmacro %} {# diff --git a/mediagoblin/templates/mediagoblin/utils/object_gallery.html b/mediagoblin/templates/mediagoblin/utils/object_gallery.html index d328b552..1b4a15ed 100644 --- a/mediagoblin/templates/mediagoblin/utils/object_gallery.html +++ b/mediagoblin/templates/mediagoblin/utils/object_gallery.html @@ -19,14 +19,14 @@ {% from "mediagoblin/utils/pagination.html" import render_pagination %} {% macro media_grid(request, media_entries, col_number=5) %} - <table class="thumb_gallery"> + <div class="thumb_gallery"> {% for row in media_entries|batch(col_number) %} - <tr class="thumb_row + <div class="row 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 + <div class="three columns media_thumbnail thumb_entry {%- if loop.first %} thumb_entry_first {%- elif loop.last %} thumb_entry_last{% endif %}"> <a href="{{ entry_url }}"> @@ -35,11 +35,11 @@ {% if entry.title %} <a class="thumb_entry_title" href="{{ entry_url }}">{{ entry.title }}</a> {% endif %} - </td> + </div> {% endfor %} - </tr> + </div> {% endfor %} - </table> + </div> {%- endmacro %} {# diff --git a/mediagoblin/themes/airy/assets/css/airy.css b/mediagoblin/themes/airy/assets/css/airy.css index c4bea5cb..03d2cab8 100644 --- a/mediagoblin/themes/airy/assets/css/airy.css +++ b/mediagoblin/themes/airy/assets/css/airy.css @@ -18,6 +18,7 @@ a { border-width: 1px 1px 2px; color: #4a4a4a; font-weight: bold; + box-shadow: 0 0 3px #E4E4E4 inset; } p.navigation_button { @@ -33,6 +34,10 @@ header { margin-right: auto; } +.header_right a { + color: #4a4a4a; +} + @media screen and (max-width: 940px) { header { width: 100%; @@ -50,6 +55,7 @@ footer { border-color: #E4E4E4; border-width: 1px 1px 2px; padding: 5px 10px; + box-shadow: 0 0 3px #E4E4E4 inset; } .button_action_highlight, .button_form { @@ -57,6 +63,21 @@ footer { background-color: #37AB74; border-color: #6CAA8E; border-width: 1px 1px 2px; + box-shadow: 0 0 3px #6CAA8E inset; +} + +.button_info { + background-color: #9dbed5; + border-color: #E4E4E4; + color: #C3C3C3; + box-shadow: 0 0 3px #49717F inset; +} + +.button_warning { + background-color: #d6ae96; + border-color: #E4E4E4; + color: #4a4a4a; + box-shadow: 0 0 3px #7F6859 inset; } input, textarea { @@ -71,6 +92,8 @@ input, textarea { .media_thumbnail { background-color: #fff; + border-color: #e4e4e4; + box-shadow: 0 0 3px #c4c4c4; } .media_thumbnail a { |