Tweak figures for brutstrap

This commit is contained in:
Jason McBrayer 2019-02-04 15:24:06 -05:00
parent 46aea0fff9
commit 650b6a25a8
2 changed files with 31 additions and 27 deletions

View File

@ -33,6 +33,7 @@ article + hr /* Now redundant */
display: none; display: none;
} }
/* Bulma styles re-implemented for compatibility */ /* Bulma styles re-implemented for compatibility */
img.is-32x32 { img.is-32x32 {
@ -164,15 +165,8 @@ img.emoji
.level { .level {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} display:flex;
flex-wrap: wrap;
.level code {
border-radius: 4px;
}
.level img {
display: inline-block;
vertical-align: top;
} }
.level.is-mobile { .level.is-mobile {
@ -183,17 +177,18 @@ img.emoji
.level.is-mobile .level-right { .level.is-mobile .level-right {
display: flex; display: flex;
} }
.level.is-mobile .level-left + .level-right {
margin-top: 0;
}
.level.is-mobile .level-item { .level.is-mobile .level-item {
margin-right: 0.75rem; margin-right: 0.75rem;
} }
.level.is-mobile .level-item:not(:last-child) {
margin-bottom: 0; .level code {
border-radius: 4px;
}
.level img {
display: inline-block;
vertical-align: top;
} }
.level-item { .level-item {
@ -284,3 +279,9 @@ img.fav-avatar {
{ {
height: 0; height: 0;
} }
.attachments figure {
border: 0.2ex solid #444;
max-width: 256px;
padding: 1em;
}

View File

@ -84,7 +84,8 @@
<div class="level attachments"> <div class="level attachments">
{% for media in toot.media_attachments %} {% for media in toot.media_attachments %}
{% if media.type == "image" %} {% if media.type == "image" %}
<a class="level-item attachment-image" href="{{ media.url }}"> <figure class="level-item attachment-image">
<a href="{{ media.url }}">
{% if toot.sensitive %} {% if toot.sensitive %}
<img src="{% static "images/sensitive.png" %}" <img src="{% static "images/sensitive.png" %}"
{% else %} {% else %}
@ -102,9 +103,10 @@
{% endif %} {% endif %}
class="image is-max-256"> class="image is-max-256">
</a> </a>
</figure>
{% else %} {% else %}
<video class="level-item is-max-256" controls loop <figure class="level-item is-max-256">
<video controls loop
poster="{{ media.preview_url }}"> poster="{{ media.preview_url }}">
<source src="{{ media.url }}" type="video/mp4"> <source src="{{ media.url }}" type="video/mp4">
<a href="{{ media.url }}"> <a href="{{ media.url }}">
@ -126,8 +128,9 @@
class="image is-max-256"> class="image is-max-256">
</a> </a>
</video> </video>
</figure>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}