diff options
| -rw-r--r-- | app/javascript/styles/components.scss | 95 | ||||
| -rw-r--r-- | app/javascript/styles/stream_entries.scss | 71 | ||||
| -rw-r--r-- | app/serializers/oembed_serializer.rb | 3 | ||||
| -rw-r--r-- | app/views/stream_entries/_detailed_status.html.haml | 10 |
4 files changed, 92 insertions, 87 deletions
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 0fbaeeea0..1b9763e90 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -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 { + max-width: 80vw; + max-height: 80vh; + h4 { padding: 30px; font-weight: 500; @@ -4008,18 +3977,52 @@ noscript { text-align: center; } - .hint { - margin-bottom: 15px; - } -} + .embed-modal__container { + padding: 10px; -.embed-modal__container { - padding: 10px; -} + .hint { + margin-bottom: 15px; + } -.embed-modal__iframe { - width: 100%; - min-width: 400px; - overflow: hidden; - border: 0; + .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; + } + } } diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss index 7048ab110..8ed4c0b25 100644 --- a/app/javascript/styles/stream_entries.scss +++ b/app/javascript/styles/stream_entries.scss @@ -403,51 +403,54 @@ .embed { .activity-stream { - border-radius: 4px; box-shadow: none; .entry { - &:last-child { - border-radius: 0 0 4px 4px; - } - &:first-child { - border-radius: 4px 4px 0 0; + .detailed-status.light { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; - &:last-child { - border-radius: 4px; + .detailed-status__display-name { + flex: 1; + margin: 0 5px 15px 0; } - } - } - } -} -.button.button-secondary.logo-button { - position: absolute; - right: 14px; - top: 14px; - font-size: 14px; + .button.button-secondary.logo-button { + flex: 0 auto; + font-size: 14px; - svg { - width: 20px; - height: auto; - vertical-align: middle; - margin-right: 5px; + svg { + width: 20px; + height: auto; + vertical-align: middle; + margin-right: 5px; - path:first-child { - fill: $ui-primary-color; - } + path:first-child { + fill: $ui-primary-color; + } - path:last-child { - fill: $simple-background-color; - } - } + path:last-child { + fill: $simple-background-color; + } + } - &:active, - &:focus, - &:hover { - svg path:first-child { - fill: lighten($ui-primary-color, 4%); + &:active, + &:focus, + &:hover { + svg path:first-child { + fill: lighten($ui-primary-color, 4%); + } + } + } + + .status__content, + .detailed-status__meta { + flex: 100%; + } + } } } } diff --git a/app/serializers/oembed_serializer.rb b/app/serializers/oembed_serializer.rb index 4f9293043..bd05da585 100644 --- a/app/serializers/oembed_serializer.rb +++ b/app/serializers/oembed_serializer.rb @@ -40,8 +40,7 @@ class OEmbedSerializer < ActiveModel::Serializer attributes = { src: embed_short_account_status_url(object.account, object), class: 'mastodon-embed', - frameborder: '0', - scrolling: 'no', + style: 'max-width: 100%; border: none;', width: width, height: height, } diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml index 107202b75..466087b6a 100644 --- a/app/views/stream_entries/_detailed_status.html.haml +++ b/app/views/stream_entries/_detailed_status.html.haml @@ -1,9 +1,4 @@ .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 %div .avatar @@ -12,6 +7,11 @@ %strong.p-name.emojify= display_name(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< - if status.spoiler_text? %p{ style: 'margin-bottom: 0' }< |