feat(mobile-stories): add mobile compatibility (#487)

* feat(mobile-stories): add mobile compatibility * refactor(mobile-stories): remove true from property * fix(mobile-stories): fix selector for right side component * refactor(mobile): change flex basis
ubilabs · Aug 19, 2020 · 3e12e69 · 3e12e69
1 parent 0bae587
commit 3e12e69
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 2 deletions.
diff --git a/src/scripts/components/main/button/button.styl b/src/scripts/components/main/button/button.styl
@@ -31,3 +31,8 @@
 
   svg
     fill: $textDefault
+
+@media screen and (max-width: 480px)
+  .hideLabel
+    span
+      display: none
diff --git a/src/scripts/components/main/button/button.tsx b/src/scripts/components/main/button/button.tsx
@@ -11,6 +11,7 @@ interface Props {
   link?: string;
   disabled?: boolean;
   className?: string;
+  hideLabelOnMobile?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
@@ -20,13 +21,14 @@ const Button: FunctionComponent<Props> = ({
   icon: Icon,
   disabled = false,
   className = '',
+  hideLabelOnMobile,
   onClick
 }) => {
   const classes = cx(
     styles.button,
     className,
     disabled && styles.disabled,
-    disabled && className
+    hideLabelOnMobile && styles.hideLabel
   );
 
   return link ? (

diff --git a/src/scripts/components/stories/header/header.styl b/src/scripts/components/stories/header/header.styl
@@ -24,6 +24,12 @@
   white-space: nowrap
   font-size: emCalc(18px)
 
+@media screen and (max-width: 480px)
+  .title
+    flex-basis: 400px
+    overflow: hidden
+    text-overflow: ellipsis
+
 .rightContent
   display: flex
   flex-grow: 1

diff --git a/src/scripts/components/stories/header/header.tsx b/src/scripts/components/stories/header/header.tsx
@@ -32,6 +32,7 @@ const Header: FunctionComponent<Props> = ({
         icon={ArrowBackIcon}
         label={backButtonId}
         link={backLink}
+        hideLabelOnMobile
       />
       {!isSplashScreen && <h1 className={styles.title}>{title}</h1>}
       <div className={styles.rightContent}>{children}</div>

diff --git a/src/scripts/components/stories/splash-screen/splash-screen.styl b/src/scripts/components/stories/splash-screen/splash-screen.styl
@@ -26,3 +26,8 @@
 
   p
     line-height: emCalc(22px)
+
+@media screen and (max-width: 480px)
+  .content
+    padding: emCalc(20px)
+    width: 80%
diff --git a/src/scripts/components/stories/splash-screen/splash-screen.tsx b/src/scripts/components/stories/splash-screen/splash-screen.tsx
@@ -20,7 +20,8 @@ const SplashScreen: FunctionComponent<Props> = ({storyId, slide}) => {
       className={styles.splashscreen}
       style={{
         background: `center / cover no-repeat url(${imageUrl}) rgba(0, 0, 0, 0.3)`,
-        width: '100%'
+        width: '100%',
+        height: '100%'
       }}>
       <div className={styles.content}>
         <ReactMarkdown

diff --git a/src/scripts/components/stories/story-content/story-content.styl b/src/scripts/components/stories/story-content/story-content.styl
@@ -34,3 +34,10 @@
 
   p
     margin: emCalc(10px) 0
+
+@media screen and (max-width: 480px)
+  .content
+    order: 2
+    overflow-y: unset
+    padding-top: 0
+    width: 100%
diff --git a/src/scripts/components/stories/story-media/story-media.styl b/src/scripts/components/stories/story-media/story-media.styl
@@ -110,3 +110,8 @@
   width: 100%
   height: 100%
   object-fit: contain
+
+@media screen and (max-width: 480px)
+  .storyMedia
+    order: 1
+    padding: 0
diff --git a/src/scripts/components/stories/story/story.styl b/src/scripts/components/stories/story/story.styl
@@ -16,8 +16,24 @@
     flex-grow: 1
     width: 50%
 
+.rightSideComponent
+  height: 100%
+
 .globeContainer
   position: relative
   display: flex
   flex-direction: column
   height: 100%
+
+@media screen and (max-width: 480px)
+  .main
+    display: flex
+    flex-direction: column
+    overflow-y: auto
+
+    > :last-child
+      height: 300px
+
+    > *
+      padding: 25px
+      width: inherit