diff options
| -rw-r--r-- | mediagoblin/static/css/base.css | 117 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/base.html | 6 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/user_pages/media.html | 15 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/user_pages/user.html | 9 |
4 files changed, 74 insertions, 73 deletions
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index ae4c42fc..c6ecb1d3 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -167,29 +167,21 @@ 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; -} - -.profile_showcase { - width: 580px; - margin-left: 10px; - float: left; +.media_image { + max-width: 100%; + margin-left:auto; + margin-right:auto; + display:block; } /* common website elements */ @@ -243,6 +235,17 @@ text-align: center; float: right; } +.left_align { + float: right; +} + +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} + .clear { clear: both; display: block; @@ -595,11 +598,10 @@ img.media_icon { /* navigation */ .navigation { - float: right; } .navigation_button { - width: 135px; + width: 48%; display: inline-block; text-align: center; background-color: #1d1d1d; @@ -612,7 +614,7 @@ img.media_icon { } .navigation_left { - margin-right: 6px; + margin-right: 3px; } /* messages */ @@ -761,20 +763,12 @@ 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 { @@ -791,26 +785,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; } @@ -825,48 +804,60 @@ pre { } header { - text-align: center; +/* text-align: center;*/ } .header_right { - margin-right: 2%; - float: none; +/* margin-right: 2%;*/ +/* float: none;*/ } a.logo { - margin-left: 2%; +/* margin-left: 2%;*/ } } +/* desktop resolutions */ @media screen and (min-width: 960px) { - .container .three.columns { + .container .three.columns { /* this needs to be more specific - inplace for the gallery... */ width:180px; margin-left:3px; margin-right:3px; } } +/* Tablet Portrait size to standard 960 (devices and browsers) */ @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; margin-left:2px; margin-right:2px; } + .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; } -} -@media screen and (max-width: 570px) { - .media_thumbnail { - width: 29%; + .thumb_gallery { + margin-left: 0; + margin-right: 0; + } + h1,h2,h3,p { + margin-bottom: 10px !important; } -} + header { + text-align: center; + } -@media screen and (max-width: 380px) { - .media_thumbnail { - width: 46%; + .header_right { + float: none; } } diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index 2d6f03d9..0d22608b 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -56,8 +56,12 @@ {% block mediagoblin_header %} <div class="container"> <header> + <div class="row hell"> + <div class="eight columns alpha omega"> {%- include "mediagoblin/bits/logo.html" -%} {% block mediagoblin_header_title %}{% endblock %} + </div> + <div class="eight columns alpha omega pull-right"> <div class="header_right"> {%- if request.user %} {% if request.user and @@ -105,6 +109,7 @@ </a> {%- endif %} </div> + </div><!--end eight columns pull-right--> <div class="clear"></div> {% if request.user and request.user.has_privilege('active') %} <div class="header_dropdown"> @@ -158,6 +163,7 @@ {% include 'mediagoblin/fragments/header_notifications.html' %} </div> {% endif %} + </div><!-- end row --> </header> </div> {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html index 81e5013e..4c2323cf 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 hell"> + <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( @@ -161,8 +164,8 @@ {{ render_pagination(request, pagination, media.url_for_self(request.urlgen)) }} {% endif %} - </div> - <div class="media_sidebar"> + </div><!--end media_pane--> + <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) -%} 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... |