Merge pull request #255 from Codebrahma/site-fixes

rishichawda · web-flow · commit 51e382d78539 · 2018-12-21T19:45:48.000+05:30
Documentation page updates.
diff --git a/doc/src/components/WithComponentsBar/styles.scss b/doc/src/components/WithComponentsBar/styles.scss
@@ -2,7 +2,7 @@
 .with-component-bar {
     .component-sidebar {
         background-color: white;
-        top: 100px;
+        top: 11vh;
         overflow: auto;
         width: 200px;
         padding-top: 25px;
@@ -29,9 +29,6 @@
         }
         &::-webkit-scrollbar {
             width: 0.4em;
-            &:hover {
-                width: 1em;
-            }
         }
         &::-webkit-scrollbar-thumb {
             background-color: #2b87d7c7;
diff --git a/doc/src/components/WithComponentsBar/theme.module.scss b/doc/src/components/WithComponentsBar/theme.module.scss
@@ -1,7 +1,7 @@
 :local(.drawer) {
   padding-left: 0 !important;
   padding-right: 0 !important;
-  height: calc(100% - 100px) !important;
+  height: calc(100% - 11vh) !important;
   @media only screen and (min-width: 992px) {
       left: 0 !important;
   }
diff --git a/doc/src/components/common/componentData/AutoComplete/index.js b/doc/src/components/common/componentData/AutoComplete/index.js
@@ -137,5 +137,9 @@ export const componentData = {
         background-color: rgba($color: chartreuse, $alpha: 0.2) !important;
       }
     }
+
+    :local(.item-hover) {
+      background-color: rgba($color: chartreuse, $alpha: 0.2) !important;
+    }
   `,
 };
diff --git a/doc/src/components/common/componentData/AutoComplete/theme.scss b/doc/src/components/common/componentData/AutoComplete/theme.scss
@@ -10,4 +10,8 @@
   &:hover {
     background-color: rgba($color: chartreuse, $alpha: 0.2) !important;
   }
+}
+
+:local(.item-hover) {
+  background-color: rgba($color: chartreuse, $alpha: 0.2) !important;
 }
diff --git a/doc/src/components/common/componentData/Button/index.js b/doc/src/components/common/componentData/Button/index.js
@@ -122,7 +122,7 @@ export const componentData = {
         this.style = {
           buttonContainer: {
             display: "grid",
-            gridTemplateColumns: "auto auto auto",
+            gridTemplateColumns: "repeat(auto-fill, 150px)",
             gridGap: 20,
             alignItems: "center"
           }
@@ -138,7 +138,7 @@ export const componentData = {
           <div>
             { /* Preview Block-1 */ }
             <PreviewBlock header="Styled Buttons">
-              <PreviewElements>
+              <PreviewElements style={this.style.buttonContainer}>
 
               {/* Styled Buttons with 'type' prop */}
                 <Button>Primary</Button>
@@ -149,7 +149,7 @@ export const componentData = {
             </PreviewBlock>
             { /* Preview Block-2 */ }
             <PreviewBlock header="Bordered Buttons">
-              <PreviewElements>
+              <PreviewElements style={this.style.buttonContainer}>
 
               {/* Bordered or Outlined Buttons with 'bordered' prop */}
                 <Button bordered type="info">info</Button>
@@ -160,7 +160,7 @@ export const componentData = {
             </PreviewBlock>
             { /* Preview Block-3 */ }
             <PreviewBlock header="Borderless Buttons">
-              <PreviewElements>
+              <PreviewElements style={this.style.buttonContainer}>
 
               {/* Borderless buttons with 'borderless' prop */}
                 <Button type="primary" borderless>Primary</Button>
@@ -171,7 +171,7 @@ export const componentData = {
             </PreviewBlock>
             { /* Preview Block-4 */ }
             <PreviewBlock header="Flat Buttons">
-              <PreviewElements>
+              <PreviewElements style={this.style.buttonContainer}>
 
               {/* No box shadow with 'flat' prop */}
                 <Button type="success" flat>Success</Button>
@@ -182,7 +182,7 @@ export const componentData = {
             </PreviewBlock>
             { /* Preview Block-5 */}
             <PreviewBlock header="Buttons with icons and text">
-              <PreviewElements>
+              <PreviewElements style={this.style.buttonContainer}>
 
               {/* Icon and text buttons with 'icon' prop */}
                 <Button type="warning" icon="icon-left">
@@ -199,7 +199,7 @@ export const componentData = {
             </PreviewBlock>
             { /* Preview Block-6 */ }
             <PreviewBlock header="Sizable Buttons">
-              <PreviewElements>
+              <PreviewElements style={this.style.buttonContainer}>
 
               {/* Control button sizes with 'size' prop */}
                 <Button size="small">
diff --git a/doc/src/components/common/componentData/MultiSelect/index.js b/doc/src/components/common/componentData/MultiSelect/index.js
@@ -144,9 +144,13 @@ export const componentData = {
     
     :local(.option) {
       &:hover {
-        background-color: rgba($color: #0b409c, $alpha: 0.4) !important;
+        background-color: rgba($color: #73ff00, $alpha: 0.4) !important;
       }
     }
+
+    :local(.item-hover) {
+      background: rgba($color: #73ff00, $alpha: 0.4) !important;
+    }
     
     :local(.selected) {
       div {
diff --git a/doc/src/components/common/componentData/MultiSelect/theme.scss b/doc/src/components/common/componentData/MultiSelect/theme.scss
@@ -12,6 +12,10 @@
   }
 }
 
+:local(.item-hover) {
+  background: rgba($color: #73ff00, $alpha: 0.4) !important;
+}
+
 :local(.selected) {
   div {
     background-color: #f0ece2;
diff --git a/doc/src/components/common/componentData/Select/index.js b/doc/src/components/common/componentData/Select/index.js
@@ -151,9 +151,13 @@ componentUsageTheme: `
   
   :local(.option) {
     &:hover {
-      background-color: rgba($color: #0b409c, $alpha: 0.4) !important;
+      background-color: rgba($color: #73ff00, $alpha: 0.4) !important;
     }
   }
+
+  :local(.option-hover) {
+    background-color: rgba($color: #73ff00, $alpha: 0.4) !important;
+  }
   
   :local(.selected) {
     input {
diff --git a/doc/src/components/common/componentData/Select/theme.scss b/doc/src/components/common/componentData/Select/theme.scss
@@ -16,4 +16,8 @@
   input {
     color: #73ff00;
   }
+}
+
+:local(.option-hover) {
+  background-color: rgba($color: #73ff00, $alpha: 0.4) !important;
 }
diff --git a/doc/src/components/header.js b/doc/src/components/header.js
@@ -8,10 +8,29 @@ import liteLogo from '../images/match.svg';
 import theme from './theme.module.scss';
 
 const Header = ({ location }) => (
-  <Navbar theme={theme} className={`navbar${location.pathname !== '/' ? ' navbar-extended' : ''}`} position="fixed" flat title={<Link to="/">React Lite UI</Link>} leftIcon={<Link to="/"><img src={liteLogo} alt="navbar-left-logo" /></Link>}>
-    <Link to="/documentation" activeClassName="active-link">Documentation</Link>
-    <Link to="/usage" activeClassName="active-link">Usage</Link>
-    <Link to="/playground" activeClassName="active-link" >Playground</Link>
+  <Navbar
+    theme={theme}
+    className={`navbar${location.pathname !== '/' ? ' navbar-extended' : ' navbar-animated'}`}
+    position="fixed"
+    flat
+    title={<Link to="/">React Lite UI</Link>}
+    leftIcon={<Link to="/"><img src={liteLogo} alt="navbar-left-logo" /></Link>}
+  >
+    <Link
+      to="/documentation"
+      activeClassName="active-link"
+    >Documentation
+    </Link>
+    <Link
+      to="/usage"
+      activeClassName="active-link"
+    >Usage
+    </Link>
+    <Link
+      to="/playground"
+      activeClassName="active-link"
+    >Playground
+    </Link>
     <a href="https://www.github.com/Codebrahma/react-lite-ui/" >
       <svg xmlns="http://www.w3.org/2000/svg" width="69" height="23" viewBox="0 0 69 23">
         <g fill="#FFF" fillRule="evenodd">
diff --git a/doc/src/components/styles.scss b/doc/src/components/styles.scss
@@ -1,5 +1,5 @@
 .navbar {
-  height: 4rem;
+  height: 11vh !important;
   z-index: 3;
 
   a {
@@ -8,6 +8,12 @@
   }
 }
 
+.navbar-animated {
+  transform: translateY(-100%);
+  transition: all 0.5s ease-in-out;
+  will-change: transform;
+}
+
 .navbar-extended {
   div[class*=innerWrapper] {
     max-width: 100vw !important;
diff --git a/doc/src/components/usage/Usage.js b/doc/src/components/usage/Usage.js
@@ -21,8 +21,8 @@ const PreviewBlock = ({ children, header }) => (
   </div>
 );
 
-const PreviewElements = ({ children }) => (
-  <div className="preview-elements">
+const PreviewElements = ({ children, style }) => (
+  <div className="preview-elements" style={style} >
     {children}
   </div>
 );
diff --git a/doc/src/pages/index.js b/doc/src/pages/index.js
@@ -9,9 +9,6 @@ class IndexPage extends Component {
   constructor(props) {
     super(props);
     this.heroBottom = null;
-    this.state = {
-      prevPageOffset: 0,
-    };
   }
   componentDidMount() {
     window.addEventListener('scroll', this.registerScroll);
@@ -24,17 +21,13 @@ class IndexPage extends Component {
   }
 
   setNavbarState = (pageYOffset, innerHeight) => {
-    const { prevPageOffset } = this.state;
-    const { opacity } = document.getElementsByClassName('navbar')[0].style;
-    if (this.isInAnimationArea(pageYOffset, innerHeight) && (prevPageOffset > pageYOffset)) {
-      console.log('scrolling up', opacity);
-    } else if (this.isInAnimationArea(pageYOffset, innerHeight) && (prevPageOffset < pageYOffset)) {
-      const calculateOpacity = (0.2 * innerHeight) / (pageYOffset - (0.5 * innerHeight)) / 10;
-      console.log(calculateOpacity);
+    if (pageYOffset > 0.7 * innerHeight) {
+      document.getElementsByClassName('navbar')[0].style.transform = 'translateY(0)';
+      document.getElementsByClassName('navbar')[0].style.opacity = 1;
+    } else {
+      document.getElementsByClassName('navbar')[0].style.transform = 'translateY(-100%)';
+      document.getElementsByClassName('navbar')[0].style.opacity = 0;
     }
-    this.setState({
-      prevPageOffset: pageYOffset,
-    });
   }
 
   // eslint-disable-next-line max-len
diff --git a/doc/src/pages/index.scss b/doc/src/pages/index.scss
@@ -2,6 +2,7 @@
 
 body {
     font-family: 'Roboto';
+    overflow-x: hidden;
 }
 
 .hero-container {
diff --git a/doc/src/templates/landing-main/contrib-section/footer.js b/doc/src/templates/landing-main/contrib-section/footer.js
@@ -1,24 +1,15 @@
 import React from 'react';
-import TextInput from '../../../../../lib/textInput';
+import Button from '../../../../../lib/button';
+import theme from './footer.module.scss';
 
 const FooterSection = () => (
   <div className="row">
     <div className="row">
-      <div className="col">
-        <p>Having Something in mind that we can build ?</p>
-        <p>Submit your contact email.</p>
-        <p>We will contact you back !</p>
-      </div>
-      <div className="divider" />
-      <div className="col">
-        <div className="row">
-          <TextInput placeholder="Name" />
-        </div>
-        <div className="row">
-          <TextInput placeholder="E-mail address" />
-        </div>
-      </div>
+      {'Want us to build something for you? '}
+      {'Great! We would love to!'}
+      <Button theme={theme} bordered href="https://codebrahma.com/contact/" >Let us know here!</Button>
     </div>
+    <div className="row bottom-bar">Made with <span className="heart">❤</span> by<a target="blank" href="https://www.codebrahma.com"><span>Codebrahma</span></a></div>
   </div>
 );
 
diff --git a/doc/src/templates/landing-main/contrib-section/footer.module.scss b/doc/src/templates/landing-main/contrib-section/footer.module.scss
@@ -0,0 +1,9 @@
+.button {
+    background: transparent;
+    color: white;
+    border-color: white;
+    &:hover {
+        background: white;
+        color: blue;
+    }
+}
diff --git a/doc/src/templates/landing-main/contrib-section/index.scss b/doc/src/templates/landing-main/contrib-section/index.scss
@@ -1,25 +1,60 @@
+@media only screen and (max-width: 790px) {
+    .row {
+        flex-flow: column !important;
+    }
 
-@media only screen and (max-width: 630px) {
-  .row {
-      flex-flow: column !important;
-  }
+    .contrib-section > .row > .col {
+      margin-left: 15% !important;
+      margin-right: 15% !important;
+    }
 }
 
 @media only screen and (max-width: 530px) {
-  .row {
-      padding: 2rem !important;
-  }
+    .row {
+        padding: 2rem !important;
+    }
 }
 
-
 .col {
-  margin: 1rem !important;
-  flex-flow: column;
+    margin: 1rem !important;
+    flex-flow: column;
 }
 
 .card-content {
-  img {
-      max-width: 100% !important;
-      height: auto;
-  }
-}
+    img {
+        max-width: 100% !important;
+        height: auto;
+    }
+}
+
+div.contrib-section>div:nth-child(3) {
+    flex-direction: column;
+    div {
+        display: flex;
+        flex-direction: column;
+        color: rgb(228, 228, 228);
+        font-weight: bold;
+        align-items: center;
+        width: 100%;
+        background-color: transparent !important;
+        &>* {
+            margin-top: 2%;
+        }
+    }
+    .bottom-bar {
+        display: flex;
+        flex-direction: row;
+        background-color: transparent;
+        justify-content: center;
+        width: 100%;
+        color: rgb(228, 228, 228);
+        & > * {
+          margin: 0 0.2em;
+          color: rgb(228, 228, 228);
+        }
+
+        & > span {
+          color: rgb(196, 50, 5);
+        }
+    }
+}
diff --git a/doc/src/templates/landing-main/index.scss b/doc/src/templates/landing-main/index.scss
@@ -116,7 +116,7 @@
                 padding: 0;
                 margin: 1rem 3rem;
 
-                @media only screen and (min-width: 630px) {
+                @media only screen and (min-width: 790px) {
                     &:hover>div {
                         margin-top: -8rem;
                     }
diff --git a/lib/autocomplete/index.js b/lib/autocomplete/index.js
diff --git a/lib/multiselect/index.js b/lib/multiselect/index.js
diff --git a/lib/select/index.js b/lib/select/index.js

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`:local(.drawer) {`
`2`	`2`	`padding-left: 0 !important;`
`3`	`3`	`padding-right: 0 !important;`
`4`		`- height: calc(100% - 100px) !important;`
	`4`	`+ height: calc(100% - 11vh) !important;`
`5`	`5`	`@media only screen and (min-width: 992px) {`
`6`	`6`	`left: 0 !important;`
`7`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -137,5 +137,9 @@ export const componentData = {`
`137`	`137`	`background-color: rgba($color: chartreuse, $alpha: 0.2) !important;`
`138`	`138`	`}`
`139`	`139`	`}`
	`140`	`+`
	`141`	`+ :local(.item-hover) {`
	`142`	`+ background-color: rgba($color: chartreuse, $alpha: 0.2) !important;`
	`143`	`+ }`
`140`	`144`	`,
`141`	`145`	`};`
Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,8 @@`
`10`	`10`	`&:hover {`
`11`	`11`	`background-color: rgba($color: chartreuse, $alpha: 0.2) !important;`
`12`	`12`	`}`
	`13`	`+}`
	`14`	`+`
	`15`	`+:local(.item-hover) {`
	`16`	`+ background-color: rgba($color: chartreuse, $alpha: 0.2) !important;`
`13`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -144,9 +144,13 @@ export const componentData = {`
`144`	`144`
`145`	`145`	`:local(.option) {`
`146`	`146`	`&:hover {`
`147`		`- background-color: rgba($color: #0b409c, $alpha: 0.4) !important;`
	`147`	`+ background-color: rgba($color: #73ff00, $alpha: 0.4) !important;`
`148`	`148`	`}`
`149`	`149`	`}`
	`150`	`+`
	`151`	`+ :local(.item-hover) {`
	`152`	`+ background: rgba($color: #73ff00, $alpha: 0.4) !important;`
	`153`	`+ }`
`150`	`154`
`151`	`155`	`:local(.selected) {`
`152`	`156`	`div {`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,10 @@`
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`
	`15`	`+:local(.item-hover) {`
	`16`	`+ background: rgba($color: #73ff00, $alpha: 0.4) !important;`
	`17`	`+}`
	`18`	`+`
`15`	`19`	`:local(.selected) {`
`16`	`20`	`div {`
`17`	`21`	`background-color: #f0ece2;`
Original file line number	Diff line number	Diff line change
@@ -151,9 +151,13 @@ componentUsageTheme: `
`151`	`151`
`152`	`152`	`:local(.option) {`
`153`	`153`	`&:hover {`
`154`		`- background-color: rgba($color: #0b409c, $alpha: 0.4) !important;`
	`154`	`+ background-color: rgba($color: #73ff00, $alpha: 0.4) !important;`
`155`	`155`	`}`
`156`	`156`	`}`
	`157`	`+`
	`158`	`+ :local(.option-hover) {`
	`159`	`+ background-color: rgba($color: #73ff00, $alpha: 0.4) !important;`
	`160`	`+ }`
`157`	`161`
`158`	`162`	`:local(.selected) {`
`159`	`163`	`input {`
Original file line number	Diff line number	Diff line change
`@@ -16,4 +16,8 @@`
`16`	`16`	`input {`
`17`	`17`	`color: #73ff00;`
`18`	`18`	`}`
	`19`	`+}`
	`20`	`+`
	`21`	`+:local(.option-hover) {`
	`22`	`+ background-color: rgba($color: #73ff00, $alpha: 0.4) !important;`
`19`	`23`	`}`