Adjust status embeds (#4808)

* Adjust status embeds

Adjust styles of embed code. Adjust styles of embed pages. Fix overflow of embed-modal.

* Remove trailing whitespace

* Using width from the variable
This commit is contained in:
Lynx Kotoura 2017-09-05 19:31:24 +09:00 committed by Eugen Rochko
parent 672df4ecc0
commit 4c3dd0b254
4 changed files with 97 additions and 92 deletions

View File

@ -3966,7 +3966,25 @@ noscript {
} }
} }
.embed-modal__html { .embed-modal {
max-width: 80vw;
max-height: 80vh;
h4 {
padding: 30px;
font-weight: 500;
font-size: 16px;
text-align: center;
}
.embed-modal__container {
padding: 10px;
.hint {
margin-bottom: 15px;
}
.embed-modal__html {
color: $ui-secondary-color; color: $ui-secondary-color;
outline: 0; outline: 0;
box-sizing: border-box; box-sizing: border-box;
@ -3998,28 +4016,13 @@ noscript {
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
font-size: 16px; font-size: 16px;
} }
}
.embed-modal {
h4 {
padding: 30px;
font-weight: 500;
font-size: 16px;
text-align: center;
} }
.hint { .embed-modal__iframe {
margin-bottom: 15px; width: 400px;
} max-width: 100%;
}
.embed-modal__container {
padding: 10px;
}
.embed-modal__iframe {
width: 100%;
min-width: 400px;
overflow: hidden; overflow: hidden;
border: 0; border: 0;
}
}
} }

View File

@ -403,29 +403,23 @@
.embed { .embed {
.activity-stream { .activity-stream {
border-radius: 4px;
box-shadow: none; box-shadow: none;
.entry { .entry {
&:last-child {
border-radius: 0 0 4px 4px; .detailed-status.light {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
.detailed-status__display-name {
flex: 1;
margin: 0 5px 15px 0;
} }
&:first-child { .button.button-secondary.logo-button {
border-radius: 4px 4px 0 0; flex: 0 auto;
&:last-child {
border-radius: 4px;
}
}
}
}
}
.button.button-secondary.logo-button {
position: absolute;
right: 14px;
top: 14px;
font-size: 14px; font-size: 14px;
svg { svg {
@ -450,4 +444,13 @@
fill: lighten($ui-primary-color, 4%); fill: lighten($ui-primary-color, 4%);
} }
} }
}
.status__content,
.detailed-status__meta {
flex: 100%;
}
}
}
}
} }

View File

@ -40,8 +40,7 @@ class OEmbedSerializer < ActiveModel::Serializer
attributes = { attributes = {
src: embed_short_account_status_url(object.account, object), src: embed_short_account_status_url(object.account, object),
class: 'mastodon-embed', class: 'mastodon-embed',
frameborder: '0', style: 'max-width: 100%; border: none;',
scrolling: 'no',
width: width, width: width,
height: height, height: height,
} }

View File

@ -1,9 +1,4 @@
.detailed-status.light .detailed-status.light
- if embedded_view?
= link_to "web+mastodon://follow?uri=#{status.account.local_username_and_domain}", class: 'button button-secondary logo-button', target: '_new' do
= render file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')
= t('accounts.follow')
= link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do = link_to TagManager.instance.url_for(status.account), class: 'detailed-status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do
%div %div
.avatar .avatar
@ -12,6 +7,11 @@
%strong.p-name.emojify= display_name(status.account) %strong.p-name.emojify= display_name(status.account)
%span= acct(status.account) %span= acct(status.account)
- if embedded_view?
= link_to "web+mastodon://follow?uri=#{status.account.local_username_and_domain}", class: 'button button-secondary logo-button', target: '_new' do
= render file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')
= t('accounts.follow')
.status__content.p-name.emojify< .status__content.p-name.emojify<
- if status.spoiler_text? - if status.spoiler_text?
%p{ style: 'margin-bottom: 0' }< %p{ style: 'margin-bottom: 0' }<