+
attachment.get('type') === 'unknown');
if (standalone && this.isFullSizeEligible()) {
children = ;
} else {
- children = media.take(20).map((attachment, i) => );
+ children = media.take(4).map((attachment, i) => );
}
if (uncached) {
diff --git a/app/javascript/mastodon/features/compose/containers/upload_button_container.js b/app/javascript/mastodon/features/compose/containers/upload_button_container.js
index 45e327805f..221b98e310 100644
--- a/app/javascript/mastodon/features/compose/containers/upload_button_container.js
+++ b/app/javascript/mastodon/features/compose/containers/upload_button_container.js
@@ -3,7 +3,7 @@ import UploadButton from '../components/upload_button';
import { uploadCompose } from '../../../actions/compose';
const mapStateToProps = state => ({
- disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 19 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
+ disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
unavailable: state.getIn(['compose', 'poll']) !== null,
resetFileKey: state.getIn(['compose', 'resetFileKey']),
});
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 39cf55be6f..3feffa6564 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -69,7 +69,7 @@ const mapStateToProps = state => ({
isComposing: state.getIn(['compose', 'is_composing']),
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
- canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 20,
+ canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
username: state.getIn(['accounts', me, 'username']),
diff --git a/app/javascript/mastodon/utils/resize_image.js b/app/javascript/mastodon/utils/resize_image.js
index 1e560de92a..22ff86801a 100644
--- a/app/javascript/mastodon/utils/resize_image.js
+++ b/app/javascript/mastodon/utils/resize_image.js
@@ -1,7 +1,6 @@
import EXIF from 'exif-js';
-//const MAX_IMAGE_PIXELS = 2073600; // 1920x1080px
-const MAX_IMAGE_PIXELS = 8294400; // 3840x2160px (HiDPI patch)
+const MAX_IMAGE_PIXELS = 2073600; // 1920x1080px
const _browser_quirks = {};
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 17652ce061..591f2fad13 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -50,14 +50,16 @@
cursor: pointer;
display: inline-block;
font-family: inherit;
- font-size: 17px;
+ font-size: 14px;
font-weight: 500;
+ height: 36px;
letter-spacing: 0;
- line-height: 22px;
+ line-height: 36px;
overflow: hidden;
- padding: 7px 18px;
+ padding: 0 16px;
position: relative;
text-align: center;
+ text-transform: uppercase;
text-decoration: none;
text-overflow: ellipsis;
transition: all 100ms ease-in;
@@ -98,6 +100,17 @@
outline: 0 !important;
}
+ &.button-primary,
+ &.button-alternative,
+ &.button-secondary,
+ &.button-alternative-2 {
+ font-size: 16px;
+ line-height: 36px;
+ height: auto;
+ text-transform: none;
+ padding: 4px 16px;
+ }
+
&.button-alternative {
color: $inverted-text-color;
background: $ui-primary-color;
@@ -122,7 +135,7 @@
&.button-secondary {
color: $darker-text-color;
background: transparent;
- padding: 6px 17px;
+ padding: 3px 15px;
border: 1px solid $ui-primary-color;
&:active,
@@ -815,18 +828,11 @@
}
.emojione {
- width: 32px;
- height: 32px;
- margin: 0;
- }
-
- img.emojione[alt^=":sticker_"] {
- width: 128px;
- height: 128px;
- display: block;
- margin: 0;
+ width: 20px;
+ height: 20px;
+ margin: -3px 0 0;
}
-
+
p {
margin-bottom: 20px;
white-space: pre-wrap;
@@ -1108,39 +1114,42 @@
font-size: 15px;
}
-.status-check-box__status {
- display: block;
- box-sizing: border-box;
- width: 100%;
- padding: 0 10px;
+.status-check-box {
+ border-bottom: 1px solid $ui-secondary-color;
+ display: flex;
- .detailed-status__display-name {
- color: lighten($inverted-text-color, 16%);
+ .status-check-box__status {
+ margin: 10px 0 10px 10px;
+ flex: 1;
+ overflow: hidden;
- span {
- display: inline;
+ .media-gallery {
+ max-width: 250px;
}
- &:hover strong {
- text-decoration: none;
+ .status__content {
+ padding: 0;
+ white-space: normal;
}
- }
- .media-gallery,
- .audio-player,
- .video-player {
- margin-top: 8px;
- max-width: 250px;
- }
+ .video-player,
+ .audio-player {
+ margin-top: 8px;
+ max-width: 250px;
+ }
- .status__content {
- padding: 0;
- white-space: normal;
+ .media-gallery__item-thumbnail {
+ cursor: default;
+ }
}
+}
- .media-gallery__item-thumbnail {
- cursor: default;
- }
+.status-check-box-toggle {
+ align-items: center;
+ display: flex;
+ flex: 0 0 auto;
+ justify-content: center;
+ padding: 10px;
}
.status__prepend {
@@ -1770,7 +1779,7 @@ a.account__display-name {
.image-loader__preview-canvas {
max-width: $media-modal-media-max-width;
max-height: $media-modal-media-max-height;
- background: url('~images/void.png') repeat;
+ background: url('../images/void.png') repeat;
object-fit: contain;
}
@@ -5094,192 +5103,6 @@ a.status-card.compact:hover {
max-width: 700px;
}
-.report-dialog-modal {
- max-width: 90vw;
- width: 480px;
- height: 80vh;
- background: lighten($ui-secondary-color, 8%);
- color: $inverted-text-color;
- border-radius: 8px;
- overflow: hidden;
- position: relative;
- flex-direction: column;
- display: flex;
-
- &__container {
- box-sizing: border-box;
- border-top: 1px solid $ui-secondary-color;
- padding: 20px;
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
- overflow: auto;
- }
-
- &__title {
- font-size: 28px;
- line-height: 33px;
- font-weight: 700;
- margin-bottom: 15px;
-
- @media screen and (max-height: 800px) {
- font-size: 22px;
- }
- }
-
- &__subtitle {
- font-size: 17px;
- font-weight: 600;
- line-height: 22px;
- margin-bottom: 4px;
- }
-
- &__lead {
- font-size: 17px;
- line-height: 22px;
- color: lighten($inverted-text-color, 16%);
- margin-bottom: 30px;
- }
-
- &__actions {
- margin-top: 30px;
- display: flex;
-
- .button {
- flex: 1 1 auto;
- }
- }
-
- &__statuses {
- flex-grow: 1;
- min-height: 0;
- overflow: auto;
- }
-
- .status__content a {
- color: $highlight-text-color;
- }
-
- .status__content,
- .status__content p {
- color: $inverted-text-color;
- }
-
- .dialog-option .poll__input {
- border-color: $inverted-text-color;
- color: $ui-secondary-color;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-
- svg {
- width: 8px;
- height: auto;
- }
-
- &:active,
- &:focus,
- &:hover {
- border-color: lighten($inverted-text-color, 15%);
- border-width: 4px;
- }
-
- &.active {
- border-color: $inverted-text-color;
- background: $inverted-text-color;
- }
- }
-
- .poll__option.dialog-option {
- padding: 15px 0;
- flex: 0 0 auto;
- border-bottom: 1px solid $ui-secondary-color;
-
- &:last-child {
- border-bottom: 0;
- }
-
- & > .poll__option__text {
- font-size: 13px;
- color: lighten($inverted-text-color, 16%);
-
- strong {
- font-size: 17px;
- font-weight: 500;
- line-height: 22px;
- color: $inverted-text-color;
- display: block;
- margin-bottom: 4px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
-
- .flex-spacer {
- background: transparent;
- }
-
- &__textarea {
- display: block;
- box-sizing: border-box;
- width: 100%;
- margin: 0;
- color: $inverted-text-color;
- background: $simple-background-color;
- padding: 10px;
- font-family: inherit;
- font-size: 17px;
- line-height: 22px;
- resize: vertical;
- border: 0;
- outline: 0;
- border-radius: 4px;
- margin: 20px 0;
-
- &::placeholder {
- color: $dark-text-color;
- }
-
- &:focus {
- outline: 0;
- }
- }
-
- &__toggle {
- display: flex;
- align-items: center;
-
- & > span {
- font-size: 17px;
- font-weight: 500;
- margin-left: 10px;
- }
- }
-
- .button.button-secondary {
- border-color: $inverted-text-color;
- color: $inverted-text-color;
- flex: 0 0 auto;
-
- &:hover,
- &:focus,
- &:active {
- border-color: lighten($inverted-text-color, 15%);
- color: lighten($inverted-text-color, 15%);
- }
- }
-
- hr {
- border: 0;
- background: transparent;
- margin: 15px 0;
- }
-}
-
.report-modal__container {
display: flex;
border-top: 1px solid $ui-secondary-color;
@@ -6877,7 +6700,7 @@ noscript {
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
- background: url('~images/reticle.png') no-repeat 0 0;
+ background: url('../images/reticle.png') no-repeat 0 0;
border-radius: 50%;
box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
}