luna/mastodon
0
0
Fork 0
mirror of https://github.com/lunaisnotaboy/mastodon.git synced 2024-11-19 13:23:13 +00:00
Code Issues Projects Releases Wiki Activity

Fixed styling for media attachments in statuses (margins)

Browse source
This commit is contained in:
Eugen Rochko 2016-09-06 01:26:35 +02:00
parent ac77170d19
commit 75fbde1c1a
1 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app/assets/javascripts/components/components/media_gallery.jsx
View file

@ -16,16 +16,54 @@ const MediaGallery = React.createClass({
children = children.map((attachment, i) => { children = children.map((attachment, i) => {
let width = 50; let width = 50;
let height = 100; let height = 100;
let top = 'auto';
let left = 'auto';
let bottom = 'auto';
let right = 'auto';
if (size == 4 || (size === 3 && i > 0)) { if (size === 4 || (size === 3 && i > 0)) {
height = 50; height = 50;
} }
return <a key={attachment.get('id')} href={attachment.get('url')} style={{ boxSizing: 'border-box', position: 'relative', float: 'left', textDecoration: 'none', border: 'none', display: 'block', width: `${width}%`, height: `${height}%`, background: `url(${attachment.get('preview_url')}) no-repeat`, backgroundSize: 'cover', cursor: 'zoom-in' }} />; if (size === 2) {
if (i === 0) {
right = '2px';
} else {
left = '2px';
}
} else if (size === 3) {
if (i === 0) {
right = '2px';
} else if (i > 0) {
left = '2px';
}
if (i === 1) {
bottom = '2px';
} else if (i > 1) {
top = '2px';
}
} else if (size === 4) {
if (i === 0 || i === 2) {
right = '2px';
}
if (i === 1 || i === 3) {
left = '2px';
}
if (i < 2) {
bottom = '2px';
} else {
top = '2px';
}
}
return <a key={attachment.get('id')} href={attachment.get('url')} style={{ boxSizing: 'border-box', position: 'relative', left: left, top: top, right: right, bottom: bottom, float: 'left', textDecoration: 'none', border: 'none', display: 'block', width: `${width}%`, height: `${height}%`, background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover', cursor: 'zoom-in' }} />;
}); });
return ( return (
<div style={{ marginTop: '8px', overflow: 'hidden', width: '100%', height: '110px', boxSizing: 'border-box', padding: '4px' }}> <div style={{ marginTop: '8px', overflow: 'hidden', width: '100%', height: '110px', boxSizing: 'border-box' }}>
{children} {children}
</div> </div>
); );