Merge pull request #80 from cloudcity/tetra/about-page-styling

updated about page styles
cloudcity · Nov 29, 2018 · 67841a9 · 67841a9
2 parents b9b34f1 + 82bc8cb
commit 67841a9
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/src/components/About/main.css b/src/components/About/main.css
@@ -2,9 +2,9 @@ div.about-container {
   position: absolute;
   z-index: 100000;
   background-color: white;
-  top: 0;
+  top: 60px;
   left: 0;
-  height: 100vh;
+  height: calc(100vh - 60px);
   width: 100vw;
   display: flex;
   justify-content: center;

diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -171,6 +171,7 @@ class App_ extends React.Component<AppProps, AppState> {
       focusPerson: subjectId => this.focusPerson(subjectId),
       goHome: () => this.props.goHome(),
       toggleAbout: () => this.props.toggleAboutPage(),
+      showAboutPage: this.props.showAboutPage,
       submitSearch: name => this.submitSearch(name),
       searchString: this.props.searchString,
     })

diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
@@ -16,6 +16,7 @@ type NavbarProps = {
   goHome: () => void,
   toggleAbout: () => void,
   submitSearch: string => void,
+  showAboutPage: boolean,
 }
 
 class Navbar extends React.Component<NavbarProps, NavbarState> {
@@ -31,9 +32,16 @@ class Navbar extends React.Component<NavbarProps, NavbarState> {
       goHome,
       submitSearch,
       toggleAbout,
+      showAboutPage,
     } = this.props
 
-    const about = React.createElement('a', { onClick: toggleAbout }, 'About')
+    const about = React.createElement(
+      'a',
+      showAboutPage
+        ? { className: 'shown', onClick: () => null }
+        : { onClick: toggleAbout },
+      'About',
+    )
     const logo = React.createElement(
       'div',
       { onClick: goHome },

diff --git a/src/components/Navbar/main.css b/src/components/Navbar/main.css
@@ -13,9 +13,16 @@ nav {
   color: white;
 }
 
-nav > * { flex: 1; }
-nav > div { display: flex; align-items: center; }
-nav > div h1 { cursor: pointer; }
+nav > * {
+  flex: 1;
+}
+nav > div {
+  display: flex;
+  align-items: center;
+}
+nav > div h1 {
+  cursor: pointer;
+}
 
 nav img {
   height: 40px;
@@ -35,5 +42,11 @@ nav a {
   cursor: pointer;
 }
 
-nav div.right { display: flex; justify-content: flex-end; }
+nav div.right {
+  display: flex;
+  justify-content: flex-end;
+}
 
+nav a.shown {
+  color: rgba(180, 200, 255, 0.35);
+}