fix(about): add scroll, adjust width on mobile (#719)

ubilabs · Oct 21, 2020 · 0915c56 · 0915c56
1 parent 794c133
commit 0915c56
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/src/scripts/components/layers/layer-info/layer-info.styl b/src/scripts/components/layers/layer-info/layer-info.styl
@@ -40,3 +40,7 @@
   ul
     padding: 0
     list-style: none
+
+@media screen and (max-width: 480px)
+  .layerInfo
+    width: 80%
diff --git a/src/scripts/components/main/about-project/about-project.styl b/src/scripts/components/main/about-project/about-project.styl
@@ -5,9 +5,17 @@
   flex-direction: column
   justify-content: center
   width: 50%
+  height: 100%
   color: $textDefault
   font-family: NotesEsa
 
+.content
+  overflow-y: scroll
+  margin: emCalc(10px) 0
+  height: 80%
+  color: $textDefault
+  font-family: Arial, Helvetica, sans-serif
+
   h1
     display: flex
     justify-content: space-between
@@ -16,3 +24,7 @@
   a
     color: $textColor
     text-decoration: none
+
+@media screen and (max-width: 480px)
+  .aboutProject
+    width: 80%
diff --git a/src/scripts/components/main/about-project/about-project.tsx b/src/scripts/components/main/about-project/about-project.tsx
@@ -9,23 +9,25 @@ const AboutProject: FunctionComponent = () => {
 
   return (
     <div className={styles.aboutProject}>
-      <ReactMarkdown
-        source={intl.formatMessage({id: 'projectDescription'})}
-        linkTarget="_blank"
-        allowedTypes={[
-          'heading',
-          'text',
-          'paragraph',
-          'break',
-          'strong',
-          'emphasis',
-          'image',
-          'imageReference',
-          'list',
-          'listItem',
-          'link'
-        ]}
-      />
+      <div className={styles.content}>
+        <ReactMarkdown
+          source={intl.formatMessage({id: 'projectDescription'})}
+          linkTarget="_blank"
+          allowedTypes={[
+            'heading',
+            'text',
+            'paragraph',
+            'break',
+            'strong',
+            'emphasis',
+            'image',
+            'imageReference',
+            'list',
+            'listItem',
+            'link'
+          ]}
+        />
+      </div>
     </div>
   );
 };

diff --git a/src/scripts/components/main/attributions/attributions.styl b/src/scripts/components/main/attributions/attributions.styl
@@ -23,3 +23,7 @@
   a
     color: $textColor
     text-decoration: none
+
+@media screen and (max-width: 480px)
+  .attributions
+    width: 80%