Merge pull request #230 from mitmedialab/dsjen/about-links

Added about page links
mitmedialab · Apr 19, 2019 · 9ad49f7 · 9ad49f7
2 parents dceeaf6 + 76e1ab3
commit 9ad49f7
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 15 deletions.
diff --git a/client/app/components/About/About.js b/client/app/components/About/About.js
@@ -45,12 +45,23 @@ const About = (props) => {
 
             <p>{VERSION}</p>
 
+            <div className="row text-center">
+              <div className="col-lg-12">
+                <div className="about-navigation">
+                  <Button className="colored-button orange-background" onClick={() => document.getElementById('features').scrollIntoView()} text="Features" />
+                  <Button className="colored-button red-background" onClick={() => document.getElementById('faq').scrollIntoView()} text="FAQ" />
+                  <br className="hidden-lg hidden-md hidden-sm" />
+                  <Button className="colored-button green-background" onClick={() => document.getElementById('team').scrollIntoView()} text="Team" />
+                  <Button className="colored-button purple-background" onClick={() => document.getElementById('press').scrollIntoView()} text="Press" />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
-        <div className="row orange-background">
+        <div id="features" className="row colored-background orange-background">
           <div className="col-lg-12 about-section">
-            <h1>Features</h1>
+            <h1 >Features</h1>
             {['control', 'connect', 'see', 'perspective'].map(key =>
               (<div key={key}>
                 <h2>{COPY[key].title}</h2>
@@ -60,7 +71,7 @@ const About = (props) => {
           </div>
         </div>
 
-        <div className="row red-background">
+        <div id="faq" className="row colored-background red-background">
           <div className="col-lg-12 about-section">
             <h1>FAQ</h1>
 
@@ -102,9 +113,9 @@ const About = (props) => {
           </div>
         </div>
 
-        <div className="row green-background">
+        <div id="team" className="row colored-background green-background">
           <div className="col-lg-12 about-section">
-            <h1>Team</h1>
+            <h1 >Team</h1>
             <ul className="about-team">
               <li>Ethan Zuckerman, Director</li>
               <li>Rahul Bhargava, Project Manager</li>
@@ -116,7 +127,7 @@ const About = (props) => {
           </div>
         </div>
 
-        <div className="row purple-background">
+        <div id="press" className="row colored-background purple-background">
           <div className="col-lg-12 about-section">
             <h1>Press</h1>
             <h2>Check out some things that have been written on Gobo!</h2>

diff --git a/client/app/components/About/about.scss b/client/app/components/About/about.scss
@@ -1,5 +1,7 @@
 .about, .privacy {
 
+	$spacing-between-sections: 40px;
+
 	h1 {
 		text-align: center;
 		margin-bottom: 40px;
@@ -12,14 +14,29 @@
 	.about-section {
 		max-width:  $screen-sm-min;
 
-		$spacing-between-sections: 80px;
 		margin-bottom: $spacing-between-sections;
 		margin-top: $spacing-between-sections;
+		padding-left: $padding-large-horizontal * 3;
+		padding-right: $padding-large-horizontal * 3;
 
-		// center content
-		float: unset;
-		margin-left: auto;
-		margin-right: auto;
+		@media (min-width: $screen-sm-min) {
+			float: unset;
+			margin-left: auto;
+			margin-right: auto;
+
+			margin-bottom: $spacing-between-sections * 2;
+			margin-top: $spacing-between-sections * 2;
+
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+
+	.about-navigation {
+		margin-top: $spacing-between-sections / 2;
+		@media (min-width: $screen-sm-min) {
+			margin-top: $spacing-between-sections;
+		}
 	}
 }
 
@@ -38,6 +55,15 @@
 		max-width: 300px;
 	}
 
+	.colored-button {
+		$size: 120px;
+		border-radius: 0;
+		padding: 0;
+		width: $size;
+		height: $size;
+		font-size: 20px
+	}
+
 	.colored-background {
 		color: $inverse-text-color;
 
@@ -56,22 +82,18 @@
 	}
 
 	.orange-background {
-		@extend .colored-background;
 		background-color: $orange;
 	}
 
 	.red-background {
-		@extend .colored-background;
 		background-color: $red;
 	}
 
 	.green-background {
-		@extend .colored-background;
 		background-color: $green;
 	}
 
 	.purple-background {
-		@extend .colored-background;
 		background-color: $purple;
 	}
 }