|
@@ -47,6 +47,16 @@ export default class Events extends React.Component<EventsProps> {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ renderTagsTable = () => {
|
|
|
+ const {organization, eventView, location} = this.props;
|
|
|
+
|
|
|
+ if (eventView.tags.length <= 0) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ return <Tags eventView={eventView} organization={organization} location={location} />;
|
|
|
+ };
|
|
|
+
|
|
|
render() {
|
|
|
const {organization, eventView, location, router} = this.props;
|
|
|
const query = location.query.query || '';
|
|
@@ -72,19 +82,26 @@ export default class Events extends React.Component<EventsProps> {
|
|
|
query={query}
|
|
|
onSearch={this.handleSearch}
|
|
|
/>
|
|
|
- <Container>
|
|
|
+ <Container hasTags={eventView.tags.length > 0}>
|
|
|
<Table organization={organization} location={location} />
|
|
|
- <Tags eventView={eventView} organization={organization} location={location} />
|
|
|
+ {this.renderTagsTable()}
|
|
|
</Container>
|
|
|
</React.Fragment>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const Container = styled('div')`
|
|
|
+const Container = styled('div')<{hasTags: boolean}>`
|
|
|
display: grid;
|
|
|
- grid-template-columns: auto 300px;
|
|
|
grid-gap: ${space(2)};
|
|
|
+
|
|
|
+ ${props => {
|
|
|
+ if (props.hasTags) {
|
|
|
+ return 'grid-template-columns: auto 300px;';
|
|
|
+ }
|
|
|
+
|
|
|
+ return 'grid-template-columns: auto;';
|
|
|
+ }};
|
|
|
`;
|
|
|
|
|
|
const StyledSearchBar = styled(SearchBar)`
|