Fixed the footer placement

SwarnenduDasKW · Aug 29, 2020 · 982d1e2 · 982d1e2
1 parent c7d669e
commit 982d1e2
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -52,31 +52,34 @@ Deploy the application to firebase
 The url will be created.
 [Country Capital Flag - C3f](https://country-capital-flag.web.app/)
 
+## Git commands
+
+git init
+git add .
+git commit -m "first commit"
+git remote add origin https://github.com/SwarnenduDasKW/Country-Capital-Flag.git
+git push -u origin master
+
 ## To do items
 
-1. The quiz has hardcoded countries. Need to work with random data - Done
-2. Show the flag of the country in the quiz page - Done
-3. Implement scoring system - Done
-4. The footer doesn't stay at the bottom when the country list becomes smaller (basically when you search for a country)
-   The code to keep footer at the bottom is done for the quiz page but need a generic solution.
-5. Don't like the white background - Done
 6. The Navbar disappears on scrolling - It's not hapenning now.
-7. Upon loading of the quiz page if user clicks of previous button the application crashes. - Done.
-   Disabled the previous button on the 1st question and the next button on the last question
-8. Remember the previous choise so that user can see the chosen answers. - Done
-9. Remove the "Check Answer" and Score. Replace that by Submit button. A report will popup showing user's selection and correct answer and score.
-10. Code cleanup and organize the components properly
-11. When the countries are loading show "Loading..." not "No data found"
-12. Implement 3 difficulty levels for the quiz. Easy - Medium - Hard
+7. Remove the "Check Answer" and Score. Replace that by Submit button. A report will popup showing user's selection and correct answer and score.
+8. When the countries are loading show "Loading..." not "No data found"
+9. Implement 3 difficulty levels for the quiz. Easy - Medium - Hard
 
-Defects
+## Defects
 
 1. Faulty scoring system.
 2. In the country capital quiz duplicate answer is shown. This is because Country Niue and Jamica have the same capital name Kingston.
 
-Git commands
-git init
-git add .
-git commit -m "first commit"
-git remote add origin https://github.com/SwarnenduDasKW/Country-Capital-Flag.git
-git push -u origin master
+## Done
+
+1. Done - The quiz has hardcoded countries. Need to work with random data.
+2. Done - Show the flag of the country in the quiz page.
+3. Done - Implement scoring system.
+4. Done - The footer doesn't stay at the bottom when the country list becomes smaller (basically when you search for a country). The code to keep footer at the bottom is done for the quiz page but need a generic solution.
+5. Done - Don't like the white background.
+6. Done - Upon loading of the quiz page if user clicks of previous button the application crashes.
+   Disabled the previous button on the 1st question and the next button on the last question
+7. Done - Remember the previous choise so that user can see the chosen answers.
+8. Done - Code cleanup and organize the components properly.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon1.ico b/public/favicon1.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="../src/images/c3f_logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Country Capital Flag</title>
+    <title>C3F - Country Capital Currency Flag</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/App.js b/src/components/App.js
@@ -22,20 +22,22 @@ function App() {
   ]);
 
   return (
-    <Router>
-      <div className="App">
-        <CountryContext.Provider value={countrydataProvider}>
-          <Navbar />
-          <Switch>
-            <Route path="/" exact component={Countries} />
-            <AnswerContext.Provider value={answerProvider}>
-              <Route path="/quiz" exact component={QuizMaster} />
-            </AnswerContext.Provider>
-          </Switch>
-        </CountryContext.Provider>
-        <Footer />
+    <div className="App">
+      <div className="app_container">
+        <Router>
+          <CountryContext.Provider value={countrydataProvider}>
+            <Navbar />
+            <Switch>
+              <Route path="/" exact component={Countries} />
+              <AnswerContext.Provider value={answerProvider}>
+                <Route path="/quiz" exact component={QuizMaster} />
+              </AnswerContext.Provider>
+            </Switch>
+          </CountryContext.Provider>
+        </Router>
       </div>
-    </Router>
+      <Footer />
+    </div>
   );
 }
 

diff --git a/src/images/c3f_logo.ico b/src/images/c3f_logo.ico
diff --git a/src/images/c3f_logo.png b/src/images/c3f_logo.png
diff --git a/src/stylesheets/App.css b/src/stylesheets/App.css
@@ -1,3 +1,7 @@
 * {
   margin: 0;
 }
+.app_container {
+  min-height: calc(100vh - 40px);
+  background-color: rgb(56, 69, 82);
+}
diff --git a/src/stylesheets/Countries.css b/src/stylesheets/Countries.css
@@ -1,12 +1,6 @@
 .countries {
   display: flex;
-  /* flex-wrap: wrap; */
-  /* margin-top: 80px; */
-  /* margin-left: 10px; */
   padding-left: 5px;
-  background-color: rgb(32, 30, 30);
-  /* margin-bottom: 20px; */
-
   /* background-image: linear-gradient(
     180deg,
     transparent,

diff --git a/src/stylesheets/Footer.css b/src/stylesheets/Footer.css
@@ -6,7 +6,7 @@
   background-color: rgb(0, 8, 59);
   /* z-index: 99; */
   height: 40px;
-  position: sticky;
+  /* position: sticky; */
   bottom: 0;
   left: 0;
   right: 0;

diff --git a/src/stylesheets/QuizMaster.css b/src/stylesheets/QuizMaster.css
@@ -1,19 +1,13 @@
 .quizmaster {
-  margin-top: 60px;
   display: flex;
-  /* flex-direction: row; */
   justify-content: center;
-  /* border: 2px solid red; */
-  min-height: calc(100vh - 40px - 60px);
-  background-color: rgb(56, 69, 82);
 }
 
 .quizmaster__questions {
   width: 900px;
   display: flex;
   justify-content: space-between;
-  margin-top: 20px;
-  /* border: 2px solid green; */
+  margin-top: 60px;
 }
 
 .quizmaster__questions > Button {

diff --git a/src/stylesheets/index.css b/src/stylesheets/index.css
@@ -1,13 +1,19 @@
+html {
+  height: 100%;
+  overflow: auto;
+}
 body {
+  height: 100%;
+  overflow: auto;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }