mirror of
https://github.com/mastodon/mastodon.git
synced 2024-11-21 12:05:07 +01:00
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:
parent
672df4ecc0
commit
4c3dd0b254
@ -3966,41 +3966,10 @@ noscript {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.embed-modal__html {
|
|
||||||
color: $ui-secondary-color;
|
|
||||||
outline: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
padding: 10px;
|
|
||||||
font-family: 'mastodon-font-monospace', monospace;
|
|
||||||
background: $ui-base-color;
|
|
||||||
color: $ui-primary-color;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-focus-inner,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
outline: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background: lighten($ui-base-color, 4%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.embed-modal {
|
.embed-modal {
|
||||||
|
max-width: 80vw;
|
||||||
|
max-height: 80vh;
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -4008,18 +3977,52 @@ noscript {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.embed-modal__container {
|
||||||
margin-bottom: 15px;
|
padding: 10px;
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal__html {
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
outline: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: 'mastodon-font-monospace', monospace;
|
||||||
|
background: $ui-base-color;
|
||||||
|
color: $ui-primary-color;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-focus-inner,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
outline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal__iframe {
|
||||||
|
width: 400px;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.embed-modal__container {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.embed-modal__iframe {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 400px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
@ -403,51 +403,54 @@
|
|||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
.detailed-status.light {
|
||||||
border-radius: 4px 4px 0 0;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
&:last-child {
|
.detailed-status__display-name {
|
||||||
border-radius: 4px;
|
flex: 1;
|
||||||
|
margin: 0 5px 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-secondary.logo-button {
|
||||||
|
flex: 0 auto;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 20px;
|
||||||
|
height: auto;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 5px;
|
||||||
|
|
||||||
|
path:first-child {
|
||||||
|
fill: $ui-primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
path:last-child {
|
||||||
|
fill: $simple-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
svg path:first-child {
|
||||||
|
fill: lighten($ui-primary-color, 4%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__content,
|
||||||
|
.detailed-status__meta {
|
||||||
|
flex: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.button-secondary.logo-button {
|
|
||||||
position: absolute;
|
|
||||||
right: 14px;
|
|
||||||
top: 14px;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 20px;
|
|
||||||
height: auto;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: 5px;
|
|
||||||
|
|
||||||
path:first-child {
|
|
||||||
fill: $ui-primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
path:last-child {
|
|
||||||
fill: $simple-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
svg path:first-child {
|
|
||||||
fill: lighten($ui-primary-color, 4%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -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,
|
||||||
}
|
}
|
||||||
|
@ -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' }<
|
||||||
|
Loading…
Reference in New Issue
Block a user