Merge pull request #191 from padmajabhol/gsoc22

padmajabhol · web-flow · commit 67273b5d87ca · 2022-08-30T22:35:12.000+05:30
modularise layout
diff --git a/data/db.json b/data/db.json
@@ -223,54 +223,6 @@
       "datashared": false,
       "peerreview": true,
       "enforced": "Yes - before application"
-    },
-    {
-      "title": "DD",
-      "authors": "DDD",
-      "journaltype": "DD",
-      "topic": "D",
-      "published": "August 20, 02022 1:58:04 PM",
-      "issn": "ISSN",
-      "link": "D",
-      "policy": "policy 3",
-      "dataavail": false,
-      "datashared": false,
-      "peerreview": false,
-      "enforced": "option 2",
-      "evidence": "ENF",
-      "id": 15
-    },
-    {
-      "title": "EE",
-      "authors": "Q",
-      "journaltype": "EE",
-      "topic": "J",
-      "published": "August 20, 02022 2:05:57 PM",
-      "issn": "W",
-      "link": "J",
-      "policy": "policy 1",
-      "dataavail": true,
-      "datashared": false,
-      "peerreview": false,
-      "enforced": "",
-      "evidence": "W",
-      "id": 16
-    },
-    {
-      "title": "B",
-      "authors": "dqwdqw",
-      "journaltype": "DSWd",
-      "topic": "dqw",
-      "published": "August 20, 02022 2:07:39 PM",
-      "issn": "wdwq",
-      "link": "dqwdqw",
-      "policy": "policy 1",
-      "dataavail": true,
-      "datashared": false,
-      "peerreview": false,
-      "enforced": "",
-      "evidence": "dqwdqw",
-      "id": 17
     }
   ]
 }
diff --git a/src/App.js b/src/App.js
@@ -10,15 +10,15 @@ import { BrowserRouter as Router, Switch, Route, Redirect, useHistory } from 're
 import { format } from 'date-fns';
 import { api } from './api/posts';
 import { Journal, Contact, Manifesto, Home } from './pages';
