FIX: Correct the play icon position ()

This commit is contained in:
Jarek Radosz 2021-09-09 15:10:32 +02:00 committed by GitHub
parent 1205db8f84
commit 02a6b991fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 6 deletions
app/assets/stylesheets/common/base
lib/onebox/engine

View File

@ -290,7 +290,12 @@ aside.onebox {
} }
} }
.instagram-video-icon { .image-wrapper {
display: block;
position: relative;
}
.video-icon {
&:before { &:before {
opacity: 0.8; opacity: 0.8;
// ideally, the SVG used here should be in HTML and reference the SVG sprite // ideally, the SVG used here should be in HTML and reference the SVG sprite

View File

@ -31,9 +31,9 @@ module Onebox
<article class="onebox-body"> <article class="onebox-body">
<h3><a href="#{escaped_url}" target="_blank" rel="nofollow ugc noopener">#{og.title}</a></h3> <h3><a href="#{escaped_url}" target="_blank" rel="nofollow ugc noopener">#{og.title}</a></h3>
<div class="aspect-image-full-size"> <div class="aspect-image-full-size">
<a href="#{escaped_url}" target="_blank" rel="nofollow ugc noopener"> <a href="#{escaped_url}" target="_blank" rel="nofollow ugc noopener" class="image-wrapper">
<img src="#{og.secure_image_url}" class="scale-image"/> <img src="#{og.secure_image_url}" class="scale-image"/>
<span class="instagram-video-icon"></span> <span class="video-icon"></span>
</a> </a>
</div> </div>
</article> </article>

View File

@ -25,7 +25,7 @@ module Onebox
</article> </article>
</aside> </aside>
HTML HTML
elsif raw[:type] =~ /^video[\/\.]/ elsif raw[:type] =~ /^video[\/\.]/
<<-HTML <<-HTML
<aside class="onebox reddit"> <aside class="onebox reddit">
<header class="source"> <header class="source">
@ -35,9 +35,9 @@ module Onebox
<article class="onebox-body"> <article class="onebox-body">
<h3><a href="#{raw[:url]}" target="_blank" rel="nofollow ugc noopener">#{raw[:title]}</a></h3> <h3><a href="#{raw[:url]}" target="_blank" rel="nofollow ugc noopener">#{raw[:title]}</a></h3>
<div class="aspect-image-full-size"> <div class="aspect-image-full-size">
<a href="#{raw[:url]}" target="_blank" rel="nofollow ugc noopener"> <a href="#{raw[:url]}" target="_blank" rel="nofollow ugc noopener" class="image-wrapper">
<img src="#{raw[:image]}" class="scale-image"/> <img src="#{raw[:image]}" class="scale-image"/>
<span class="instagram-video-icon"></span> <span class="video-icon"></span>
</a> </a>
</div> </div>
<div class="description"><p>#{raw[:description]}</p></div> <div class="description"><p>#{raw[:description]}</p></div>