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;
}
/* Bulma styles re-implemented for compatibility */
img.is-32x32 {
@ -164,8 +165,23 @@ img.emoji
.level {
align-items: center;
justify-content: space-between;
display:flex;
flex-wrap: wrap;
}
.level.is-mobile {
display: flex;
}
.level.is-mobile .level-left,
.level.is-mobile .level-right {
display: flex;
}
.level.is-mobile .level-item {
margin-right: 0.75rem;
}
.level code {
border-radius: 4px;
}
@ -175,27 +191,6 @@ img.emoji
vertical-align: top;
}
.level.is-mobile {
display: flex;
}
.level.is-mobile .level-left,
.level.is-mobile .level-right {
display: flex;
}
.level.is-mobile .level-left + .level-right {
margin-top: 0;
}
.level.is-mobile .level-item {
margin-right: 0.75rem;
}
.level.is-mobile .level-item:not(:last-child) {
margin-bottom: 0;
}
.level-item {
align-items: center;
display: flex;
@ -284,3 +279,9 @@ img.fav-avatar {
{
height: 0;
}
.attachments figure {
border: 0.2ex solid #444;
max-width: 256px;
padding: 1em;
}

View File

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