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

Fix #1046 - Media breaking out of container

Browse Source
This commit is contained in:
jpope777 2014-12-02 16:54:24 -06:00
parent 5436d980a1
commit 03ff0b368e
9 changed files with 99 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mediagoblin/static/css/audio.css
View File

@ -1,6 +1,9 @@
.audio-spectrogram { .audio-spectrogram {
position: relative; position: relative;
} }
.audio-spectrogram > img {
width: 100%;
}
.playhead { .playhead {
position: absolute; position: absolute;
top: 0; top: 0;

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

@ -211,14 +211,20 @@ footer {
} }
.media_image_container { .media_image_container {
display: flex;
justify-content: center;
} }
.media_image { .media_image {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%; max-width: 100%;
} }
.media_other_container {
display: flex;
justify-content: center;
}
.media_pane { .media_pane {
/* in place for possible future wide view */ /* in place for possible future wide view */
/* border-bottom: 1px solid #333333;*/ /* border-bottom: 1px solid #333333;*/
@ -887,7 +893,12 @@ pre {
margin-left:3px; margin-left:3px;
margin-right:3px; margin-right:3px;
} }
#thingy_view {
width:640px;
height:640px;
}
} }
/* 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.media_thumbnail { .container .three.columns.media_thumbnail {
@ -896,7 +907,7 @@ pre {
margin-right:2px; margin-right:2px;
} }
.media_thumbnail.thumb_entry img { .media_thumbnail.thumb_entry img {
margin-left: -16.5px; max-width:100%;
} }
.thumb_gallery { .thumb_gallery {
margin-left: 0; margin-left: 0;
@ -904,7 +915,12 @@ pre {
} }
.navigation_button { .navigation_button {
} }
#thingy_view {
width:508px;
height:508px;
}
} }
/* All Mobile Sizes (devices and browser) */ /* All Mobile Sizes (devices and browser) */
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.thumb_row { .thumb_row {
@ -946,6 +962,22 @@ pre {
} }
} }
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#thingy_view {
width:420px;
height:420px;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
#thingy_view {
width:300px;
height:300px;
}
}
p.verifier { p.verifier {
text-align:center; text-align:center;
font-size:50px; font-size:50px;

16
mediagoblin/templates/mediagoblin/media_displays/ascii.html
View File

@ -19,13 +19,15 @@
{% extends 'mediagoblin/user_pages/media.html' %} {% extends 'mediagoblin/user_pages/media.html' %}
{% block mediagoblin_media %} {% block mediagoblin_media %}
<div class="ascii-wrapper"> <div class="media_image_container">
<pre> <div class="ascii-wrapper">
{%- autoescape False -%} <pre>
{{- request.app.public_store.get_file( {%- autoescape False -%}
media.media_files['unicode']).read()|string -}} {{- request.app.public_store.get_file(
{%- endautoescape -%} media.media_files['unicode']).read()|string -}}
</pre> {%- endautoescape -%}
</pre>
</div>
</div> </div>
{% endblock %} {% endblock %}

44
mediagoblin/templates/mediagoblin/media_displays/audio.html
View File

@ -28,27 +28,29 @@
{% endblock %} {% endblock %}
{% block mediagoblin_media %} {% block mediagoblin_media %}
<div class="audio-media"> <div class="media_other_container">
{% if 'spectrogram' in media.media_files %} <div class="audio-media">
<div class="audio-spectrogram"> {% if 'spectrogram' in media.media_files %}
<img src="{{ request.app.public_store.file_url( <div class="audio-spectrogram">
media.media_files.spectrogram) }}" <img src="{{ request.app.public_store.file_url(
alt="Spectrogram" /> media.media_files.spectrogram) }}"
</div> alt="Spectrogram" />
{% endif %} </div>
<audio class="audio-player" controls="controls" {% endif %}
preload="metadata"> <audio class="audio-player" controls="controls"
<source src="{{ request.app.public_store.file_url( preload="metadata">
media.media_files.webm_audio) }}" type="audio/webm; codecs=vorbis" /> <source src="{{ request.app.public_store.file_url(
<div class="no_html5"> media.media_files.webm_audio) }}" type="audio/webm; codecs=vorbis" />
{%- trans -%}Sorry, this audio will not work because <div class="no_html5">
your web browser does not support HTML5 {%- trans -%}Sorry, this audio will not work because
audio.{%- endtrans -%}<br/> your web browser does not support HTML5
{%- trans -%}You can get a modern web browser that audio.{%- endtrans -%}<br/>
can play the audio at <a href="http://getfirefox.com"> {%- trans -%}You can get a modern web browser that
http://getfirefox.com</a>!{%- endtrans -%} can play the audio at <a href="http://getfirefox.com">
</div> http://getfirefox.com</a>!{%- endtrans -%}
</audio> </div>
</audio>
</div>
</div> </div>
{% endblock %} {% endblock %}

