fixes Profile mobile responsiveness (#818)

DataUSA · Mar 26, 2019 · bc81edd · bc81edd
1 parent 0a7ccd4
commit bc81edd
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 6 deletions.
diff --git a/app/profile/index.css b/app/profile/index.css
@@ -11,16 +11,24 @@
       font-weight: 400;
       letter-spacing: 0.1em;
       margin: 0 10px;
+      max-width: none;
       position: relative;
       text-align: center;
       text-transform: uppercase;
       transition: text-shadow 0.35s;
-      width: 100px;
+      @media (max-width: 768px) {
+        & .section-icon-title {
+          display: none;
+        }
+      }
       & img {
         display: block;
         height: 23px;
         margin: 0 auto 2px;
         width: 23px;
+        @media (max-width: 768px) {
+          margin-top: 12px;
+        }
       }
       &:hover {
         text-decoration: none;
@@ -132,6 +140,9 @@
     top: 0;
     transition: left 0.5s, opacity 0.5s;
     width: 50px;
+    @media (max-width: 768px) {
+      display: none;
+    }
     &.visible {
       left: 0;
       opacity: 1;

diff --git a/app/toCanon/Section.css b/app/toCanon/Section.css
@@ -178,6 +178,49 @@
       }
     }
   }
+  @media (max-width: 768px) {
+    & .section-title {
+      padding: 0;
+    }
+    & .section-body {
+      flex-wrap: wrap;
+      padding: 0;
+      & .section-content {
+        width: 100%;
+        & .section-description {
+          &:not(:first-child) {
+            margin-left: 50px;
+          }
+          font-family: "Palanquin", sans-serif;
+          font-size: 15px;
+          font-weight: 400;
+          line-height: 1.5;
+        }
+        & .section-visualization {
+          margin-left: 0;
+          text-align: center;
+          &:not(:first-child) {
+            margin-left: 50px;
+          }
+        }
+      }
+    }
+    & .topic {
+      flex: none;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 0 0 50px;
+      width: 100%;
+      & .topic-content {
+        max-width: none !important;
+        width: 100%;
+      }
+      & .topic-visualization {
+        margin-left: 0;
+        max-height: 400px;
+      }
+    }
+  }
   &.about {
     background-color: var(--dark);
     & .section-title a {
@@ -189,5 +232,13 @@
         color: #cfedff !important;
       }
     }
+    & .section-content {
+      @media (max-width: 768px) {
+        flex-direction: column-reverse;
+        & .section-visualizations {
+          margin: 0 auto 25px;
+        }
+      }
+    }
   }
 }
diff --git a/app/toCanon/SectionIcon.jsx b/app/toCanon/SectionIcon.jsx
@@ -5,9 +5,9 @@ export default class SectionIcon extends Component {
 
   render() {
     const {active, slug, title} = this.props;
-    return <AnchorLink to={ slug } className={ `SectionIcon ${active ? "active" : "" }` }>
+    return <AnchorLink to={ slug } className={ `SectionIcon ${slug} ${active ? "active" : "" }` }>
       <img src={ `/icons/sections/${slug}.svg` } />
-      <div dangerouslySetInnerHTML={{__html: title}}></div>
+      <div className="section-icon-title" dangerouslySetInnerHTML={{__html: title}}></div>
     </AnchorLink>;
   }
 

diff --git a/app/toCanon/Splash.css b/app/toCanon/Splash.css
@@ -128,7 +128,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    margin: 25px;
+    margin: 25px auto;
     max-width: 700px;
     width: 100%;
     & .Stat {
@@ -147,6 +147,11 @@
         line-height: 1.5;
         text-shadow: 0 2px 6px black;
         text-transform: uppercase;
+        @media (max-width: 600px) {
+          font-size: 10px;
+          font-weight: 600;
+          text-shadow: 0 2px 5px black;
+        }
       }
       & .stat-value {
         font-family: "Lato", sans-serif;
@@ -163,27 +168,43 @@
           font-size: 38px;
           font-weight: 300;
           text-shadow: 0 2px 12px black;
+          @media (max-width: 600px) {
+            font-size: 24px;
+            font-weight: 300;
+            text-shadow: 0 2px 12px black;
+          }
         }
       }
     }
   }
   & .profile-sections {
     display: flex;
+    justify-content: center;
+    margin: 0 auto;
     opacity: 1;
     position: relative;
     text-align: center;
     transition: opacity 0.25s;
+    width: 100%;
     & .SectionIcon {
       color: white;
-      display: inline-block;
+      flex: 1;
       font-family: "Palanquin", sans-serif;
       font-size: 10px;
       font-weight: 400;
       letter-spacing: 0.1em;
       margin: 0 10px;
+      max-width: 100px;
       text-transform: uppercase;
       transition: text-shadow 0.35s;
-      width: 100px;
+      @media (max-width: 512px) {
+        &.about {
+          display: none;
+        }
+        & .section-icon-title {
+          display: none;
+        }
+      }
       & img {
         display: block;
         height: 30px;