From 09cffaaf042f9d7d37c24427246abbf2303ebccb Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 4 Sep 2017 02:14:12 +0200 Subject: Fix #4551 - Use correct syntax for content preloading (#4798) --- app/views/layouts/application.html.haml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'app/views') diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index e21fb1ce1..88eff7d17 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -21,13 +21,13 @@ = stylesheet_pack_tag 'common', media: 'all' = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous' - = javascript_pack_tag 'features/getting_started', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' - = javascript_pack_tag 'features/compose', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' - = javascript_pack_tag 'features/home_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' - = javascript_pack_tag 'features/notifications', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' - = javascript_pack_tag 'features/community_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' - = javascript_pack_tag 'features/public_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' - = javascript_pack_tag 'emojione_picker', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' + %link{ href: asset_pack_path('features/getting_started.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ + %link{ href: asset_pack_path('features/compose.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ + %link{ href: asset_pack_path('features/home_timeline.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ + %link{ href: asset_pack_path('features/notifications.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ + %link{ href: asset_pack_path('features/community_timeline.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ + %link{ href: asset_pack_path('features/public_timeline.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ + %link{ href: asset_pack_path('emojione_picker.js'), crossorigin: 'anonymous', rel: 'preload', as: 'script' }/ = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous' = csrf_meta_tags -- cgit From 4c3dd0b25472b4d291f607979d255dd406856bef Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Tue, 5 Sep 2017 19:31:24 +0900 Subject: 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 --- app/javascript/styles/components.scss | 95 +++++++++++----------- app/javascript/styles/stream_entries.scss | 71 ++++++++-------- app/serializers/oembed_serializer.rb | 3 +- .../stream_entries/_detailed_status.html.haml | 10 +-- 4 files changed, 92 insertions(+), 87 deletions(-) (limited to 'app/views') 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' }< -- cgit