7
mediagoblin/templates/mediagoblin/media_displays/blogpost.html
View File

@ -23,9 +23,10 @@
{% endblock %} {% endblock %}
{% block mediagoblin_media %} {% block mediagoblin_media %}
<h1> {{media.title}}</h1> <div class="media_other_container">
<p>{{media.description|safe}}</p> <h1> {{media.title}}</h1>
<p>{{media.description|safe}}</p>
</div>
{% endblock %} {% endblock %}

32
mediagoblin/templates/mediagoblin/media_displays/pdf.html
View File

@ -46,21 +46,23 @@
{%- endblock %} {%- endblock %}
{% block mediagoblin_media %} {% block mediagoblin_media %}
{% if pdf_js %} <div class="media_other_container">
<iframe width="640px" height="480px" {% if pdf_js %}
src="{{ request.staticdirect('/extlib/pdf.js/web/viewer.html') }}?file={{ pdf_view }} "> <iframe width="640px" height="480px"
</iframe> src="{{ request.staticdirect('/extlib/pdf.js/web/viewer.html') }}?file={{ pdf_view }} ">
{% else %} </iframe>
<a href="{{ pdf_view }}"> {% else %}
<img id="medium" <a href="{{ pdf_view }}">
class="media_image" <img id="medium"
src="{{ medium_view }}" class="media_image"
alt=" src="{{ medium_view }}"
{%- trans media_title=media.title -%} alt="
Image for {{ media_title}} {%- trans media_title=media.title -%}
{%- endtrans %}"/> Image for {{ media_title}}
</a> {%- endtrans %}"/>
{% endif %} </a>
{% endif %}
</div>
{% endblock %} {% endblock %}
{% block mediagoblin_sidebar %} {% block mediagoblin_sidebar %}

3
mediagoblin/templates/mediagoblin/media_displays/stl.html
View File

@ -107,7 +107,8 @@ window.show_things = function () {
src="{{ front_view }}" src="{{ front_view }}"
alt="{% trans media_title=media.title -%} alt="{% trans media_title=media.title -%}
Image for {{ media_title }}{% endtrans %}" /> Image for {{ media_title }}{% endtrans %}" />
<div id="thingy_view" style="width:640px;height:640px;"></div> <!--<div id="thingy_view" style="width:640px;height:640px;"></div>-->
<div id="thingy_view"></div>
</div> </div>

2
mediagoblin/templates/mediagoblin/media_displays/video.html
View File

@ -46,6 +46,7 @@
{%- endblock %} {%- endblock %}
{% block mediagoblin_media %} {% block mediagoblin_media %}
<div class="media_other_container">
{% set display_type, display_path = media.get_display_media() %} {% set display_type, display_path = media.get_display_media() %}
<video controls <video controls
@ -68,6 +69,7 @@
http://getfirefox.com</a>!{%- endtrans -%} http://getfirefox.com</a>!{%- endtrans -%}
</div> </div>
</video> </video>
</div>
{% endblock %} {% endblock %}
{% block mediagoblin_sidebar %} {% block mediagoblin_sidebar %}

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

@ -48,8 +48,8 @@
</div> </div>
</div> </div>
<div class="media_pane eleven columns"> <div class="media_pane eleven columns">
<div class="media_image_container"> {% block mediagoblin_media %}
{% block mediagoblin_media %} <div class="media_image_container">
{% set display_media = request.app.public_store.file_url( {% set display_media = request.app.public_store.file_url(
media.get_display_media()[1]) %} media.get_display_media()[1]) %}
{# if there's a medium file size, that means the medium size {# if there's a medium file size, that means the medium size
@ -69,8 +69,8 @@
alt="{% trans media_title=media.title -%} alt="{% trans media_title=media.title -%}
Image for {{ media_title }}{% endtrans %}" /> Image for {{ media_title }}{% endtrans %}" />
{% endif %} {% endif %}
{% endblock %} </div>
</div> {% endblock %}
<div class="row head foot"> <div class="row head foot">
<h2 class="media_title"> <h2 class="media_title">
{{ media.title }} {{ media.title }}