feat(events-v2) Add responsive views for events modal

Adjust layout at our breakpoints so that the modal is readable in each layout mode. Refs SEN-729
getsentry · Jun 11, 2019 · 20d689d · 20d689d
1 parent dc4fbea
commit 20d689d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 6 deletions.
diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/eventDetails.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/eventDetails.jsx
@@ -9,6 +9,7 @@ import AsyncComponent from 'app/components/asyncComponent';
 import InlineSvg from 'app/components/inlineSvg';
 import withApi from 'app/utils/withApi';
 import space from 'app/styles/space';
+import theme from 'app/utils/theme';
 
 import EventModalContent from './eventModalContent';
 import {getQuery} from './utils';
@@ -148,6 +149,10 @@ const ModalContainer = styled('div')`
   box-shadow: ${p => p.theme.dropShadowHeavy};
 
   z-index: ${p => p.theme.zIndex.modal};
+
+  @media (max-width: ${theme.breakpoints[1]}) {
+    margin: ${space(2)};
+  }
 `;
 
 const CircleButton = styled('button')`

diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/eventModalContent.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/eventModalContent.jsx
@@ -3,8 +3,6 @@ import React from 'react';
 import styled from 'react-emotion';
 
 import {INTERFACES} from 'app/components/events/eventEntries';
-import {getMessage, getTitle} from 'app/utils/events';
-import {objectIsEmpty, toTitleCase} from 'app/utils';
 import {t} from 'app/locale';
 import DateTime from 'app/components/dateTime';
 import ErrorBoundary from 'app/components/errorBoundary';
@@ -16,8 +14,12 @@ import ExternalLink from 'app/components/links/externalLink';
 import FileSize from 'app/components/fileSize';
 import NavTabs from 'app/components/navTabs';
 import SentryTypes from 'app/sentryTypes';
-import getDynamicText from 'app/utils/getDynamicText';
+import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
+import {objectIsEmpty, toTitleCase} from 'app/utils';
+import {getMessage, getTitle} from 'app/utils/events';
+import getDynamicText from 'app/utils/getDynamicText';
+import theme from 'app/utils/theme';
 
 import LinkedIssuePreview from './linkedIssuePreview';
 import ModalPagination from './modalPagination';
@@ -172,7 +174,7 @@ const EventHeader = props => {
   const {title} = getTitle(props.event);
   return (
     <div>
-      <h2>{title}</h2>
+      <OverflowHeader>{title}</OverflowHeader>
       <p>{getMessage(props.event)}</p>
     </div>
   );
@@ -206,6 +208,10 @@ EventMetadata.propTypes = {
   eventJsonUrl: PropTypes.string.isRequired,
 };
 
+const OverflowHeader = styled('h2')`
+  ${overflowEllipsis}
+`;
+
 const MetadataContainer = styled('div')`
   display: flex;
   justify-content: space-between;
@@ -219,6 +225,15 @@ const ColumnGrid = styled('div')`
   grid-template-columns: 70% 28%;
   grid-template-rows: auto;
   grid-column-gap: 2%;
+
+  @media (max-width: ${theme.breakpoints[1]}) {
+    grid-template-columns: 60% 38%;
+  }
+
+  @media (max-width: ${theme.breakpoints[0]}) {
+    display: flex;
+    flex-direction: column;
+  }
 `;
 
 const HeaderBox = styled('div')`

diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/modalPagination.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/modalPagination.jsx
@@ -9,6 +9,7 @@ import Link from 'app/components/links/link';
 import SentryTypes from 'app/sentryTypes';
 import InlineSvg from 'app/components/inlineSvg';
 import space from 'app/styles/space';
+import theme from 'app/utils/theme';
 
 const ModalPagination = props => {
   const {location, event} = props;
@@ -75,13 +76,22 @@ ModalPagination.propTypes = {
 const StyledLink = styled(Link, {shouldForwardProp: isPropValid})`
   color: ${p => (p.disabled ? p.theme.disabled : p.theme.gray3)};
   font-size: ${p => p.fontSizeMedium};
+  text-align: center;
   padding: ${space(0.5)} ${space(1.5)};
   ${p => (p.isLast ? '' : `border-right: 1px solid ${p.theme.borderDark};`)}
   ${p => (p.disabled ? 'pointer-events: none;' : '')}
+
+  @media(max-width: ${theme.breakpoints[0]}) {
+    flex-grow: 1;
+  }
 `;
 
 const Wrapper = styled('div')`
   display: flex;
+
+  @media (max-width: ${theme.breakpoints[0]}) {
+    width: 100%;
+  }
 `;
 
 const ShadowBox = styled('div')`
@@ -92,6 +102,10 @@ const ShadowBox = styled('div')`
   margin-bottom: ${space(3)};
   box-shadow: 3px 3px 0 ${p => p.theme.offWhite}, 3px 3px 0 1px ${p => p.theme.borderDark},
     7px 7px ${p => p.theme.offWhite}, 7px 7px 0 1px ${p => p.theme.borderDark};
+
+  @media (max-width: ${theme.breakpoints[0]}) {
+    width: 100%;
+  }
 `;
 
 export default ModalPagination;
diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/tagsTable.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/tagsTable.jsx
@@ -12,7 +12,7 @@ const TagsTable = props => {
   return (
     <div>
       <TagHeading>{t('Tags')}</TagHeading>
-      <table>
+      <StyledTable>
         <tbody>
           {props.tags.map(tag => (
             <StyledTr key={tag.key}>
@@ -25,7 +25,7 @@ const TagsTable = props => {
             </StyledTr>
           ))}
         </tbody>
-      </table>
+      </StyledTable>
     </div>
   );
 };
@@ -57,4 +57,8 @@ const TagValue = styled(TagKey)`
   text-align: right;
 `;
 
+const StyledTable = styled('table')`
+  width: 100%;
+`;
+
 export default withRouter(TagsTable);