me
/
glitchier-soc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjusting public display of statuses to look similar to logged-in UI,

Browse Source 
fix #361 with rich OEmbed display via iframe, fix #237 by hiding sensitive
content behind a spoiler on public pages
th-downstream
Eugen Rochko 8 years ago
parent 6d7f3be2f6
commit 346aae50b0
13 changed files with 318 additions and 188 deletions
Show Stats Download Patch File Download Diff File

14
app/assets/javascripts/extras.jsx
Unescape View File

@ -1,8 +1,20 @@
import emojify from './components/emoji' import emojify from './components/emoji'
$(() => { $(() => {
$.each($('.entry .content, .name, .account__header__content'), (_, content) => { $.each($('.entry .content, .entry .status__content, .display-name, .name, .account__header__content'), (_, content) => {
const $content = $(content); const $content = $(content);
$content.html(emojify($content.html())); $content.html(emojify($content.html()));
}); });
$('.video-player video').on('click', e => {
if (e.target.paused) {
e.target.play();
} else {
e.target.pause();
}
});
$('.media-spoiler').on('click', e => {
$(e.target).hide();
});
}); });

363
app/assets/stylesheets/stream_entries.scss
Unescape View File

@ -3,232 +3,281 @@
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
.entry { .entry {
border-bottom: 1px solid #d9e1e8; .status.light, .detailed-status.light {
background: #fff; border-bottom: 1px solid #d9e1e8;
border-left: 2px solid #fff; }
&.entry-reblog { &:last-child {
border-left-color: #2b90d9; .status.light, .detailed-status.light {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
} }
&.entry-predecessor, &.entry-successor { &:first-child {
background: #d9e1e8; .status.light, .detailed-status.light {
border-left-color: #d9e1e8; border-radius: 4px 4px 0 0;
border-bottom-color: darken(#d9e1e8, 10%); }
.header { &:last-child {
.header__right { .status.light, .detailed-status.light {
.counter-btn { border-radius: 4px;
color: darken(#d9e1e8, 15%);
}
} }
} }
} }
}
&.entry-center { .status.light {
border-bottom-color: darken(#d9e1e8, 10%); padding: 14px 14px 14px (48px + 14px*2);
} position: relative;
min-height: 48px;
cursor: default;
background: lighten(#d9e1e8, 8%);
&.entry-follow, &.entry-favourite { .status__header {
.content { font-size: 15px;
padding-top: 10px;
padding-bottom: 10px;
strong { .status__meta {
font-weight: 500; float: right;
font-size: 14px;
.status__relative-time {
color: #9baec8;
} }
} }
} }
&:last-child { .status__display-name {
border-bottom: 0; display: block;
border-radius: 0 0 4px 4px; max-width: 100%;
padding-right: 25px;
color: #282c37;
} }
}
.entry:first-child { .status__avatar {
border-radius: 4px 4px 0 0; position: absolute;
left: 14px;
top: 14px;
width: 48px;
height: 48px;
&:last-child { & > div {
border-radius: 4px; width: 48px;
height: 48px;
}
img {
display: block;
border-radius: 4px;
}
} }
}
@media screen and (max-width: 700px) { .display-name {
border-radius: 0; display: block;
box-shadow: none; max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.entry { strong {
&:last-child { font-weight: 500;
border-radius: 0; color: #282c37;
} }
&:first-child { span {
border-radius: 0; font-size: 14px;
color: #9baec8;
}
}
&:last-child { .status__content {
border-radius: 0; color: #282c37;
}
a {
color: #2b90d9;
} }
} }
}
.entry__container { .status__attachments {
overflow: hidden; margin-top: 8px;
overflow: hidden;
width: 100%;
box-sizing: border-box;
height: 110px;
display: flex;
}
} }
.avatar { .detailed-status.light {
width: 56px; padding: 14px;
padding: 15px 10px; background: #fff;
padding-right: 5px; cursor: default;
float: left;
img { .detailed-status__display-name {
width: 56px;
height: 56px;
display: block; display: block;
border-radius: 4px; overflow: hidden;
} margin-bottom: 15px;
}
.entry__container__container { & > div {
margin-left: 71px; float: left;
} margin-right: 10px;
}
.header { .display-name {
margin-bottom: 10px; display: block;
padding: 15px; max-width: 100%;
padding-bottom: 0; overflow: hidden;
padding-left: 8px; white-space: nowrap;
display: flex; text-overflow: ellipsis;
strong {
font-weight: 500;
color: #282c37;
}
.header__left { span {
flex: 1; font-size: 14px;
color: #9baec8;
}
}
} }
.header__right { .avatar {
width: 48px;
height: 48px;
img {
display: block;
border-radius: 4px;
}
} }
.name { .status__content {
text-decoration: none; color: #282c37;
a {
color: #2b90d9;
}
}
.detailed-status__meta {
margin-top: 15px;
color: #9baec8; color: #9baec8;
font-size: 14px;
line-height: 18px;
strong { a {
color: #282c37; color: inherit;
font-weight: 500;
} }
&:hover { span > span {
strong { font-weight: 500;
text-decoration: underline; font-size: 12px;
} margin-left: 6px;
display: inline-block;
} }
} }
}
.pre-header {
border-bottom: 1px solid #d9e1e8;
color: #2b90d9;
padding: 5px 10px;
padding-left: 8px;
clear: both;
.name { .detailed-status__attachments {
color: #2b90d9; margin-top: 8px;
font-weight: 500; overflow: hidden;
text-decoration: none; width: 100%;
box-sizing: border-box;
height: 300px;
display: flex;
}
&:hover { .video-player {
text-decoration: underline; margin-top: 8px;
height: 300px;
overflow: hidden;
video {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
top: 50%;
transform: translateY(-50%);
} }
} }
} }
.content { .media-item, .video-item {
font-size: 14px; box-sizing: border-box;
padding: 0 15px; position: relative;
padding-left: 8px; left: auto;
padding-bottom: 15px; top: auto;
color: #282c37; right: auto;
word-wrap: break-word; bottom: auto;
overflow: hidden; float: left;
white-space: pre-wrap; border: medium none;
display: block;
p { flex: 1 1 auto;
margin-bottom: 18px; height: 100%;
margin-right: 2px;
&:last-child { &:last-child {
margin-bottom: 0; margin-right: 0;
}
} }
a { a {
color: #2b90d9; display: block;
width: 100%;
height: 100%;
background: no-repeat scroll center center / cover;
text-decoration: none; text-decoration: none;
cursor: zoom-in;
}
}
&:hover { .video-item {
text-decoration: underline; max-width: 196px;
}
&.mention { a {
&:hover { cursor: pointer;
text-decoration: none; }
span { .video-item__play {
text-decoration: underline; position: absolute;
} top: 50%;
} left: 50%;
} font-size: 36px;
transform: translate(-50%, -50%);
padding: 5px;
border-radius: 100px;
color: rgba(255, 255, 255, 0.8);
} }
} }
.time { .media-spoiler {
text-decoration: none; background: #9baec8;
color: #9baec8; width: 100%;
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
transition: all 100ms linear;
&:hover { &:hover {
text-decoration: underline; background: darken(#9baec8, 5%);
} }
}
.media-attachments {
list-style: none;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
padding-left: 10px;
margin-bottom: 15px;
li { span {
display: block; display: block;
float: left;
width: 120px;
height: 100px;
border-radius: 4px;
margin-right: 4px;
margin-bottom: 4px;
a { &:first-child {
display: block; font-size: 14px;
width: 120px;
height: 100px;
border-radius: 4px;
background-position: center;
background-repeat: none;
background-size: cover;
} }
}
}
@media screen and (max-width: 360px) { &:last-child {
.avatar { font-size: 11px;
display: none; font-weight: 500;
} }
.entry__container__container {
margin-left: 7px;
} }
} }
} }

4
app/controllers/api/oembed_controller.rb
Unescape View File

@ -5,8 +5,8 @@ class Api::OembedController < ApiController
def show def show
@stream_entry = stream_entry_from_url(params[:url]) @stream_entry = stream_entry_from_url(params[:url])
@width = [300, params[:maxwidth].to_i].max @width = params[:maxwidth].present? ? params[:maxwidth].to_i : 400
@height = [200, params[:maxheight].to_i].max @height = params[:maxheight].present? ? params[:maxheight].to_i : 600
end end
private private

5
app/controllers/stream_entries_controller.rb
Unescape View File

@ -9,8 +9,6 @@ class StreamEntriesController < ApplicationController
before_action :check_account_suspension before_action :check_account_suspension
def show def show
@type = @stream_entry.activity_type.downcase
respond_to do |format| respond_to do |format|
format.html do format.html do
return gone if @stream_entry.activity.nil? return gone if @stream_entry.activity.nil?
@ -27,7 +25,7 @@ class StreamEntriesController < ApplicationController
def embed def embed
response.headers['X-Frame-Options'] = 'ALLOWALL' response.headers['X-Frame-Options'] = 'ALLOWALL'
@type = @stream_entry.activity_type.downcase @external_links = true
return gone if @stream_entry.activity.nil? return gone if @stream_entry.activity.nil?
@ -46,6 +44,7 @@ class StreamEntriesController < ApplicationController
def set_stream_entry def set_stream_entry
@stream_entry = @account.stream_entries.find(params[:id]) @stream_entry = @account.stream_entries.find(params[:id])
@type = @stream_entry.activity_type.downcase
end end
def check_account_suspension def check_account_suspension

4
app/helpers/stream_entries_helper.rb
Unescape View File

@ -5,6 +5,10 @@ module StreamEntriesHelper
account.display_name.blank? ? account.username : account.display_name account.display_name.blank? ? account.username : account.display_name
end end
def acct(account)
"@#{account.acct}#{@external_links && account.local? ? "@#{Rails.configuration.x.local_domain}" : ''}"
end
def avatar_for_status_url(status) def avatar_for_status_url(status)
status.reblog? ? status.reblog.account.avatar.url( :original) : status.account.avatar.url( :original) status.reblog? ? status.reblog.account.avatar.url( :original) : status.account.avatar.url( :original)
end end

2
app/views/api/oembed/show.json.rabl
Unescape View File

@ -9,6 +9,6 @@ node(:author_url) { |entry| account_url(entry.account) }
node(:provider_name) { Rails.configuration.x.local_domain } node(:provider_name) { Rails.configuration.x.local_domain }
node(:provider_url) { root_url } node(:provider_url) { root_url }
node(:cache_age) { 86_400 } node(:cache_age) { 86_400 }
node(:html) { |entry| "<div style=\"position: relative; height: 0; overflow: hidden; padding-top: 30px; padding-bottom: 56.25%\"><iframe src=\"#{embed_account_stream_entry_url(entry.account, entry)}\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden\" frameborder=\"0\" width=\"#{@width}\" scrolling=\"no\"></iframe></div>" } node(:html) { |entry| "<iframe src=\"#{embed_account_stream_entry_url(entry.account, entry)}\" style=\"width: 100%; overflow: hidden\" frameborder=\"0\" width=\"#{@width}\" height=\"#{@height}\" scrolling=\"no\"></iframe>" }
node(:width) { @width } node(:width) { @width }
node(:height) { nil } node(:height) { nil }

3
app/views/stream_entries/_content_spoiler.html.haml
Unescape View File

@ -0,0 +1,3 @@
.media-spoiler
%span= t('stream_entries.sensitive_content')
%span= t('stream_entries.click_to_show')

36
app/views/stream_entries/_detailed_status.html.haml
Unescape View File

@ -0,0 +1,36 @@
.detailed-status.light
= link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name', target: @external_links ? '_blank' : nil, rel: 'noopener' do
%div
%div.avatar
= image_tag status.account.avatar.url(:original), width: 48, height: 48, alt: ''
%span.display-name
%strong= display_name(status.account)
%span= acct(status.account)
.status__content= Formatter.instance.format(status)
- unless status.media_attachments.empty?
- if status.media_attachments.first.video?
.video-player
- if status.sensitive?
= render partial: 'stream_entries/content_spoiler'
%video{ src: status.media_attachments.first.file.url(:original), loop: true }
- else
.detailed-status__attachments
- if status.sensitive?
= render partial: 'stream_entries/content_spoiler'
- status.media_attachments.each do |media|
.media-item
= link_to '', (media.remote_url.blank? ? media.file.url(:original) : media.remote_url), style: "background-image: url(#{media.file.url(:original)})", target: '_blank', rel: 'noopener'
%div.detailed-status__meta
= link_to TagManager.instance.url_for(status), class: 'detailed-status__datetime', target: @external_links ? '_blank' : nil, rel: 'noopener' do
%span= l(status.created_at)
·
%span
= fa_icon('retweet')
%span= status.reblogs.count
·
%span
= fa_icon('star')
%span= status.favourites.count

28
app/views/stream_entries/_simple_status.html.haml
Unescape View File

@ -0,0 +1,28 @@
.status.light
.status__header
.status__meta
= link_to time_ago_in_words(status.created_at), TagManager.instance.url_for(status), class: 'status__relative-time', title: l(status.created_at), target: @external_links ? '_blank' : nil, rel: 'noopener'
= link_to TagManager.instance.url_for(status.account), class: 'status__display-name', target: @external_links ? '_blank' : nil, rel: 'noopener' do
.status__avatar
%div
= image_tag status.account.avatar(:original), width: 48, height: 48, alt: ''
%span.display-name
%strong= display_name(status.account)
%span= acct(status.account)
.status__content= Formatter.instance.format(status)
- unless status.media_attachments.empty?
.status__attachments
- if status.sensitive?
= render partial: 'stream_entries/content_spoiler'
- if status.media_attachments.first.video?
.video-item
= link_to (status.media_attachments.first.remote_url.blank? ? status.media_attachments.first.file.url(:original) : status.media_attachments.first.remote_url), style: "background-image: url(#{status.media_attachments.first.file.url(:small)})", target: '_blank', rel: 'noopener' do
.video-item__play
= fa_icon('play')
- else
- status.media_attachments.each do |media|
.media-item
= link_to '', (media.remote_url.blank? ? media.file.url(:original) : media.remote_url), style: "background-image: url(#{media.file.url(:original)})", target: '_blank', rel: 'noopener'

25
app/views/stream_entries/_status.html.haml
Unescape View File

@ -1,7 +1,7 @@
- include_threads ||= false - include_threads ||= false
- is_predecessor ||= false - is_predecessor ||= false
- is_successor ||= false - is_successor ||= false
- centered = include_threads && !is_predecessor && !is_successor - centered ||= include_threads && !is_predecessor && !is_successor
- if status.reply? && include_threads - if status.reply? && include_threads
= render partial: 'status', collection: @ancestors, as: :status, locals: { is_predecessor: true } = render partial: 'status', collection: @ancestors, as: :status, locals: { is_predecessor: true }
@ -13,28 +13,7 @@
Shared by Shared by
= link_to display_name(status.account), TagManager.instance.url_for(status.account), class: 'name' = link_to display_name(status.account), TagManager.instance.url_for(status.account), class: 'name'
.entry__container = render partial: centered ? 'stream_entries/detailed_status' : 'stream_entries/simple_status', locals: { status: proper_status(status) }
.avatar
= image_tag avatar_for_status_url(status)
.entry__container__container
.header
.header__left
= link_to TagManager.instance.url_for(proper_status(status).account), class: 'name' do
%strong= display_name(proper_status(status).account)
= "@#{proper_status(status).account.acct}"
.header__right
= link_to TagManager.instance.url_for(proper_status(status)), class: 'time' do
%span{ title: proper_status(status).created_at }
= relative_time(proper_status(status).created_at)
.content= Formatter.instance.format(proper_status(status))
- if (status.reblog? ? status.reblog : status).media_attachments.size > 0
%ul.media-attachments
- (status.reblog? ? status.reblog : status).media_attachments.each do |media|
%li.transparent-background= link_to '', media.file.url( :original), style: "background-image: url(#{media.file.url( :small)})", target: '_blank'
- if include_threads - if include_threads
= render partial: 'status', collection: @descendants, as: :status, locals: { is_successor: true } = render partial: 'status', collection: @descendants, as: :status, locals: { is_successor: true }

2
app/views/stream_entries/embed.html.haml
Unescape View File

@ -1,2 +1,2 @@
.activity-stream.activity-stream-headless .activity-stream.activity-stream-headless
= render partial: @type, locals: { @type.to_sym => @stream_entry.activity } = render partial: @type, locals: { @type.to_sym => @stream_entry.activity, centered: true }

1
config/i18n-tasks.yml
Unescape View File

@ -33,6 +33,7 @@ search:
ignore_unused: ignore_unused:
- 'activerecord.attributes.*' - 'activerecord.attributes.*'
- '{devise,will_paginate,doorkeeper}.*' - '{devise,will_paginate,doorkeeper}.*'
- '{datetime,time}.*'
- 'simple_form.{yes,no}' - 'simple_form.{yes,no}'
- 'simple_form.{placeholders,hints,labels}.*' - 'simple_form.{placeholders,hints,labels}.*'
- 'simple_form.{error_notification,required}.:' - 'simple_form.{error_notification,required}.:'

19
config/locales/en.yml
Unescape View File

@ -26,6 +26,20 @@ en:
resend_confirmation: Resend confirmation instructions resend_confirmation: Resend confirmation instructions
reset_password: Reset password reset_password: Reset password
set_new_password: Set new password set_new_password: Set new password
datetime:
distance_in_words:
about_x_hours: "%{count}h"
about_x_months: "%{count}mo"
about_x_years: "%{count}y"
almost_x_years: "%{count}y"
half_a_minute: Just now
less_than_x_minutes: "%{count}m"
less_than_x_seconds: Just now
over_x_years: "%{count}y"
x_days: "%{count}d"
x_minutes: "%{count}m"
x_months: "%{count}mo"
x_seconds: "%{count}s"
generic: generic:
changes_saved_msg: Changes successfully saved! changes_saved_msg: Changes successfully saved!
powered_by: powered by %{link} powered_by: powered by %{link}
@ -53,8 +67,13 @@ en:
edit_profile: Edit profile edit_profile: Edit profile
preferences: Preferences preferences: Preferences
stream_entries: stream_entries:
click_to_show: Click to show
favourited: favourited a post by favourited: favourited a post by
is_now_following: is now following is_now_following: is now following
sensitive_content: Sensitive content
time:
formats:
default: "%b %d, %Y, %H:%M"
users: users:
invalid_email: The e-mail address is invalid invalid_email: The e-mail address is invalid
will_paginate: will_paginate:

Write Preview
Loading…
Cancel
Save