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

View File

@ -18,17 +18,12 @@
{% extends "mediagoblin/base.html" %}
{% 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>
<div class="grid_8 alpha">
<p>{% trans %}There doesn't seem to be a page at this address. Sorry!{% 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 -%}
</p>
</div>
<div class="grid_8 omega">
<img src="{{ request.staticdirect('/images/404.png') }}"
alt="{% trans %}Image of 404 goblin stressing out{% endtrans %}" />
</div>
<p>{% trans %}There doesn't seem to be a page at this address. Sorry!{% 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 -%}
</p>
<div class="clear"></div>
{% endblock %}

View File

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

View File

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

View File

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

View File

@ -43,7 +43,7 @@
<form action="{{ request.urlgen('mediagoblin.auth.register') }}"
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>
{{ wtforms_util.render_divs(register_form) }}
{{ csrf_token }}

View File

@ -23,7 +23,7 @@
user= media.get_uploader().username,
media= media._id) }}"
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>
<div style="text-align: center;" >
<img src="{{ request.app.public_store.file_url(

View File

@ -25,7 +25,7 @@
user= media.get_uploader().username,
media= media._id) }}"
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>
<div style="text-align: center;" >
<img src="{{ request.app.public_store.file_url(

View File

@ -24,7 +24,7 @@
<form action="{{ request.urlgen('mediagoblin.edit.profile') }}?username={{
user.username }}"
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 username=user.username -%}
Editing {{ username }}'s profile

View File

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

View File

@ -23,22 +23,18 @@
{% if request.user %}
<h1>{% trans %}Explore{% endtrans %}</h1>
{% else %}
<div class="grid_11 alpha">
<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 %}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 %}
<p>{% trans %}Don't have one yet? It's easy!{% endtrans %}</p>
{% trans register_url=request.urlgen('mediagoblin.auth.register') -%}
<a class="button_action_highlight" href="{{ register_url }}">Create an account at this site</a>
or
<a class="button_action" href="http://wiki.mediagoblin.org/HackingHowto">Set up MediaGoblin on your own server</a>
{%- endtrans %}
{% endif %}
</div>
<div class="grid_5 omega">
<img src="{{ request.staticdirect('/images/frontpage_image.png') }}" />
</div>
<img class="right_align" src="{{ request.staticdirect('/images/frontpage_image.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>
<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 %}
<p>{% trans %}Don't have one yet? It's easy!{% endtrans %}</p>
{% trans register_url=request.urlgen('mediagoblin.auth.register') -%}
<a class="button_action_highlight" href="{{ register_url }}">Create an account at this site</a>
or
<a class="button_action" href="http://wiki.mediagoblin.org/HackingHowto">Set up MediaGoblin on your own server</a>
{%- endtrans %}
{% endif %}
<div class="clear"></div>
{% endif %}
<h2>{% trans %}Most recent media{% endtrans %}</h2>

View File

@ -22,7 +22,7 @@
{% block mediagoblin_content %}
<form action="{{ request.urlgen('mediagoblin.submit.start') }}"
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>
{{ wtforms_util.render_divs(submit_form) }}
<div class="form_submit_buttons">

View File

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

View File

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

View File

@ -46,7 +46,7 @@
{% elif user.status == "needs_email_verification" %}
{% if user == request.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>
<p>
@ -66,7 +66,7 @@
</div>
{% else %}
{# 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>
<p>
@ -91,7 +91,7 @@
{% if not user.url and not user.bio %}
{% if request.user._id == user._id %}
<div class="grid_6 alpha empty_space">
<div class="profile_sidebar empty_space">
<p>
{% trans %}Here's a spot to tell others about yourself.{% endtrans %}
</p>
@ -102,7 +102,7 @@
</a>
</div>
{% else %}
<div class="grid_6 alpha empty_space">
<div class="profile_sidebar empty_space">
<p>
{% trans -%}
This user hasn't filled in their profile (yet).
@ -111,7 +111,7 @@
</div>
{% endif %}
{% else %}
<div class="grid_6 alpha">
<div class="profile_sidebar">
{% include "mediagoblin/utils/profile.html" %}
{% if request.user._id == user._id or request.user.is_admin %}
<a href="{{ request.urlgen('mediagoblin.edit.profile') }}?username={{
@ -123,7 +123,7 @@
{% endif %}
{% if media_entries.count() %}
<div class="grid_10 omega">
<div class="profile_showcase">
{{ object_gallery(request, media_entries, pagination,
pagination_base_url=user_gallery_url, col_number=3) }}
{% include "mediagoblin/utils/object_gallery.html" %}
@ -141,7 +141,7 @@
</div>
{% else %}
{% if request.user._id == user._id %}
<div class="grid_10 omega empty_space">
<div class="profile_showcase empty_space">
<p>
{% trans -%}
This is where your media will appear, but you don't seem to have added anything yet.
@ -153,7 +153,7 @@
</a>
</div>
{% else %}
<div class="grid_10 omega empty_space">
<div class="profile_showcase empty_space">
<p>
{% trans -%}
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) %}
{% 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 #}
{% if prev_entry_url %}
<a class="navigation_button navigation_left" href="{{ prev_entry_url }}">
&larr; {% trans %}newer{% endtrans %}
</a>
{% else %}
{# This is the first entry. display greyed-out 'previous' image #}
<p class="navigation_button navigation_left">
&larr; {% 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 %} &rarr;
</a>
{% else %}
{# This is the last entry. display greyed-out 'next' image #}
<p class="navigation_button">
{% trans %}older{% endtrans %} &rarr;
</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 }}">
&larr; {% trans %}newer{% endtrans %}
</a>
{% else %}
{# This is the first entry. display greyed-out 'previous' image #}
<p class="navigation_button navigation_left">
&larr; {% 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 %} &rarr;
</a>
{% else %}
{# This is the last entry. display greyed-out 'next' image #}
<p class="navigation_button">
{% trans %}older{% endtrans %} &rarr;
</p>
{% endif %}
{% endif %}