diff options
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 }} |