Fix layout of media gallery
This commit is contained in:
parent
b284e7c682
commit
4d01264c09
2 changed files with 35 additions and 10 deletions
|
@ -78,10 +78,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel,
|
||||||
|
.react-wrapper {
|
||||||
height: calc(100% - #{$header-height});
|
height: calc(100% - #{$header-height});
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
.container {
|
.container {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
max-width: 750px;
|
max-width: 750px;
|
||||||
|
@ -89,11 +92,15 @@
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.main.panel {
|
|
||||||
|
.main.panel,
|
||||||
|
.react-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: initial;
|
overflow: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main.panel {
|
||||||
.discussion-container {
|
.discussion-container {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -33,9 +33,18 @@ const tabStyle = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
tabContainer: {
|
container: {
|
||||||
cursor: 'pointer',
|
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
flexGrow: 1,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
} as React.CSSProperties,
|
||||||
|
tabContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
flexGrow: 0,
|
||||||
|
flexShrink: 0,
|
||||||
|
cursor: 'pointer',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
tab: {
|
tab: {
|
||||||
|
@ -45,9 +54,17 @@ const styles = {
|
||||||
borderBottom: '2px solid #08f',
|
borderBottom: '2px solid #08f',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
attachmentsContainer: {
|
contentContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
flexGrow: 1,
|
||||||
|
overflowY: 'auto',
|
||||||
padding: 20,
|
padding: 20,
|
||||||
},
|
} as React.CSSProperties,
|
||||||
|
sectionContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
flexGrow: 1,
|
||||||
|
flexDirection: 'column',
|
||||||
|
} as React.CSSProperties,
|
||||||
};
|
};
|
||||||
|
|
||||||
interface TabSelectEvent {
|
interface TabSelectEvent {
|
||||||
|
@ -86,7 +103,7 @@ export class MediaGallery extends React.Component<Props, State> {
|
||||||
const { selectedTab } = this.state;
|
const { selectedTab } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div style={styles.container}>
|
||||||
<div style={styles.tabContainer}>
|
<div style={styles.tabContainer}>
|
||||||
<Tab
|
<Tab
|
||||||
label="Media"
|
label="Media"
|
||||||
|
@ -101,7 +118,7 @@ export class MediaGallery extends React.Component<Props, State> {
|
||||||
onSelect={this.handleTabSelect}
|
onSelect={this.handleTabSelect}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={styles.attachmentsContainer}>{this.renderSections()}</div>
|
<div style={styles.contentContainer}>{this.renderSections()}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -122,8 +139,7 @@ export class MediaGallery extends React.Component<Props, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const sections = groupMessagesByDate(now, messages);
|
const sections = groupMessagesByDate(now, messages).map(section => {
|
||||||
return sections.map(section => {
|
|
||||||
const first = section.messages[0];
|
const first = section.messages[0];
|
||||||
const date = moment(first.received_at);
|
const date = moment(first.received_at);
|
||||||
const header =
|
const header =
|
||||||
|
@ -141,5 +157,7 @@ export class MediaGallery extends React.Component<Props, State> {
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return <div style={styles.sectionContainer}>{sections}</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue