add skweet image/video support
This commit is contained in:
		
							parent
							
								
									b8bbceb00b
								
							
						
					
					
						commit
						059cf500e7
					
				| 
						 | 
					@ -51,7 +51,7 @@ a.active {
 | 
				
			||||||
  color: #311f20;
 | 
					  color: #311f20;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
img {
 | 
					img, video {
 | 
				
			||||||
  max-width: 100%;
 | 
					  max-width: 100%;
 | 
				
			||||||
  border: 4px solid #311f20;
 | 
					  border: 4px solid #311f20;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					@ -292,7 +292,8 @@ iframe {
 | 
				
			||||||
  gap: 1em;
 | 
					  gap: 1em;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.skweet-gallery img {
 | 
					.skweet-gallery img,
 | 
				
			||||||
 | 
					.skweet-gallery video {
 | 
				
			||||||
  border: 4px solid #bf42a0;
 | 
					  border: 4px solid #bf42a0;
 | 
				
			||||||
  flex: 1 1 auto;
 | 
					  flex: 1 1 auto;
 | 
				
			||||||
  width: 10px;
 | 
					  width: 10px;
 | 
				
			||||||
| 
						 | 
					@ -387,4 +388,4 @@ iframe {
 | 
				
			||||||
  -webkit-transform: scaleX(-1);
 | 
					  -webkit-transform: scaleX(-1);
 | 
				
			||||||
  transform: scaleX(-1);
 | 
					  transform: scaleX(-1);
 | 
				
			||||||
  z-index: 4;
 | 
					  z-index: 4;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -5,12 +5,16 @@
 | 
				
			||||||
  <div class="skweet">
 | 
					  <div class="skweet">
 | 
				
			||||||
    <img src="{{ skweet.account.avatar }}" class="profile">
 | 
					    <img src="{{ skweet.account.avatar }}" class="profile">
 | 
				
			||||||
    <div class="skweet-content">
 | 
					    <div class="skweet-content">
 | 
				
			||||||
      <div class="skweet-info"><h4>{{ skweet.account.username }}</h4><a href="skweet.url"><h5>{{ skweet.created_at | date(format="%Y-%m-%d %H:%M") }}UTC</h5></a></div>
 | 
					      <div class="skweet-info"><h4>{{ skweet.account.username }}</h4><a href="{{ skweet.url }}" target="_blank" rel="noopener noreferrer"><h5>{{ skweet.created_at | date(format="%Y-%m-%d %H:%M") }}UTC</h5></a></div>
 | 
				
			||||||
      <div class="skweet-text">{{ skweet.content }}</div>
 | 
					      <div class="skweet-text">{{ skweet.content }}</div>
 | 
				
			||||||
      {% if skweet.media_attachments[0] %}
 | 
					      {% if skweet.media_attachments[0] %}
 | 
				
			||||||
      <div class="skweet-gallery">
 | 
					      <div class="skweet-gallery">
 | 
				
			||||||
        {% for media_attachment in skweet.media_attachments %}
 | 
					        {% for media_attachment in skweet.media_attachments %}
 | 
				
			||||||
 | 
					        {% if media_attachment.type == "image" %}
 | 
				
			||||||
        <img src="{{ media_attachment.url }}">
 | 
					        <img src="{{ media_attachment.url }}">
 | 
				
			||||||
 | 
					        {% elif media_attachment.type == "video" %}
 | 
				
			||||||
 | 
					        <video controls src="{{ media_attachment.url }}"></video>
 | 
				
			||||||
 | 
					        {% endif %}
 | 
				
			||||||
        {% endfor %}
 | 
					        {% endfor %}
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
      {% endif %}
 | 
					      {% endif %}
 | 
				
			||||||
| 
						 | 
					@ -18,4 +22,5 @@
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
  {% endif %}
 | 
					  {% endif %}
 | 
				
			||||||
  {% endfor %}
 | 
					  {% endfor %}
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue