UX: oneboxes with avatars now display consistently

Onebox avatar size is reduced to 60px

Also fixes regression with some oneboxes not cooking after post
This commit is contained in:
Sam
2017-11-08 11:50:01 +11:00
parent d7880af0bb
commit fc7dca58fe
4 changed files with 21 additions and 10 deletions

View File

@ -35,7 +35,7 @@ gem 'redis-namespace'
gem 'active_model_serializers', '~> 0.8.3' gem 'active_model_serializers', '~> 0.8.3'
gem 'onebox', '1.8.22' gem 'onebox', '1.8.23'
gem 'http_accept_language', '~>2.0.5', require: false gem 'http_accept_language', '~>2.0.5', require: false

View File

@ -228,7 +228,7 @@ GEM
omniauth-twitter (1.3.0) omniauth-twitter (1.3.0)
omniauth-oauth (~> 1.1) omniauth-oauth (~> 1.1)
rack rack
onebox (1.8.22) onebox (1.8.23)
fast_blank (>= 1.0.0) fast_blank (>= 1.0.0)
htmlentities (~> 4.3) htmlentities (~> 4.3)
moneta (~> 1.0) moneta (~> 1.0)
@ -464,7 +464,7 @@ DEPENDENCIES
omniauth-oauth2 omniauth-oauth2
omniauth-openid omniauth-openid
omniauth-twitter omniauth-twitter
onebox (= 1.8.22) onebox (= 1.8.23)
openid-redis-store openid-redis-store
pg pg
pry-nav pry-nav
@ -505,4 +505,4 @@ DEPENDENCIES
webmock webmock
BUNDLED WITH BUNDLED WITH
1.15.4 1.16.0

View File

@ -241,8 +241,8 @@ aside.onebox {
aside.onebox .onebox-body .onebox-avatar { aside.onebox .onebox-body .onebox-avatar {
max-height: none; max-height: none;
max-width: none; max-width: none;
height: 90px; height: 60px;
width: 90px; width: 60px;
} }
blockquote { blockquote {
@ -358,8 +358,7 @@ aside.onebox.twitterstatus .onebox-body {
} }
.date { .date {
clear: left; clear: left;
padding-top: 5px; padding-top: 10px;
margin-left: 58px;
} }
} }
@ -397,7 +396,7 @@ aside.onebox.twitterstatus .onebox-body {
// resize stackexchange onebox image // resize stackexchange onebox image
aside.onebox.stackexchange .onebox-body { aside.onebox.stackexchange .onebox-body {
img { img:not(.onebox-avatar) {
max-height: 60%; max-height: 60%;
max-width: 10%; max-width: 10%;
} }
@ -443,6 +442,14 @@ aside.onebox.stackexchange .onebox-body {
} }
} }
.onebox.githubcommit {
pre.message {
clear: left;
padding: 0;
padding-top: 10px;
}
}
// mobile specific style // mobile specific style
.mobile-view article.onebox-body { .mobile-view article.onebox-body {
border-top: none; border-top: none;

View File

@ -326,7 +326,11 @@ class CookedPostProcessor
# and wrap in a div # and wrap in a div
oneboxed_images.each do |img| oneboxed_images.each do |img|
limit_size!(img) limit_size!(img)
if img.parent["class"].include?("onebox-body") && (width = img["width"].to_i) > 0 && (height = img["height"].to_i) > 0
next if img["class"]&.include?('onebox-avatar')
parent_class = img.parent && img.parent["class"]
if parent_class&.include?("onebox-body") && (width = img["width"].to_i) > 0 && (height = img["height"].to_i) > 0
img.delete('width') img.delete('width')
img.delete('height') img.delete('height')
new_parent = img.add_next_sibling("<div class='aspect-image' style='--aspect-ratio:#{width}/#{height};'/>") new_parent = img.add_next_sibling("<div class='aspect-image' style='--aspect-ratio:#{width}/#{height};'/>")