From 03ff0b368e8cd8c73c4e32f050faa38afe66d5c4 Mon Sep 17 00:00:00 2001
From: jpope777 <jpope@jpope.org>
Date: Tue, 2 Dec 2014 16:54:24 -0600
Subject: [PATCH] Fix #1046 - Media breaking out of container

---
 mediagoblin/static/css/audio.css              |  3 ++
 mediagoblin/static/css/base.css               | 38 ++++++++++++++--
 .../mediagoblin/media_displays/ascii.html     | 16 ++++---
 .../mediagoblin/media_displays/audio.html     | 44 ++++++++++---------
 .../mediagoblin/media_displays/blogpost.html  |  7 +--
 .../mediagoblin/media_displays/pdf.html       | 32 +++++++-------
 .../mediagoblin/media_displays/stl.html       |  3 +-
 .../mediagoblin/media_displays/video.html     |  2 +
 .../mediagoblin/user_pages/media.html         |  8 ++--
 9 files changed, 99 insertions(+), 54 deletions(-)

diff --git a/mediagoblin/static/css/audio.css b/mediagoblin/static/css/audio.css
index e007a0e1..5c50e727 100644
--- a/mediagoblin/static/css/audio.css
+++ b/mediagoblin/static/css/audio.css
@@ -1,6 +1,9 @@
 .audio-spectrogram {
     position: relative;
 }
+.audio-spectrogram > img {
+    width: 100%;
+}
 .playhead {
     position: absolute;
     top: 0;
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 0b862aee..f8726708 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -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;
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 }}