Fix #1046 - Media breaking out of container
This commit is contained in:
jpope777
parent
5436d980a1
commit
03ff0b368e
@ -1,6 +1,9 @@
|
||||
.audio-spectrogram {
|
||||
position: relative;
|
||||
}
|
||||
.audio-spectrogram > img {
|
||||
width: 100%;
|
||||
}
|
||||
.playhead {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -211,14 +211,20 @@ footer {
|
||||
}
|
||||
|
||||
.media_image_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.media_image {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.media_other_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.media_pane {
|
||||
/* in place for possible future wide view */
|
||||
/* border-bottom: 1px solid #333333;*/
|
||||
@ -887,7 +893,12 @@ pre {
|
||||
margin-left:3px;
|
||||
margin-right:3px;
|
||||
}
|
||||
#thingy_view {
|
||||
width:640px;
|
||||
height:640px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Portrait size to standard 960 (devices and browsers) */
|
||||
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
||||
.container .three.columns.media_thumbnail {
|
||||
@ -896,7 +907,7 @@ pre {
|
||||
margin-right:2px;
|
||||
}
|
||||
.media_thumbnail.thumb_entry img {
|
||||
margin-left: -16.5px;
|
||||
max-width:100%;
|
||||
}
|
||||
.thumb_gallery {
|
||||
margin-left: 0;
|
||||
@ -904,7 +915,12 @@ pre {
|
||||
}
|
||||
.navigation_button {
|
||||
}
|
||||
#thingy_view {
|
||||
width:508px;
|
||||
height:508px;
|
||||
}
|
||||
}
|
||||
|
||||
/* All Mobile Sizes (devices and browser) */
|
||||
@media screen and (max-width: 767px) {
|
||||
.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 {
|
||||
text-align:center;
|
||||
font-size:50px;
|
||||
|
||||
@ -19,13 +19,15 @@
|
||||
{% extends 'mediagoblin/user_pages/media.html' %}
|
||||
|
||||
{% block mediagoblin_media %}
|
||||
<div class="ascii-wrapper">
|
||||
<pre>
|
||||
{%- autoescape False -%}
|
||||
{{- request.app.public_store.get_file(
|
||||
media.media_files['unicode']).read()|string -}}
|
||||
{%- endautoescape -%}
|
||||
</pre>
|
||||
<div class="media_image_container">
|
||||
<div class="ascii-wrapper">
|
||||
<pre>
|
||||
{%- autoescape False -%}
|
||||
{{- request.app.public_store.get_file(
|
||||
media.media_files['unicode']).read()|string -}}
|
||||
{%- endautoescape -%}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -28,27 +28,29 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block mediagoblin_media %}
|
||||
<div class="audio-media">
|
||||
{% if 'spectrogram' in media.media_files %}
|
||||
<div class="audio-spectrogram">
|
||||
<img src="{{ request.app.public_store.file_url(
|
||||
media.media_files.spectrogram) }}"
|
||||
alt="Spectrogram" />
|
||||
</div>
|
||||
{% endif %}
|
||||
<audio class="audio-player" controls="controls"
|
||||
preload="metadata">
|
||||
<source src="{{ request.app.public_store.file_url(
|
||||
media.media_files.webm_audio) }}" type="audio/webm; codecs=vorbis" />
|
||||
<div class="no_html5">
|
||||
{%- trans -%}Sorry, this audio will not work because
|
||||
your web browser does not support HTML5
|
||||
audio.{%- endtrans -%}<br/>
|
||||
{%- trans -%}You can get a modern web browser that
|
||||
can play the audio at <a href="http://getfirefox.com">
|
||||
http://getfirefox.com</a>!{%- endtrans -%}
|
||||
</div>
|
||||
</audio>
|
||||
<div class="media_other_container">
|
||||
<div class="audio-media">
|
||||
{% if 'spectrogram' in media.media_files %}
|
||||
<div class="audio-spectrogram">
|
||||
<img src="{{ request.app.public_store.file_url(
|
||||
media.media_files.spectrogram) }}"
|
||||
alt="Spectrogram" />
|
||||
</div>
|
||||
{% endif %}
|
||||
<audio class="audio-player" controls="controls"
|
||||
preload="metadata">
|
||||
<source src="{{ request.app.public_store.file_url(
|
||||
media.media_files.webm_audio) }}" type="audio/webm; codecs=vorbis" />
|
||||
<div class="no_html5">
|
||||
{%- trans -%}Sorry, this audio will not work because
|
||||
your web browser does not support HTML5
|
||||
audio.{%- endtrans -%}<br/>
|
||||
{%- trans -%}You can get a modern web browser that
|
||||
can play the audio at <a href="http://getfirefox.com">
|
||||
http://getfirefox.com</a>!{%- endtrans -%}
|
||||
</div>
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -23,9 +23,10 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block mediagoblin_media %}
|
||||
<h1> {{media.title}}</h1>
|
||||
<p>{{media.description|safe}}</p>
|
||||
|
||||
<div class="media_other_container">
|
||||
<h1> {{media.title}}</h1>
|
||||
<p>{{media.description|safe}}</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
@ -46,21 +46,23 @@
|
||||
{%- endblock %}
|
||||
|
||||
{% block mediagoblin_media %}
|
||||
{% if pdf_js %}
|
||||
<iframe width="640px" height="480px"
|
||||
src="{{ request.staticdirect('/extlib/pdf.js/web/viewer.html') }}?file={{ pdf_view }} ">
|
||||
</iframe>
|
||||
{% else %}
|
||||
<a href="{{ pdf_view }}">
|
||||
<img id="medium"
|
||||
class="media_image"
|
||||
src="{{ medium_view }}"
|
||||
alt="
|
||||
{%- trans media_title=media.title -%}
|
||||
Image for {{ media_title}}
|
||||
{%- endtrans %}"/>
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="media_other_container">
|
||||
{% if pdf_js %}
|
||||
<iframe width="640px" height="480px"
|
||||
src="{{ request.staticdirect('/extlib/pdf.js/web/viewer.html') }}?file={{ pdf_view }} ">
|
||||
</iframe>
|
||||
{% else %}
|
||||
<a href="{{ pdf_view }}">
|
||||
<img id="medium"
|
||||
class="media_image"
|
||||
src="{{ medium_view }}"
|
||||
alt="
|
||||
{%- trans media_title=media.title -%}
|
||||
Image for {{ media_title}}
|
||||
{%- endtrans %}"/>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block mediagoblin_sidebar %}
|
||||
|
||||
@ -107,7 +107,8 @@ window.show_things = function () {
|
||||
src="{{ front_view }}"
|
||||
alt="{% trans media_title=media.title -%}
|
||||
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>
|
||||
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
{%- endblock %}
|
||||
|
||||
{% block mediagoblin_media %}
|
||||
<div class="media_other_container">
|
||||
{% set display_type, display_path = media.get_display_media() %}
|
||||
|
||||
<video controls
|
||||
@ -68,6 +69,7 @@
|
||||
http://getfirefox.com</a>!{%- endtrans -%}
|
||||
</div>
|
||||
</video>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block mediagoblin_sidebar %}
|
||||
|
||||
@ -48,8 +48,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<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(
|
||||
media.get_display_media()[1]) %}
|
||||
{# if there's a medium file size, that means the medium size
|
||||
@ -69,8 +69,8 @@
|
||||
alt="{% trans media_title=media.title -%}
|
||||
Image for {{ media_title }}{% endtrans %}" />
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
<div class="row head foot">
|
||||
<h2 class="media_title">
|
||||
{{ media.title }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user