footer position

Author: Amir Sohel

src/App.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Home from'./Components/Views/Home'
 import Header from './Components/Header'
-import Footer from './Components/Footer'
 import './App.scss';
 import { BrowserRouter as Router } from "react-router-dom"
 import { Route, Switch } from "react-router"
@@ -18,7 +17,6 @@ function App() {
           {/* <Home /> */}
         </Switch>
       </Router>
-      <Footer/>
     </div>
   );
 }

src/App.scss

@@ -278,10 +278,7 @@ button {
 .css-y1c0xs, [data-css-y1c0xs] {
 	max-height: 190px;
 }
-.css-13azwyo .p-5 {
-	padding: 10px !important;
-	font-size: 13px; 
-}
+
 
 .mobile-theme {
     position: absolute;
@@ -314,11 +311,18 @@ button {
 
 
 @media (max-width:767px){
+	.search {width: 100%;}
+	.search-result p {
+		font-size: 13px;
+		padding: 10px !important;
+		margin: 0 !important;
+	}
 	.mob-font-size-13 {font-size: 13px;}
 	.search-wrapper {
 		height: 0;
 		transition: all 0.4s;
 		overflow: hidden;
+		margin-right: 0;
 	}
 	.search_icon{display: block;} 
 	.Search-result {width: 100%;}
@@ -333,3 +337,13 @@ button {
 }
 
 
+.app-wrapper {
+	position: relative;
+    min-height: calc(100vh - 170px);
+}
+
+footer {
+    position: absolute;
+	bottom: 0;
+	height: 30px;
+}

src/Components/Header.js

@@ -77,11 +77,11 @@ function Header() {
                   </a>
                   {searchUsers && (
                     <div className="Search-result">
-                      <ul class="search-result">
+                      <ul className="search-result">
                         <ScrollToBottom>
                           {searchUsers.length > 0
                             ? searchUsers
-                            : Loader.section_loading}
+                            : Loader.user_not_found}
                         </ScrollToBottom>
                       </ul>
                     </div>

src/Components/Layout.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 function Layout (props) {
-    return <div className="container">{props.children}</div>
+    return <div className="app-wrapper"><div className="container">{props.children}</div></div>
 }
 
 export default Layout

src/Components/Views/BasicInfo.js

@@ -85,8 +85,6 @@ function BasicInformation(props) {
                 <span>Forks</span>
               </div>
             </div>
-
-
           </div>
         </div>
       </div>

src/Components/Views/Home.js

@@ -6,6 +6,8 @@ import DataProvider from "../../Data-provider"
 import PieChart from "../Charts/PieChart";
 import BarChart from "../Charts/BarChart";
 import Loader from "../Extras/Loader";
+import Footer from '../Footer'
+
 
 
 class Home extends React.Component {
@@ -116,8 +118,9 @@ class Home extends React.Component {
 
 
       <div>
-        {this.state.basicLoaded && this.state.basicInfo ? 
+       
         <Layout>
+        {this.state.basicLoaded && this.state.basicInfo ? <div>
           {/* CONDITIONAL REDERING OF BASIC INFO */}
           {this.state.basicLoaded ? <BasicInformation basicInfo={this.state.basicInfo} aggregateData={this.state.aggregateData} /> : Loader.section_loading}
           {/* PINNED SECTION */}
@@ -190,7 +193,10 @@ class Home extends React.Component {
               </div>
             </div>
           </section>
-        </Layout> : Loader.user_not_found}
+      </div> : Loader.user_not_found}
+        <Footer/>
+        </Layout> 
+     
       </div>
     );
   }