Revert "Layout overhaul time!"

This reverts a whole bunch of commits, fb1dc4f5 thru 92e8ca79, where
an experimental new layout was played with.  Unfortunately, this
layout broke the look and feel of master, even though it was going in
the right direction for mobile stuff.  Jef said he'll do things in a
branch!
This commit is contained in:
Christopher Allan Webber 2012-02-13 21:31:11 -06:00
parent 53280164e2
commit 38816c6607
8 changed files with 146 additions and 173 deletions

View File

@ -109,7 +109,7 @@ input, textarea {
.container {
margin: auto;
width: 96%;
max-width: 820px;
max-width: 940px;
}
header {
@ -151,19 +151,16 @@ footer {
}
.media_pane {
width: 560px;
width: 640px;
margin-left: 0px;
margin-right: 10px;
float: left;
}
img.media_image {
width: 100%;
}
.media_sidebar {
width: 240px;
width: 280px;
margin-left: 10px;
margin-right: 0px;
float: left;
}
@ -255,6 +252,15 @@ text-align: center;
float: right;
}
textarea#comment_content {
resize: vertical;
width: 634px;
height: 90px;
border: none;
background-color: #f1f1f1;
padding: 3px;
}
.clear {
clear: both;
display: block;
@ -264,15 +270,6 @@ text-align: center;
height: 0;
}
h3.sidedata {
border: none;
background-color: #212121;
border-radius: 4px 4px 0 0;
padding: 3px 8px;
margin: 20px 0 5px 0;
font-size: 1em;
}
/* forms */
.form_box,.form_box_xl {
@ -355,18 +352,13 @@ textarea#description, textarea#bio {
}
textarea#comment_content {
resize: vertical;
width: 100%;
width: 634px;
height: 90px;
border: none;
background-color: #f1f1f1;
padding: 3px;
}
#form_comment .form_field_input {
padding-right: 6px;
}
/* media galleries */
.media_thumbnail {
@ -377,7 +369,6 @@ textarea#comment_content {
margin: 0px 4px 10px 4px;
text-align: center;
font-size: 0.875em;
list-style: none;
}
.media_thumbnail a {
@ -389,12 +380,6 @@ textarea#comment_content {
h2.media_title {
margin-bottom: 0px;
display: inline-block;
}
p.context {
display: inline-block;
padding-top: 4px;
}
p.media_specs {
@ -421,21 +406,19 @@ img.media_icon {
/* navigation */
.navigation {
float: right;
}
.navigation_button {
width: 135px;
display: inline-block;
display: block;
float: left;
text-align: center;
background-color: #1d1d1d;
border: 1px solid;
border-color: #2c2c2c #232323 #1a1a1a;
border-radius: 4px;
text-decoration: none;
padding: 4px 0 8px;
margin: 0 0 6px
padding: 12px 0 16px;
font-size: 1.4em;
margin: 0 0 20px
}
.navigation_left {
@ -520,43 +503,23 @@ table.media_panel th {
}
/* Media queries and other responsivisivity */
@media screen and (max-width: 820px) {
@media screen and (max-width: 680px) {
.media_pane {
width: 100%;
margin: 0px;
}
.media_sidebar {
width: 100%;
margin: 0px;
}
img.media_image {
width: 100%;
}
}
@media screen and (max-width: 960px) {
.profile_sidebar {
width: 100%;
margin: 0px;
}
.profile_showcase {
width: 100%;
margin: 0px;
}
.navigation {
float: none;
}
.navigation_button {
width: 49%;
float: right;
}
.navigation_left {
margin-right: 0;
float: left;
}
}

View File

@ -40,84 +40,67 @@
{% endblock mediagoblin_head %}
{% block mediagoblin_content %}
{% trans user_url=request.urlgen(
'mediagoblin.user_pages.user_home',
user=media.get_uploader.username),
username=media.get_uploader.username -%}
<p class="context">❖ Browsing media by <a href="{{ user_url }}">{{ username }}</a></p>
{%- endtrans %}
{% include "mediagoblin/utils/prev_next.html" %}
<div class="media_image_container">
{% block mediagoblin_media %}
{% set display_media = request.app.public_store.file_url(
media.get_display_media(media.media_files)) %}
{# if there's a medium file size, that means the medium size
# isn't the original... so link to the original!
#}
{% if media.media_files.has_key('medium') %}
<a href="{{ request.app.public_store.file_url(
media.media_files['original']) }}">
<div class="media_pane">
<div class="media_image_container">
{% block mediagoblin_media %}
{% set display_media = request.app.public_store.file_url(
media.get_display_media(media.media_files)) %}
{# if there's a medium file size, that means the medium size
# isn't the original... so link to the original!
#}
{% if media.media_files.has_key('medium') %}
<a href="{{ request.app.public_store.file_url(
media.media_files['original']) }}">
<img class="media_image"
src="{{ display_media }}"
alt="Image for {{ media.title }}" />
</a>
{% else %}
<img class="media_image"
src="{{ display_media }}"
alt="Image for {{ media.title }}" />
</a>
{% else %}
<img class="media_image"
src="{{ display_media }}"
alt="Image for {{ media.title }}" />
{% endif %}
{% endblock %}
</div>
<div class="media_pane">
{% endif %}
{% endblock %}
</div>
<h2 class="media_title">
{{ media.title }}
</h2>
{% if request.user and
(media.uploader == request.user._id or
request.user.is_admin) %}
{% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
user= media.get_uploader.username,
media= media._id) %}
<a class="button_action" href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a>
{% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
user= media.get_uploader.username,
media= media._id) %}
<a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
{% endif %}
{% autoescape False %}
<p>{{ media.description_html }}</p>
{% endautoescape %}
{% if media.attachment_files|count %}
<h3>Attachments</h3>
<ul>
{% for attachment in media.attachment_files %}
<li>
<a href="{{ request.app.public_store.file_url(attachment.filepath) }}">
{{ attachment.name }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if app_config['allow_attachments']
and request.user
and (media.uploader == request.user._id
or request.user.is_admin) %}
<p>
<a href="{{ request.urlgen('mediagoblin.edit.attachments',
user=media.get_uploader.username,
media=media._id) }}">Add attachment</a>
</p>
{% endif %}
{% endautoescape %}
<p class="media_specs">
{% trans date=media.created.strftime("%Y-%m-%d") -%}
Added on {{ date }}.
{%- endtrans %}
{% if request.user and
(media.uploader == request.user._id or
request.user.is_admin) %}
{% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
user= media.get_uploader.username,
media= media._id) %}
<a class="button_action" href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a>
{% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
user= media.get_uploader.username,
media= media._id) %}
<a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
{% endif %}
</p>
{% if comments %}
<h3>
{% if comments.count()==1 %}
{% trans comment_count=comments.count() -%}{{ comment_count }} comment{%- endtrans %}
{% elif comments.count()>1 %}
{% trans comment_count=comments.count() -%}{{ comment_count }} comments{%- endtrans %}
{% else %}
{% trans %}No comments yet.{% endtrans %}
{% endif %}
<div class="right_align">
<a
{% if not request.user %}
href="{{ request.urlgen('mediagoblin.auth.login') }}"
{% endif %}
class="button_action" id="button_addcomment" title="Add a comment">
{% trans %}Add a comment{% endtrans %}
{% trans %}Add one{% endtrans %}
</a>
</div>
</h3>
@ -167,11 +150,35 @@
{% endif %}
</div>
<div class="media_sidebar">
{% trans date=media.created.strftime("%Y-%m-%d") -%}
<h3 class="sidedata">Added on</h3>
<p>{{ date }}</p>
{%- endtrans %}
{% trans user_url=request.urlgen(
'mediagoblin.user_pages.user_home',
user=media.get_uploader.username),
username=media.get_uploader.username -%}
<p>❖ Browsing media by <a href="{{ user_url }}">{{ username }}</a></p>
{%- endtrans %}
{% include "mediagoblin/utils/prev_next.html" %}
{% if media.attachment_files|count %}
<h3>Attachments</h3>
<ul>
{% for attachment in media.attachment_files %}
<li>
<a href="{{ request.app.public_store.file_url(attachment.filepath) }}">
{{ attachment.name }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if app_config['allow_attachments']
and request.user
and (media.uploader == request.user._id
or request.user.is_admin) %}
<p>
<a href="{{ request.urlgen('mediagoblin.edit.attachments',
user=media.get_uploader.username,
media=media._id) }}">Add attachment</a>
</p>
{% endif %}
{% if media.tags %}
{% include "mediagoblin/utils/tags.html" %}
{% endif %}

