Lots of little fixes and removal of all 960.gs classes:

* Removed <p> margin-top
* Vertically align logo so Add-media button does not fall off
* Remove last 960.gs traces (grid_X/container_X) and add custom classes/sizes to css
* Add clear class
* Update form_box and add form_box_xl for bigger forms
* Switch all pages that use forms to new classes
* Remove padding from notification messages so they take full width
* Other tiny fixes I forgot about
This commit is contained in:
Jef van Schendel 2011-12-30 14:23:12 +01:00
parent 00c1d00771
commit 3ea6a305ce
16 changed files with 115 additions and 105 deletions

View File

@ -44,24 +44,28 @@ form {
/* text styles */ /* text styles */
h1{ h1 {
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 15px; margin-top: 15px;
color: #fff; color: #fff;
font-size: 1.875em; font-size: 1.875em;
} }
h2{ h2 {
font-size: 1.375em; font-size: 1.375em;
margin-top: 20px; margin-top: 20px;
color: #fff; color: #fff;
} }
h3{ h3 {
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
font-size: 1.125em; font-size: 1.125em;
} }
p {
margin-top: 0px;
}
a { a {
color: #86D4B1; color: #86D4B1;
} }
@ -103,12 +107,16 @@ input, textarea {
float: right; float: right;
} }
a.mediagoblin_logo{ a.mediagoblin_logo {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
margin-right: 8px; margin-right: 8px;
} }
.mediagoblin_logo img {
vertical-align: middle;
}
.mediagoblin_content { .mediagoblin_content {
width: 940px; width: 940px;
margin-left: 10px; margin-left: 10px;
@ -143,6 +151,18 @@ a.mediagoblin_logo{
float: left; float: left;
} }
.profile_sidebar {
width: 340px;
margin-right: 10px;
float: left;
}
.profile_showcase {
width: 580px;
margin-left: 10px;
float: left;
}
/* common website elements */ /* common website elements */
.button_action, .button_action_highlight { .button_action, .button_action_highlight {
@ -219,28 +239,33 @@ text-align: center;
float: right; float: right;
} }
textarea#comment_content { .clear {
width: 634px; clear: both;
height: 90px; display: block;
border: none; overflow: hidden;
background-color: #f1f1f1; visibility: hidden;
padding: 3px; width: 0;
height: 0;
} }
/* forms */ /* forms */
.form_box { .form_box,.form_box_xl {
background-color: #222; background-color: #222;
background-image: url("../images/background_lines.png"); background-image: url("../images/background_lines.png");
background-repeat: repeat-x; background-repeat: repeat-x;
padding-bottom: 30px; width: 340px;
padding-top: 30px; padding: 30px 60px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: block; display: block;
float: none; float: none;
} }
.form_box_xl {
width: 460px;
}
.edit_box { .edit_box {
background-image: url("../images/background_edit.png"); background-image: url("../images/background_edit.png");
} }
@ -294,6 +319,14 @@ textarea#comment_content {
margin-bottom: 0px; margin-bottom: 0px;
} }
textarea#comment_content {
width: 634px;
height: 90px;
border: none;
background-color: #f1f1f1;
padding: 3px;
}
/* media galleries */ /* media galleries */
.media_thumbnail { .media_thumbnail {
@ -358,6 +391,7 @@ img.media_icon {
ul.mediagoblin_messages { ul.mediagoblin_messages {
list-style: none inside; list-style: none inside;
color: #f7f7f7; color: #f7f7f7;
padding: 0;
} }
.mediagoblin_messages li { .mediagoblin_messages li {

View File

@ -18,17 +18,12 @@
{% extends "mediagoblin/base.html" %} {% extends "mediagoblin/base.html" %}
{% block mediagoblin_content %} {% block mediagoblin_content %}
<img class="right_align" src="{{ request.staticdirect('/images/404.png') }}"
alt="{% trans %}Image of 404 goblin stressing out{% endtrans %}" />
<h1>{% trans %}Oops!{% endtrans %}</h1> <h1>{% trans %}Oops!{% endtrans %}</h1>
<p>{% trans %}There doesn't seem to be a page at this address. Sorry!{% endtrans %}</p>
<div class="grid_8 alpha"> <p>
<p>{% trans %}There doesn't seem to be a page at this address. Sorry!{% endtrans %}</p> {%- trans %}If you're sure the address is correct, maybe the page you're looking for has been moved or deleted.{% endtrans -%}
<p> </p>
{%- trans %}If you're sure the address is correct, maybe the page you're looking for has been moved or deleted.{% endtrans -%} <div class="clear"></div>
</p>
</div>
<div class="grid_8 omega">
<img src="{{ request.staticdirect('/images/404.png') }}"
alt="{% trans %}Image of 404 goblin stressing out{% endtrans %}" />
</div>
{% endblock %} {% endblock %}

View File

@ -20,19 +20,15 @@
{% import "/mediagoblin/utils/wtforms.html" as wtforms_util %} {% import "/mediagoblin/utils/wtforms.html" as wtforms_util %}
{% block mediagoblin_content %} {% block mediagoblin_content %}
<form action="{{ request.urlgen('mediagoblin.auth.verify_forgot_password') }}" <form action="{{ request.urlgen('mediagoblin.auth.verify_forgot_password') }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
{{ csrf_token }} {{ csrf_token }}
<div class="form_box">
<div class="grid_6 prefix_1 suffix_1 form_box">
<h1>{% trans %}Set your new password{% endtrans %}</h1> <h1>{% trans %}Set your new password{% endtrans %}</h1>
{{ wtforms_util.render_divs(cp_form) }} {{ wtforms_util.render_divs(cp_form) }}
<div class="form_submit_buttons"> <div class="form_submit_buttons">
<input type="submit" value="{% trans %}Set password{% endtrans %}" class="button_form"/> <input type="submit" value="{% trans %}Set password{% endtrans %}" class="button_form"/>
</div> </div>
</div> </div>
</form> </form>
{% endblock %} {% endblock %}

View File

@ -23,7 +23,7 @@
<form action="{{ request.urlgen('mediagoblin.auth.forgot_password') }}" <form action="{{ request.urlgen('mediagoblin.auth.forgot_password') }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
{{ csrf_token }} {{ csrf_token }}
<div class="grid_6 prefix_1 suffix_1 form_box"> <div class="form_box">
<h1>{% trans %}Recover password{% endtrans %}</h1> <h1>{% trans %}Recover password{% endtrans %}</h1>
{{ wtforms_util.render_divs(fp_form) }} {{ wtforms_util.render_divs(fp_form) }}
<div class="form_submit_buttons"> <div class="form_submit_buttons">

View File

@ -23,7 +23,7 @@
<form action="{{ request.urlgen('mediagoblin.auth.login') }}" <form action="{{ request.urlgen('mediagoblin.auth.login') }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
{{ csrf_token }} {{ csrf_token }}
<div class="grid_6 prefix_1 suffix_1 form_box"> <div class="form_box">
<h1>{% trans %}Log in{% endtrans %}</h1> <h1>{% trans %}Log in{% endtrans %}</h1>
{% if login_failed %} {% if login_failed %}
<div class="form_field_error"> <div class="form_field_error">

View File

@ -43,7 +43,7 @@
<form action="{{ request.urlgen('mediagoblin.auth.register') }}" <form action="{{ request.urlgen('mediagoblin.auth.register') }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
<div class="grid_6 prefix_1 suffix_1 form_box"> <div class="form_box">
<h1>{% trans %}Create an account!{% endtrans %}</h1> <h1>{% trans %}Create an account!{% endtrans %}</h1>
{{ wtforms_util.render_divs(register_form) }} {{ wtforms_util.render_divs(register_form) }}
{{ csrf_token }} {{ csrf_token }}

View File

@ -23,7 +23,7 @@
user= media.get_uploader().username, user= media.get_uploader().username,
media= media._id) }}" media= media._id) }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
<div class="grid_8 prefix_1 suffix_1 edit_box form_box"> <div class="form_box">
<h1>Editing attachments for {{ media.title }}</h1> <h1>Editing attachments for {{ media.title }}</h1>
<div style="text-align: center;" > <div style="text-align: center;" >
<img src="{{ request.app.public_store.file_url( <img src="{{ request.app.public_store.file_url(

View File

@ -25,7 +25,7 @@
user= media.get_uploader().username, user= media.get_uploader().username,
media= media._id) }}" media= media._id) }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
<div class="grid_8 prefix_1 suffix_1 edit_box form_box"> <div class="form_box_xl">
<h1>{% trans media_title=media.title %}Editing {{ media_title }}{% endtrans %}</h1> <h1>{% trans media_title=media.title %}Editing {{ media_title }}{% endtrans %}</h1>
<div style="text-align: center;" > <div style="text-align: center;" >
<img src="{{ request.app.public_store.file_url( <img src="{{ request.app.public_store.file_url(

View File

@ -24,7 +24,7 @@
<form action="{{ request.urlgen('mediagoblin.edit.profile') }}?username={{ <form action="{{ request.urlgen('mediagoblin.edit.profile') }}?username={{
user.username }}" user.username }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
<div class="grid_8 prefix_1 suffix_1 edit_box form_box"> <div class="form_box_xl">
<h1> <h1>
{%- trans username=user.username -%} {%- trans username=user.username -%}
Editing {{ username }}'s profile Editing {{ username }}'s profile

View File

@ -35,14 +35,9 @@
{% trans %}Media tagged with: {{ tag_name }}{% endtrans %} {% trans %}Media tagged with: {{ tag_name }}{% endtrans %}
</h1> </h1>
<div class="container_16 media_gallery"> {{ object_gallery(request, media_entries, pagination) }}
{{ object_gallery(request, media_entries, pagination) }}
</div>
<div class="grid_16"> {% set feed_url = request.urlgen('mediagoblin.listings.tag_atom_feed',
{% set feed_url = request.urlgen( tag=tag_slug) %}
'mediagoblin.listings.tag_atom_feed', {% include "mediagoblin/utils/feed_link.html" %}
tag=tag_slug) %}
{% include "mediagoblin/utils/feed_link.html" %}
</div>
{% endblock %} {% endblock %}

View File

@ -23,22 +23,18 @@
{% if request.user %} {% if request.user %}
<h1>{% trans %}Explore{% endtrans %}</h1> <h1>{% trans %}Explore{% endtrans %}</h1>
{% else %} {% else %}
<div class="grid_11 alpha"> <img class="right_align" src="{{ request.staticdirect('/images/frontpage_image.png') }}" />
<h1>{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}</h1> <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> <p>{% trans %}This site is running <a href="http://mediagoblin.org">MediaGoblin</a>, an extraordinarily great piece of media hosting software.{% endtrans %}</p>
<p>{% trans %}To add your own media, place comments, save your favourites and more, you can log in with your MediaGoblin account.{% endtrans %}</p> <p>{% trans %}To add your own media, place comments, save your favourites and more, you can log in with your MediaGoblin account.{% endtrans %}</p>
{% if allow_registration %} {% if allow_registration %}
<p>{% trans %}Don't have one yet? It's easy!{% endtrans %}</p> <p>{% trans %}Don't have one yet? It's easy!{% endtrans %}</p>
{% trans register_url=request.urlgen('mediagoblin.auth.register') -%} {% trans register_url=request.urlgen('mediagoblin.auth.register') -%}
<a class="button_action_highlight" href="{{ register_url }}">Create an account at this site</a> <a class="button_action_highlight" href="{{ register_url }}">Create an account at this site</a>
or or
<a class="button_action" href="http://wiki.mediagoblin.org/HackingHowto">Set up MediaGoblin on your own server</a> <a class="button_action" href="http://wiki.mediagoblin.org/HackingHowto">Set up MediaGoblin on your own server</a>
{%- endtrans %} {%- endtrans %}
{% endif %} {% endif %}
</div>
<div class="grid_5 omega">
<img src="{{ request.staticdirect('/images/frontpage_image.png') }}" />
</div>
<div class="clear"></div> <div class="clear"></div>
{% endif %} {% endif %}
<h2>{% trans %}Most recent media{% endtrans %}</h2> <h2>{% trans %}Most recent media{% endtrans %}</h2>

View File

@ -22,7 +22,7 @@
{% block mediagoblin_content %} {% block mediagoblin_content %}
<form action="{{ request.urlgen('mediagoblin.submit.start') }}" <form action="{{ request.urlgen('mediagoblin.submit.start') }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
<div class="grid_8 prefix_1 suffix_1 form_box"> <div class="form_box_xl">
<h1>{% trans %}Add your media{% endtrans %}</h1> <h1>{% trans %}Add your media{% endtrans %}</h1>
{{ wtforms_util.render_divs(submit_form) }} {{ wtforms_util.render_divs(submit_form) }}
<div class="form_submit_buttons"> <div class="form_submit_buttons">

View File

@ -42,14 +42,10 @@
{%- endtrans %} {%- endtrans %}
</h1> </h1>
<div class="container_16 media_gallery"> {{ object_gallery(request, media_entries, pagination) }}
{{ object_gallery(request, media_entries, pagination) }}
</div> {% set feed_url = request.urlgen('mediagoblin.user_pages.atom_feed',
user=user.username) %}
<div class="grid_16"> {% include "mediagoblin/utils/feed_link.html" %}
{% set feed_url = request.urlgen(
'mediagoblin.user_pages.atom_feed',
user=user.username) %}
{% include "mediagoblin/utils/feed_link.html" %}
</div>
{% endblock %} {% endblock %}

View File

@ -25,7 +25,7 @@
user=media.get_uploader().username, user=media.get_uploader().username,
media=media._id) }}" media=media._id) }}"
method="POST" enctype="multipart/form-data"> method="POST" enctype="multipart/form-data">
<div class="grid_8 prefix_1 suffix_1 edit_box form_box"> <div class="form_box">
<h1> <h1>
{%- trans title=media.title -%} {%- trans title=media.title -%}
Really delete {{ title }}? Really delete {{ title }}?

View File

@ -46,7 +46,7 @@
{% elif user.status == "needs_email_verification" %} {% elif user.status == "needs_email_verification" %}
{% if user == request.user %} {% if user == request.user %}
{# this should only be visible when you are this user #} {# this should only be visible when you are this user #}
<div class="grid_6 prefix_1 suffix_1 form_box"> <div class="form_box">
<h1>{% trans %}Email verification needed{% endtrans %}</h1> <h1>{% trans %}Email verification needed{% endtrans %}</h1>
<p> <p>
@ -66,7 +66,7 @@
</div> </div>
{% else %} {% else %}
{# if the user is not you, but still needs to verify their email #} {# if the user is not you, but still needs to verify their email #}
<div class="grid_6 prefix_1 suffix_1 form_box"> <div class="form_box">
<h1>{% trans %}Email verification needed{% endtrans %}</h1> <h1>{% trans %}Email verification needed{% endtrans %}</h1>
<p> <p>
@ -91,7 +91,7 @@
{% if not user.url and not user.bio %} {% if not user.url and not user.bio %}
{% if request.user._id == user._id %} {% if request.user._id == user._id %}
<div class="grid_6 alpha empty_space"> <div class="profile_sidebar empty_space">
<p> <p>
{% trans %}Here's a spot to tell others about yourself.{% endtrans %} {% trans %}Here's a spot to tell others about yourself.{% endtrans %}
</p> </p>
@ -102,7 +102,7 @@
</a> </a>
</div> </div>
{% else %} {% else %}
<div class="grid_6 alpha empty_space"> <div class="profile_sidebar empty_space">
<p> <p>
{% trans -%} {% trans -%}
This user hasn't filled in their profile (yet). This user hasn't filled in their profile (yet).
@ -111,7 +111,7 @@
</div> </div>
{% endif %} {% endif %}
{% else %} {% else %}
<div class="grid_6 alpha"> <div class="profile_sidebar">
{% include "mediagoblin/utils/profile.html" %} {% include "mediagoblin/utils/profile.html" %}
{% if request.user._id == user._id or request.user.is_admin %} {% if request.user._id == user._id or request.user.is_admin %}
<a href="{{ request.urlgen('mediagoblin.edit.profile') }}?username={{ <a href="{{ request.urlgen('mediagoblin.edit.profile') }}?username={{
@ -123,7 +123,7 @@
{% endif %} {% endif %}
{% if media_entries.count() %} {% if media_entries.count() %}
<div class="grid_10 omega"> <div class="profile_showcase">
{{ object_gallery(request, media_entries, pagination, {{ object_gallery(request, media_entries, pagination,
pagination_base_url=user_gallery_url, col_number=3) }} pagination_base_url=user_gallery_url, col_number=3) }}
{% include "mediagoblin/utils/object_gallery.html" %} {% include "mediagoblin/utils/object_gallery.html" %}
@ -141,7 +141,7 @@
</div> </div>
{% else %} {% else %}
{% if request.user._id == user._id %} {% if request.user._id == user._id %}
<div class="grid_10 omega empty_space"> <div class="profile_showcase empty_space">
<p> <p>
{% trans -%} {% trans -%}
This is where your media will appear, but you don't seem to have added anything yet. This is where your media will appear, but you don't seem to have added anything yet.
@ -153,7 +153,7 @@
</a> </a>
</div> </div>
{% else %} {% else %}
<div class="grid_10 omega empty_space"> <div class="profile_showcase empty_space">
<p> <p>
{% trans -%} {% trans -%}
There doesn't seem to be any media here yet... There doesn't seem to be any media here yet...

View File

@ -21,28 +21,26 @@
{% set next_entry_url = media.url_to_next(request.urlgen) %} {% set next_entry_url = media.url_to_next(request.urlgen) %}
{% if prev_entry_url or next_entry_url %} {% if prev_entry_url or next_entry_url %}
<div class="grid_5 alpha omega"> {# There are no previous entries for the very first media entry #}
{# There are no previous entries for the very first media entry #} {% if prev_entry_url %}
{% if prev_entry_url %} <a class="navigation_button navigation_left" href="{{ prev_entry_url }}">
<a class="navigation_button navigation_left" href="{{ prev_entry_url }}"> &larr; {% trans %}newer{% endtrans %}
&larr; {% trans %}newer{% endtrans %} </a>
</a> {% else %}
{% else %} {# This is the first entry. display greyed-out 'previous' image #}
{# This is the first entry. display greyed-out 'previous' image #} <p class="navigation_button navigation_left">
<p class="navigation_button navigation_left"> &larr; {% trans %}newer{% endtrans %}
&larr; {% trans %}newer{% endtrans %} </p>
</p> {% endif %}
{% endif %} {# Likewise, this could be the very last media entry #}
{# Likewise, this could be the very last media entry #} {% if next_entry_url %}
{% if next_entry_url %} <a class="navigation_button" href="{{ next_entry_url }}">
<a class="navigation_button" href="{{ next_entry_url }}"> {% trans %}older{% endtrans %} &rarr;
{% trans %}older{% endtrans %} &rarr; </a>
</a> {% else %}
{% else %} {# This is the last entry. display greyed-out 'next' image #}
{# This is the last entry. display greyed-out 'next' image #} <p class="navigation_button">
<p class="navigation_button"> {% trans %}older{% endtrans %} &rarr;
{% trans %}older{% endtrans %} &rarr; </p>
</p> {% endif %}
{% endif %}
</div>
{% endif %} {% endif %}