heckyel/mediagoblin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate media page to skeleton

Browse Source
This commit is contained in:
jpope 2014-01-06 15:19:14 -06:00
parent 3bb58e6f0a
commit 45842f840f
2 changed files with 37 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
mediagoblin/static/css/base.css
View File

@ -177,29 +177,11 @@ footer {
margin-right: 0; margin-right: 0;
} }
.media_pane { .media_image {
width: 640px; max-width: 100%;
margin-left: 0px; margin-left:auto;
margin-right: 10px; margin-right:auto;
float: left; display:block;
}
.media_sidebar {
width: 280px;
margin-left: 10px;
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 */
@ -616,11 +598,10 @@ img.media_icon {
/* navigation */ /* navigation */
.navigation { .navigation {
float: right;
} }
.navigation_button { .navigation_button {
width: 135px; width: 48%;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
background-color: #1d1d1d; background-color: #1d1d1d;
@ -633,7 +614,7 @@ img.media_icon {
} }
.navigation_left { .navigation_left {
margin-right: 6px; margin-right: 3px;
} }
/* messages */ /* messages */
@ -783,20 +764,11 @@ pre {
/* Media queries and other responsivisivity */ /* Media queries and other responsivisivity */
/* initial GMG max 940 */ /* initial GMG max 940 */
@media screen and (max-width: 940px) { @media screen and (max-width: 960px) {
.media_pane {
width: 100%;
margin: 0px;
}
.media_sidebar {
width: 100%;
margin: 0px;
}
img.media_image { img.media_image {
width: 100%; max-width: 100%;
display: inline; /* display: inline;*/
} }
.media_thumbnail { .media_thumbnail {
@ -813,26 +785,11 @@ pre {
margin: 0px; margin: 0px;
} }
.navigation {
float: none;
}
.navigation_button {
width: 49%;
float: right;
}
.navigation_left {
margin-right: 0;
float: left;
}
.navigation { .navigation {
float: none; float: none;
} }
.navigation_button { .navigation_button {
width: 49%;
float: right; float: right;
padding: 10px 0 14px; padding: 10px 0 14px;
} }
@ -847,22 +804,22 @@ pre {
} }
header { header {
text-align: center; /* text-align: center;*/
} }
.header_right { .header_right {
margin-right: 2%; /* margin-right: 2%;*/
float: none; /* float: none;*/
} }
a.logo { a.logo {
margin-left: 2%; /* margin-left: 2%;*/
} }
} }
/* desktop resolutions */ /* desktop resolutions */
@media screen and (min-width: 960px) { @media screen and (min-width: 960px) {
.container .three.columns { .container .three.columns { /* this needs to be more specific - inplace for the gallery... */
width:180px; width:180px;
margin-left:3px; margin-left:3px;
margin-right:3px; margin-right:3px;
@ -870,7 +827,7 @@ pre {
} }
/* Tablet Portrait size to standard 960 (devices and browsers) */ /* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) { @media only screen and (min-width: 768px) and (max-width: 959px) {
.container .three.columns { .container .three.columns { /* this needs to be more specific - inplace for the gallery... */
width:147px; width:147px;
margin-left:2px; margin-left:2px;
margin-right:2px; margin-right:2px;
@ -879,6 +836,8 @@ pre {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.navigation_button {
}
} }
/* All Mobile Sizes (devices and browser) */ /* All Mobile Sizes (devices and browser) */
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
@ -889,17 +848,16 @@ pre {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
} h1,h2,h3,p {
/* initial GMG tablet */ margin-bottom: 10px !important;
@media screen and (max-width: 570px) {
.media_thumbnail {
width: 29%;
} }
}
/* initial GMG phone */ header {
@media screen and (max-width: 380px) { text-align: center;
.media_thumbnail { }
width: 46%;
.header_right {
float: none;
} }
} }

15
mediagoblin/templates/mediagoblin/user_pages/media.html
View File

@ -32,9 +32,9 @@
{% template_hook("media_head") %} {% template_hook("media_head") %}
{% endblock mediagoblin_head %} {% endblock mediagoblin_head %}
{% block mediagoblin_content %} {% block mediagoblin_content %}
<p class="context"> <div class="row hell">
<p class="eleven columns context">
{%- trans user_url=request.urlgen( {%- trans user_url=request.urlgen(
'mediagoblin.user_pages.user_home', 'mediagoblin.user_pages.user_home',
user=media.get_uploader.username), user=media.get_uploader.username),
@ -42,8 +42,11 @@
❖ Browsing media by <a href="{{user_url}}">{{username}}</a> ❖ Browsing media by <a href="{{user_url}}">{{username}}</a>
{%- endtrans -%} {%- endtrans -%}
</p> </p>
{% include "mediagoblin/utils/prev_next.html" %} <div class="five columns">
<div class="media_pane"> {% include "mediagoblin/utils/prev_next.html" %}
</div>
</div>
<div class="media_pane eleven columns">
<div class="media_image_container"> <div class="media_image_container">
{% block mediagoblin_media %} {% block mediagoblin_media %}
{% set display_media = request.app.public_store.file_url( {% set display_media = request.app.public_store.file_url(
@ -161,8 +164,8 @@
{{ render_pagination(request, pagination, {{ render_pagination(request, pagination,
media.url_for_self(request.urlgen)) }} media.url_for_self(request.urlgen)) }}
{% endif %} {% endif %}
</div> </div><!--end media_pane-->
<div class="media_sidebar"> <div class="five columns media_sidebar">
<h3>{% trans %}Added{% endtrans %}</h3> <h3>{% trans %}Added{% endtrans %}</h3>
<p><span title="{{ media.created.strftime("%I:%M%p %Y-%m-%d") }}"> <p><span title="{{ media.created.strftime("%I:%M%p %Y-%m-%d") }}">
{%- trans formatted_time=timesince(media.created) -%} {%- trans formatted_time=timesince(media.created) -%}