View File

@ -20,7 +20,7 @@
{% if media.media_data.has_key('exif')
and app_config['exif_visible']
and media.media_data.exif.has_key('useful') %}
<h3 class="sidedata">EXIF</h3>
<h4>EXIF</h4>
<table>
{% for key, tag in media.media_data.exif.useful.items() %}
<tr>

View File

@ -20,7 +20,7 @@
{% if media.media_data.has_key('gps')
and app_config['geolocation_map_visible']
and media.media_data.gps %}
<h3 class="sidedata">Location</h3>
<h4>Map</h4>
<div>
{% set gps = media.media_data.gps %}
<div id="tile-map" style="width: 100%; height: 196px;">

View File

@ -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 %}

View File

@ -19,23 +19,29 @@
{% from "mediagoblin/utils/pagination.html" import render_pagination %}
{% macro media_grid(request, media_entries, col_number=5) %}
<ul class="thumb_gallery">
<table class="thumb_gallery">
{% for row in gridify_cursor(media_entries, col_number) %}
{% for entry in row %}
{% set entry_url = entry.url_for_self(request.urlgen) %}
<li class="media_thumbnail">
<a href="{{ entry_url }}">
<img src="{{ request.app.public_store.file_url(
entry.media_files['thumb']) }}" />
</a>
{% if entry.title %}
<br />
<a href="{{ entry_url }}">{{ entry.title }}</a>
{% endif %}
</li>
{% endfor %}
<tr class="thumb_row
{%- if loop.first %} thumb_row_first
{%- elif loop.last %} thumb_row_last{% endif %}">
{% for entry in row %}
{% set entry_url = entry.url_for_self(request.urlgen) %}
<td class="media_thumbnail thumb_entry
{%- if loop.first %} thumb_entry_first
{%- elif loop.last %} thumb_entry_last{% endif %}">
<a href="{{ entry_url }}">
<img src="{{ request.app.public_store.file_url(
entry.media_files['thumb']) }}" />
</a>
{% if entry.title %}
<br />
<a href="{{ entry_url }}">{{ entry.title }}</a>
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</ul>
</table>
{%- endmacro %}
{#

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="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 }}">
&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 %}

View File

@ -17,17 +17,16 @@
#}
{% block tags_content -%}
<h3 class="sidedata">Tagged with</h3>
<p>
<p>{% trans %}View more media tagged with{% endtrans %}
{% for tag in media.tags %}
{% if loop.last %}
{# the 'and' should only appear if there is more than one tag #}
{% if media.tags|length > 1 %}
&middot;
{% trans %}or{% endtrans %}
{% endif %}
<a href="{{ request.urlgen(
'mediagoblin.listings.tags_listing',
tag=tag['slug']) }}">{{ tag['name'] }}</a>
tag=tag['slug']) }}">{{ tag['name'] }}</a>.
{% elif loop.revindex == 2 %}
<a href="{{ request.urlgen(
'mediagoblin.listings.tags_listing',
@ -35,7 +34,7 @@
{% else %}
<a href="{{ request.urlgen(
'mediagoblin.listings.tags_listing',
tag=tag['slug']) }}">{{ tag['name'] }}</a> &middot;
tag=tag['slug']) }}">{{ tag['name'] }}</a>,
{% endif %}
{% endfor %}
</p>