-import { Footer, Auth, Header, Login, JournalDetails, AddJournal } from './components';
+import { Footer, Auth, Header, Login, JournalDetails, AddJournal, Layout } from './components';
 import Navbar from './components/marginals/Navbar/Navbar';
 import Edit from './components/EditJournal/Edit';
 import useAxiosFetch from './hooks/useAxiosFetch';
 import { DataProvider } from './context/DataContext';
 
 function App() {
   return (
-    <div className='App'>
+    <Layout>
       <DataProvider>
         <Switch>
           <Route exact path='/'>
@@ -47,10 +47,9 @@ function App() {
           </Route>
           <Redirect to='/' />
         </Switch>
-        <Navbar />
         <Footer />
       </DataProvider>
-    </div>
+    </Layout>
   );
 }
 
diff --git a/src/components/AddJournal/AddJournal.js b/src/components/AddJournal/AddJournal.js
@@ -13,7 +13,6 @@ import {
   Container,
   Head,
   Label,
-  PolicyContainer,
   Toggle,
   Input,
   FirstDiv,
@@ -28,6 +27,7 @@ import {
 } from './styles';
 import { FormInputBtn } from '../Authentication/styles';
 import { useGlobalContext } from '../../context/DataContext';
+import { SectionLayout, PolicyContainer } from '../marginals';
 
 const AddJournal = () => {
   const {
@@ -51,7 +51,7 @@ const AddJournal = () => {
     dispatch,
   } = useGlobalContext();
   return (
-    <Container>
+    <SectionLayout>
       <PolicyContainer>
         <Head>Create Journal Policies</Head>
         <Form onSubmit={handleSubmit}>
@@ -270,7 +270,7 @@ const AddJournal = () => {
           {isPending && <FormInputBtn>Adding blog...</FormInputBtn>}
         </Form>
       </PolicyContainer>
-    </Container>
+    </SectionLayout>
   );
 };
 
diff --git a/src/components/AddJournal/styles.js b/src/components/AddJournal/styles.js
@@ -11,7 +11,6 @@ export const Container = styled.div`
 export const Head = styled.h1`
   font-size: 1.8rem;
   color: #ec8d20;
-  //   text-align: center;
 `;
 
 export const PolicyContainer = styled.div`
diff --git a/src/components/EditJournal/Edit.js b/src/components/EditJournal/Edit.js
@@ -8,10 +8,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBookmark } from '@fortawesome/free-solid-svg-icons';
 import Switch from 'react-switch';
 import {
-  Container,
   Head,
   Label,
-  PolicyContainer,
   Toggle,
   Input,
   FirstDiv,
@@ -26,6 +24,7 @@ import {
 } from '../AddJournal/styles';
 import { FormInputBtn } from '../Authentication/styles';
 import { useGlobalContext } from '../../context/DataContext';
+import { SectionLayout, PolicyContainer } from '../marginals';
 
 const Edit = () => {
   const {
@@ -101,7 +100,7 @@ const Edit = () => {
   }, [dispatch, post]);
 
   return (
-    <Container>
+    <SectionLayout>
       <PolicyContainer>
         {editTitle && (
           <>
@@ -341,7 +340,7 @@ const Edit = () => {
           </>
         )}
       </PolicyContainer>
-    </Container>
+    </SectionLayout>
   );
 };
 
diff --git a/src/components/JournalDetails/Details.js b/src/components/JournalDetails/Details.js
@@ -16,9 +16,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import useFetch from '../Journals/useFetch';
 import {
-  Container,
   Head,
-  PolicyContainer,
   Title,
   Subhead,
   Subhead2,
@@ -33,6 +31,7 @@ import {
 import { Authors, Head3 } from '../Journals/styles';
 import { FormInputBtn } from '../Authentication/styles';
 import { useGlobalContext } from '../../context/DataContext';
+import { SectionLayout, PolicyContainer } from '../marginals';
 
 function Details() {
   const { posts, handleDelete } = useGlobalContext();
@@ -97,7 +96,7 @@ function Details() {
   ];
 
   return (
-    <Container>
+    <SectionLayout>
       <Head>Journal policies</Head>
       {indv && (
         <PolicyContainer>
@@ -149,7 +148,7 @@ function Details() {
           </p>
         </>
       )}
-    </Container>
+    </SectionLayout>
   );
 }
 
diff --git a/src/components/JournalDetails/styles.js b/src/components/JournalDetails/styles.js
@@ -9,7 +9,6 @@ export const Container = styled.div`
 `;
 
 export const Head = styled.h1`
-  margin-top: 100px;
   font-size: 2rem;
   color: #ec8d20;
   text-align: center;
@@ -19,8 +18,9 @@ export const PolicyContainer = styled.div`
   width: 65%;
   margin: 0px auto 0px auto;
   background-color: #ffff;
-  padding: 3rem 6rem;
+  padding: 2rem 3rem;
   border: 5px;
+  border-radius: 8px;
   align-self: center;
   justify-self: center;
   @media (max-width: 1300px) {
diff --git a/src/components/Journals/Journal.js b/src/components/Journals/Journal.js
@@ -4,34 +4,35 @@ import React from 'react';
 import { FiSearch } from 'react-icons/fi';
 import JournalList from './JournalList';
 // import useFetch from './useFetch';
-import { JContainer, Head, Search, SearchTerm, SearchButton } from './styles';
+import { JContainer, Head, Search, SearchTerm, SearchButton, Container } from './styles';
 
 const Journal = ({ posts, search, postsPerPage, totalPosts, paginate, dispatch }) => {
   return (
-    <JContainer>
-      <Head>Journals</Head>
-      <form onSubmit={(e) => e.preventDefault()}>
-        <Search>
-          <SearchTerm
-            id='search'
-            type='text'
-            placeholder='Search Journal'
-            value={search}
-            onChange={(e) => dispatch({ type: 'SEARCH', payload: e.target.value })}
-          />
-          {console.log(search)}
-          <SearchButton type='submit'>
-            <FiSearch />
-          </SearchButton>
-        </Search>
-      </form>
-      <JournalList
-        posts={posts}
-        postsPerPage={postsPerPage}
-        totalPosts={totalPosts}
-        paginate={paginate}
-      />
-    </JContainer>
+    <Container>
+      <JContainer>
+        <Head>Journals</Head>
+        <form onSubmit={(e) => e.preventDefault()}>
+          <Search>
+            <SearchTerm
+              id='search'
+              type='text'
+              placeholder='Search Journal'
+              value={search}
+              onChange={(e) => dispatch({ type: 'SEARCH', payload: e.target.value })}
+            />
+            <SearchButton type='submit'>
+              <FiSearch />
+            </SearchButton>
+          </Search>
+        </form>
+        <JournalList
+          posts={posts}
+          postsPerPage={postsPerPage}
+          totalPosts={totalPosts}
+          paginate={paginate}
+        />
+      </JContainer>
+    </Container>
   );
 };
 
diff --git a/src/components/Journals/styles.js b/src/components/Journals/styles.js
@@ -10,15 +10,12 @@ export const JContainer = styled.div`
   display: grid;
   width: 60%;
   margin: 0px auto 0px auto;
-  // margin-left: 100px;
   gap: 10px;
   @media (max-width: 1300px) {
     width: 70%;
-    margin-left: 80px;
   }
   @media (max-width: 1000px) {
     width: 70%;
-    margin-left: 50px;
   }
   @media (max-width: 700px) {
     margin: 0px auto 0px auto;
diff --git a/src/components/marginals/Navbar/styles.js b/src/components/marginals/Navbar/styles.js
@@ -27,7 +27,8 @@ export const MenuLink = styled.a`
 `;
 
 export const Nav = styled.div`
-  padding: 0 2rem;
+  padding: 0;
+  z-index: 99;
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/components/marginals/index.js b/src/components/marginals/index.js
@@ -3,3 +3,6 @@
 export { default as Footer } from './Footer/Footer';
 export { default as Navbar } from './Navbar/Navigation';
 export { default as SearchBar } from './Search/Search';
+export { default as Layout } from './shared/Layout';
+export { default as SectionLayout } from './shared/SectionLayout';
+export { default as PolicyContainer } from './shared/PolicyContainer';
diff --git a/src/components/marginals/shared/Layout.js b/src/components/marginals/shared/Layout.js
@@ -0,0 +1,19 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+import styled from 'styled-components';
+import Navbar from '../Navbar/Navbar';
+
+const Layout = styled.div`
+  position: relative;
+  width: full;
+`;
+
+export default ({ children }) => {
+  return (
+    <Layout>
+      <Navbar />
+      {children}
+    </Layout>
+  );
+};
diff --git a/src/components/marginals/shared/PolicyContainer.js b/src/components/marginals/shared/PolicyContainer.js
@@ -0,0 +1,31 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+import styled from 'styled-components';
+
+const PolicyContainer = styled.div`
+  width: 65%;
+  margin: 0px auto 0px auto;
+  background-color: #ffff;
+  padding: 2rem 3rem;
+  border: 5px;
+  border-radius: 8px;
+  align-self: center;
+  justify-self: center;
+  @media (max-width: 1300px) {
+    width: 78%;
+    padding: 2rem 4rem;
+  }
+  @media (max-width: 800px) {
+    width: 85%;
+    padding: 1.4rem 2rem;
+  }
+  @media (max-width: 600px) {
+    width: 88%;
+    padding: 1.5rem 1.5rem;
+  }
+`;
+
+export default ({ children }) => {
+  return <PolicyContainer>{children}</PolicyContainer>;
+};
diff --git a/src/components/marginals/shared/SectionLayout.js b/src/components/marginals/shared/SectionLayout.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const SectionContainer = styled.div`
+  min-height: 100vh;
+  padding-top: 8rem;
+  padding-bottom: 5rem;
+  background-color: #efeff0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  height: auto;
+`;
+
+function Section({ children }) {
+  return <SectionContainer>{children}</SectionContainer>;
+}
+
+export default Section;
