streamline navigation

bogas04 · Apr 1, 2017 · 276eaf3 · 276eaf3
1 parent ae897fe
commit 276eaf3
Show file tree

Hide file tree

Showing 16 changed files with 123 additions and 35 deletions.
diff --git a/assets/js/main.js b/assets/js/main.js
diff --git a/assets/js/main.js.map b/assets/js/main.js.map
diff --git a/assets/js/vendor.js b/assets/js/vendor.js
diff --git a/assets/js/vendor.js.map b/assets/js/vendor.js.map
diff --git a/index.html b/index.html
@@ -9,9 +9,8 @@
 
     <!-- Force HTTPS -->
     <script>
-      if (location.protocol != 'https:') {
+      if (location.protocol != 'https:' && location.href.indexOf('http://localhost') < 0)
         location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
-      }
     </script>
 
     <link rel="icon" type="image/png" href="assets/img/logo.png" />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sikhjs",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Multiplatform application for Gurbani",
   "private": true,
   "main": "index.js",

diff --git a/src/components/Card/index.js b/src/components/Card/index.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 export const Card = styled.div`
   margin: 10px;
   padding: 5px;
+  background-color: #fefefe;
   border-radius: 5px;
   box-shadow: 0px 0px 5px 0px grey;
   &:hover {
@@ -15,13 +16,15 @@ export const Card = styled.div`
 export const CardTitle = styled.div`
   font-size: 16px;
   padding: 2px 5px;
+  color: #080808;
   margin: 5px;
   font-weight: bold;
 `;
 
 export const CardText = ({ enabled = true, ...props }) => {
   const Text = styled.div`
     margin: 5px;
+    color: #232323;
     paddgin: 5px;
   `;
 

diff --git a/src/components/Chip/index.js b/src/components/Chip/index.js
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 export default styled.span`
   border-radius: 10px;
+  font-size: 16px;
   margin: 5px;
   padding: 5px;
   background-color: darkgrey;

diff --git a/src/components/FloatingIcon/index.js b/src/components/FloatingIcon/index.js
@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom';
+import styled, { keyframes } from 'styled-components';
+
+const BubbleOut = keyframes`
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(.5);
+  }
+  75% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+
+export default styled(Link)`
+  border-radius: 50%;
+  position: fixed;
+  right: 10px;
+  background-color: #ce177c;
+  bottom: 75px;
+  overflow: hidden;
+  height: 75px;
+  width: 75px;
+  font-size: 2rem;
+  z-index: 2;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  transition: all 0.25s;
+  text-decoration: none;
+  color: transparent;
+  text-shadow: 0 0 0 white;
+  &:active {
+    transform: translate(1px, 1px);
+  }
+  animation: ${BubbleOut} linear .25s;
+`;
diff --git a/src/components/Nav/index.js b/src/components/Nav/index.js
@@ -3,17 +3,17 @@ import styled from 'styled-components';
 export default styled.nav`
   position: fixed;
   z-index: 2;
-  width: 100vw;
+  height: 35px;
   bottom: 0;
   left: 0;
+  right: 0;
   display: flex;
-  padding: 5px 10px;
+  padding: 5px 10vw;
   align-items: center;
   justify-content: space-between;
   background-color: teal;
   color: white;
   overflow-x: auto;
-  box-shadow: -30px 0px 20px -7px black inset;
 `;
 
 export const NavItem = styled.div`

diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js
@@ -11,11 +11,12 @@ export default function Switch ({ children, ...props }) {
     transform: translate(-13px, 17px);
     display: inline-block;
     &::after {
-      content: "●";
+      content: ".";
+      margin: -160px -10px;
+      font-size: 190px;
       color: grey;
       transform: translate(-13px, -14px);
       display: block;
-      font-size: 24px;
     }
   `;
 

diff --git a/src/pages/About/index.js b/src/pages/About/index.js
diff --git a/src/pages/Greeting/index.js b/src/pages/Greeting/index.js
@@ -2,38 +2,75 @@ import React from 'react';
 
 import styled, { keyframes } from 'styled-components';
 
+import { Link } from 'react-router-dom';
+
 import GurbaniFont from '../../components/GurbaniFont';
 
 const SplashIn = keyframes`
-  from { transform: scale(3); opacity: 0; }
+  from { transform: scale(3) perspective(500px); opacity: 0; }
   to { transform: scale(1); opacity: 1; }
 `;
 
 const Wrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
   height: 100% ;
+  padding-bottom: 25vh;
+  animation: ${SplashIn} 0.25s ease-in;
 `;
 
 const Heading = styled.h1`
