Fix issue with card images in mobile view

This commit is contained in:
Jason McBrayer 2019-03-27 22:34:20 -04:00
parent f27451bb6f
commit ce825a8612
1 changed files with 69 additions and 71 deletions

View File

@ -53,83 +53,81 @@
{% endif %} {% endif %}
{% if toot.card %} {% if toot.card %}
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="card-header-title"> <div class="card-header-title">
<a href="{{ toot.card.url }}"> {{ toot.card.title }} </a> <a href="{{ toot.card.url }}"> {{ toot.card.title }} </a>
</div>
</div> </div>
{% if toot.card.description %} </div>
<div class="card-content columns"> {% if toot.card.description %}
{% if toot.card.image %} <div class="card-content columns">
<div class="column is-one-third"> {% if toot.card.image %}
<figure> <div class="column is-one-third">
<a href="{{ toot.card.url }}"> <a href="{{ toot.card.url }}">
<img alt="{{ toot.card.title }}" <img alt="{{ toot.card.title }}"
src="{{ toot.card.image }}" src="{{ toot.card.image }}"
class="image is-max-256"> class="is-max-256">
</a> </a>
</figure>
</div>
{% endif %}
<div class="column is-two-thirds">
<p>{{ toot.card.description }}</p>
</div>
</div> </div>
{% endif %} {% endif %}
<div class="column is-two-thirds">
<p>{{ toot.card.description }}</p>
</div>
</div> </div>
{% endif %} {% endif %}
</div>
{% endif %}
{% if toot.media_attachments %} {% if toot.media_attachments %}
<br> <br>
<div class="columns is-multiline attachments is-gapless"> <div class="columns is-multiline attachments is-gapless">
{% for media in toot.media_attachments %} {% for media in toot.media_attachments %}
{% if media.type == "image" %} {% if media.type == "image" %}
<figure class="column attachment-image"> <figure class="column attachment-image">
<a href="{{ media.url }}">
{% if toot.sensitive %}
<img src="{% static "images/sensitive.png" %}"
{% else %}
<img src="{{ media.preview_url }}"
{% endif %}
alt="{% if media.description %}
{{ media.description }}
{% elif media.text_url %}
{{ media.text_url }}
{% else %}
{{ media.url }}
{% endif %}"
{% if media.description %}
title="{{ media.description }}"
{% endif %}
class="image is-max-256">
</a>
</figure>
{% else %}
<figure class="column">
<video controls loop class="is-max-256"
poster="{{ media.preview_url }}">
<source src="{{ media.url }}" type="video/mp4">
<a href="{{ media.url }}"> <a href="{{ media.url }}">
{% if toot.sensitive %} {% if toot.sensitive %}
<img src="{% static "images/sensitive.png" %}" <img src="{% static "images/sensitive.png" %}"
{% else %} {% else %}
<img src="{{ media.preview_url }}" <img src="{{ media.preview_url }}"
{% endif %} {% endif %}
alt="{% if media.description %} alt="{% if media.description %}
{{ media.description }} {{ media.description }}
{% elif media.text_url %} {% elif media.text_url %}
{{ media.text_url }} {{ media.text_url }}
{% else %} {% else %}
{{ media.url }} {{ media.url }}
{% endif %}" {% endif %}"
{% if media.description %} {% if media.description %}
title="{{ media.description }}" title="{{ media.description }}"
{% endif %} {% endif %}
class="image is-max-256"> class="image is-max-256">
</a> </a>
</figure> </video>
{% else %} </figure>
<figure class="column">
<video controls loop class="is-max-256"
poster="{{ media.preview_url }}">
<source src="{{ media.url }}" type="video/mp4">
<a href="{{ media.url }}">
{% if toot.sensitive %}
<img src="{% static "images/sensitive.png" %}"
{% else %}
<img src="{{ media.preview_url }}"
{% endif %}
alt="{% if media.description %}
{{ media.description }}
{% elif media.text_url %}
{{ media.text_url }}
{% else %}
{{ media.url }}
{% endif %}"
{% if media.description %}
title="{{ media.description }}"
{% endif %}
class="image is-max-256">
</a>
</video>
</figure>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
@ -144,13 +142,13 @@
<div class="level-left"> <div class="level-left">
<a href="{% url "reply" toot.id %}#toot-{{ toot.id }}" class="level-item"> <a href="{% url "reply" toot.id %}#toot-{{ toot.id }}" class="level-item">
{% if toot.replies_count > 0 %} {% if toot.replies_count > 0 %}
<span class="fa fa-reply-all"> <span class="fa fa-reply-all">
<span class="is-hidden-mobile"><strong>Reply</strong></span> <span class="is-hidden-mobile"><strong>Reply</strong></span>
</span> </span>
{% else %} {% else %}
<span class="fa fa-reply"> <span class="fa fa-reply">
<span class="is-hidden-mobile">Reply</span> <span class="is-hidden-mobile">Reply</span>
</span> </span>
{% endif %} {% endif %}
</a> </a>
{% if toot.visibility != 'private' and toot.visibility != 'direct' %} {% if toot.visibility != 'private' and toot.visibility != 'direct' %}
@ -200,7 +198,7 @@
{{ toot.visibility }} {{ toot.visibility }}
&nbsp;&nbsp; &nbsp;&nbsp;
{% if toot.in_reply_to_id or toot.replies_count > 0 %} {% if toot.in_reply_to_id or toot.replies_count > 0 %}
<a class="level-item" href="{% url "thread" toot.id %}#toot-{{ toot.id }}"> <a class="level-item" href="{% url "thread" toot.id %}#toot-{{ toot.id }}">
<strong>thread</strong> <strong>thread</strong>
</a> </a>
{% else %} {% else %}