commit: 4c3dd0b25472b4d291f607979d255dd406856bef
parent: 672df4ecc0d0563c58877a878264b9807102ecf0
Author: Lynx Kotoura <lynx@lv9.org>
Date: Tue, 5 Sep 2017 19:31:24 +0900
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
Diffstat:
4 files changed, 92 insertions(+), 87 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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' }<
