diff --git a/app/javascript/flavours/glitch/components/attachment_list.js b/app/javascript/flavours/glitch/components/attachment_list.js
index 3a28c70f3..ef937fb4c 100644
--- a/app/javascript/flavours/glitch/components/attachment_list.js
+++ b/app/javascript/flavours/glitch/components/attachment_list.js
@@ -1,5 +1,6 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
@@ -8,10 +9,25 @@ export default class AttachmentList extends ImmutablePureComponent {
static propTypes = {
media: ImmutablePropTypes.list.isRequired,
+ compact: PropTypes.bool,
};
render () {
- const { media } = this.props;
+ const { media, compact } = this.props;
+
+ if (compact) {
+ return (
+
+ );
+ }
return (
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 77477fe95..51f0f8884 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -6,6 +6,7 @@ import StatusHeader from './status_header';
import StatusIcons from './status_icons';
import StatusContent from './status_content';
import StatusActionBar from './status_action_bar';
+import AttachmentList from './attachment_list';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { MediaGallery, Video } from 'flavours/glitch/util/async-components';
import { HotKeys } from 'react-hotkeys';
@@ -311,7 +312,12 @@ export default class Status extends ImmutablePureComponent {
attachments = status.get('media_attachments');
if (attachments.size > 0 && !muted) {
if (attachments.some(item => item.get('type') === 'unknown')) { // Media type is 'unknown'
- /* Do nothing */
+ media = (
+
+ );
} else if (attachments.getIn([0, 'type']) === 'video') { // Media type is 'video'
const video = status.getIn(['media_attachments', 0]);
diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.scss
index de0783b6d..85f416ceb 100644
--- a/app/javascript/flavours/glitch/styles/components/lists.scss
+++ b/app/javascript/flavours/glitch/styles/components/lists.scss
@@ -5,45 +5,59 @@
border-radius: 4px;
margin-top: 14px;
overflow: hidden;
-}
-.attachment-list__icon {
- flex: 0 0 auto;
- color: $ui-base-lighter-color;
- padding: 8px 18px;
- cursor: default;
- border-right: 1px solid lighten($ui-base-color, 8%);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: 26px;
-
- .fa {
- display: block;
- }
-}
-
-.attachment-list__list {
- list-style: none;
- padding: 4px 0;
- padding-left: 8px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- li {
- display: block;
- padding: 4px 0;
- }
-
- a {
- text-decoration: none;
+ &__icon {
+ flex: 0 0 auto;
color: $ui-base-lighter-color;
- font-weight: 500;
+ padding: 8px 18px;
+ cursor: default;
+ border-right: 1px solid lighten($ui-base-color, 8%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 26px;
- &:hover {
- text-decoration: underline;
+ .fa {
+ display: block;
+ }
+ }
+
+ &__list {
+ list-style: none;
+ padding: 4px 0;
+ padding-left: 8px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ li {
+ display: block;
+ padding: 4px 0;
+ }
+
+ a {
+ text-decoration: none;
+ color: $ui-base-lighter-color;
+ font-weight: 500;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &.compact {
+ border: 0;
+ margin-top: 4px;
+
+ .attachment-list__list {
+ padding: 0;
+ display: block;
+ }
+
+ .fa {
+ color: $ui-base-lighter-color;
}
}
}