From bb8cf810897cedb0740cda90a97694edc50a4085 Mon Sep 17 00:00:00 2001 From: Arpit Jalan Date: Mon, 8 Jul 2019 21:39:58 +0530 Subject: [PATCH] Bump onebox version. - better placeholders for audio/video/trello/typeform oneboxes - added CSS for audio/video/trello/typeform onebox placeholders --- Gemfile | 2 +- Gemfile.lock | 4 +-- .../stylesheets/common/base/onebox.scss | 35 ++++++++++++++----- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/Gemfile b/Gemfile index 36fb7542832..06f0719802d 100644 --- a/Gemfile +++ b/Gemfile @@ -46,7 +46,7 @@ gem 'redis-namespace' gem 'active_model_serializers', '~> 0.8.3' -gem 'onebox', '1.8.99' +gem 'onebox', '1.9.0' gem 'http_accept_language', '~>2.0.5', require: false diff --git a/Gemfile.lock b/Gemfile.lock index fcce28d8b81..c42577e8613 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -238,7 +238,7 @@ GEM omniauth-twitter (1.4.0) omniauth-oauth (~> 1.1) rack - onebox (1.8.99) + onebox (1.9.0) htmlentities (~> 4.3) moneta (~> 1.0) multi_json (~> 1.11) @@ -487,7 +487,7 @@ DEPENDENCIES omniauth-oauth2 omniauth-openid omniauth-twitter - onebox (= 1.8.99) + onebox (= 1.9.0) openid-redis-store parallel_tests pg diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss index 1b91e00c5d0..64e891c9415 100644 --- a/app/assets/stylesheets/common/base/onebox.scss +++ b/app/assets/stylesheets/common/base/onebox.scss @@ -607,24 +607,43 @@ aside.onebox.stackexchange .onebox-body { } } -.onebox-video-placeholder { +.onebox-placeholder-container { position: relative; width: 100%; padding: 0 0 48.25% 0; background-color: $primary-low; - .video-placeholder-icon { - &:before { - opacity: 0.8; - content: svg-uri( - '' - ); - } + .placeholder-icon { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; + + &.video { + &:before { + opacity: 0.8; + content: svg-uri( + '' + ); + } + } + &.audio { + &:before { + opacity: 0.4; + content: svg-uri( + '' + ); + } + } + &.generic { + &:before { + opacity: 0.4; + content: svg-uri( + '' + ); + } + } } }