-  animation: ${SplashIn} 0.25s ease-in;
-  font-size: 10vw !important;
+  font-size: 5vw !important;
   font-weight: 100;
   text-align: center;
   line-height: 1.4em !important;
 `;
 
+const HomeWrapper = styled.div`
+  display: flex;
+  width: 98%;
+  align-items: center;
+  justify-content: center;
+`;
+
+const HomeLink = styled(Link)`
+  display: block;
+  padding: 50px;
+  flex: 1;
+  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
+  text-align: center;
+  border: 1px solid black;
+  transition: all 0.25s;
+  text-transform: uppercase;
+  text-decoration: none;
+  overflow: hidden;
+  white-space: nowrap;
+  color: black;
+  &:hover {
+    background: linear-gradient(141deg, #4fe8dd 0%, #4ff8fb 51%, #5cf5ec 75%);
+  }
+`;
+
 export default () => {
   return (
     <Wrapper>
-      <GurbaniFont>
-        <Heading>
+      <Heading>
+        <GurbaniFont>
           vwihgurU jI kw Kwlsw
           <br />
           vwihgurU jI kI Pqih
-        </Heading>
-      </GurbaniFont>
+        </GurbaniFont>
+      </Heading>
+      <HomeWrapper>
+        <HomeLink to="/hukamnama">Hukamnama</HomeLink>
+        <HomeLink to="/sggs">Sehaj Paath</HomeLink>
+      </HomeWrapper>
+      <HomeWrapper>
+        <HomeLink to="/nitnem">Nitnem</HomeLink>
+        <HomeLink to="/bookmarks">Bookmarks</HomeLink>
+      </HomeWrapper>
     </Wrapper>
   );
 };
diff --git a/src/pages/Main/index.js b/src/pages/Main/index.js
@@ -10,10 +10,12 @@ import Nav, { NavItem } from '../../components/Nav';
 
 import Slider from '../../components/Slider';
 
+import FloatingIcon from '../../components/FloatingIcon';
+
 import { getSettings, setSettings } from '../../constants';
 
 import {
-  Author, Raag, Raags, Authors, Bookmarks, Hukamnama, About, Baani, SGGS, Nitnem, Calendar, Shabad, Shabads,
+  Author, Raag, Raags, Authors, Bookmarks, Hukamnama, Baani, SGGS, Nitnem, Calendar, Shabad, Shabads,
 } from '../';
 
 import Greeting from '../Greeting';
@@ -43,9 +45,8 @@ export default class Main extends React.Component {
 
   render () {
     const Content = () => <div>
-      <Route path="/" component={Greeting} exact />
       <div id="baaniWrapper">
-        <Route path="/about" component={About} />
+        <Route path="/" component={Greeting} exact />
         <Route path="/sggs/:ang?" component={SGGS} />
         <Route path="/calendar" component={Calendar} />
         <Route path="/shabads/:q([a-z]+)?" exact component={Shabads} />
@@ -91,11 +92,6 @@ export default class Main extends React.Component {
 
     const Header = () => <Nav>
       <NavItem><StyledLink to={`/`} >Home</StyledLink></NavItem>
-      <NavItem><StyledLink to={`/hukamnama`} >Hukamnama</StyledLink></NavItem>
-      <NavItem><StyledLink to={`/sggs`} >Sri Guru Granth Sahib</StyledLink></NavItem>
-      <NavItem><StyledLink to={`/nitnem`} >Nitnem</StyledLink></NavItem>
-      <NavItem><StyledLink to={`/shabads`} >Search</StyledLink></NavItem>
-      <NavItem><StyledLink to={`/bookmarks`} >Bookmarks</StyledLink></NavItem>
       <NavItem><StyledLink to={`/calendar`} >Calendar</StyledLink></NavItem>
       <NavItem><StyledLink to={`/authors`} >Authors</StyledLink></NavItem>
       <NavItem><StyledLink to={`/raags`} >Raags</StyledLink></NavItem>
@@ -108,7 +104,15 @@ export default class Main extends React.Component {
           Report Issue
         </StyledAnchor>
       </NavItem>
-      <NavItem><StyledLink to={`/about`}>About</StyledLink></NavItem>
+      <NavItem>
+        <StyledAnchor
+          href="https://github.com/bogas04/SikhJS"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          About
+        </StyledAnchor>
+      </NavItem>
       <NavItem>
         <Slider
           min={0.25}
@@ -130,6 +134,9 @@ export default class Main extends React.Component {
         <div style={styles.wrapper}>
           <Header />
           <Content />
+          <Route path="/shabads" exact>{
+            ({ match }) => !match && <FloatingIcon to="/shabads">🔍 </FloatingIcon>
+          }</Route>
         </div>
       </Router>
     );

diff --git a/src/pages/Shabads/index.js b/src/pages/Shabads/index.js
@@ -97,6 +97,10 @@ export default class Shabads extends Component {
     this.setState({ source });
   }
 
+  shouldComponentUpdate (props, state) {
+    return this.state.q !== state.q;
+  }
+
   render () {
     const { type, source, q } = this.state;
 

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,6 +1,5 @@
 export { default as Greeting } from './Greeting';
 export { default as Main } from './Main';
-export { default as About } from './About';
 export { default as Baani } from './Baani';
 export { default as SGGS } from './SGGS';
 export { default as Nitnem } from './Nitnem';