Fix #1046 - Media breaking out of container

7 files changed, 61 insertions, 51 deletions

diff --git a/mediagoblin/templates/mediagoblin/media_displays/ascii.html b/mediagoblin/templates/mediagoblin/media_displays/ascii.html
index 3cc5e0ab..56039980 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/ascii.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/ascii.html
@@ -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 %}
 
diff --git a/mediagoblin/templates/mediagoblin/media_displays/audio.html b/mediagoblin/templates/mediagoblin/media_displays/audio.html
index 95bc6e88..a1859c89 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/audio.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/audio.html
@@ -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 %}
 
diff --git a/mediagoblin/templates/mediagoblin/media_displays/blogpost.html b/mediagoblin/templates/mediagoblin/media_displays/blogpost.html
index ca3441b9..4b0f53a6 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/blogpost.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/blogpost.html
@@ -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 %}
   
 
diff --git a/mediagoblin/templates/mediagoblin/media_displays/pdf.html b/mediagoblin/templates/mediagoblin/media_displays/pdf.html
index a615cba6..b39dad50 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/pdf.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/pdf.html
@@ -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 %}
diff --git a/mediagoblin/templates/mediagoblin/media_displays/stl.html b/mediagoblin/templates/mediagoblin/media_displays/stl.html
index b7d02398..a95a1845 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/stl.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/stl.html
@@ -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>
 
diff --git a/mediagoblin/templates/mediagoblin/media_displays/video.html b/mediagoblin/templates/mediagoblin/media_displays/video.html
index 9386ffcf..cc06ba21 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/video.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/video.html
@@ -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 %}
diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html
index a4b42211..16ddd62c 100644
--- a/mediagoblin/templates/mediagoblin/user_pages/media.html
+++ b/mediagoblin/templates/mediagoblin/user_pages/media.html
@@ -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 }}