Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

finish hero section and navbar section #15

Closed
wants to merge 4 commits into from
Closed

finish hero section and navbar section #15

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
704f7f4
finish hero section and navbar section
AbduallahBarmu Aug 15, 2021
174fedb
fix
AbduallahBarmu Aug 17, 2021
2e89c74
fix arrow functions
AbduallahBarmu Aug 18, 2021
cb2acbf
PTAL
AbduallahBarmu Aug 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 30 additions & 86 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,46 @@
import React from "react"; // , { useEffect }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you'll need to pull the new changes from dev to get the latest updates there

import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { ADD_COUNT, REDUCE_COUNT } from "./utilities/types";
import { Container, Row, Button, Col, ListGroup } from "react-bootstrap";
// import { useTranslation } from "react-i18next";
// import { useDispatch, useSelector } from "react-redux";

import "./App.scss";
import "./style/style.css";
// import { db } from "./firebase";
import { Route, Switch, Router } from "react-router-dom";
import { Route, Switch, Router, BrowserRouter } from "react-router-dom";
import history from "./history";

function App() {
const { t, i18n } = useTranslation();
const dispatch = useDispatch();
const clicksReducer = useSelector((state) => state.clicks);
// import componentes
import NavBar from "./components/NavBar";

// useEffect(() => {
// try {
// (async () => {
// try {
// await db.collection("collection").onSnapshot((snapShot) => {
// const docs = snapShot.docs.map((doc) => {
// return { id: doc.id, data: doc.data() };
// });
// console.log("docs :", docs);
// });
// } catch (error) {
// console.log("inside async error :", error);
// }
// })();
// } catch (error) {
// console.log("inside useEffect error :", error);
// }
// import pages
import Home from "./containers/Home";
import About from "./containers/About";
import Contact from "./containers/Contact";
import Universities from "./containers/Universities";
import Blog from "./containers/Blog";

// return () => {
// console.log("cleanUp");
// };
// }, []);
function App() {
// const { t, i18n } = useTranslation();
// const dispatch = useDispatch();
// const clicksReducer = useSelector((state) => state.clicks);

const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
};
// const changeLanguage = (lng) => {
// i18n.changeLanguage(lng);
// };

return (
// initial container from bootstrap
<Router history={history}>
<Switch>
<Route exact path="/">
<Container>
{/* initial html element styled with scss */}
<div className="app">
<span className="app__text">test scss</span>
</div>
{/* list of libraries */}
<Row>
<Col lg={12}>
in this application i have added the ...
<ListGroup>
<ListGroup.Item>react-bootstrap</ListGroup.Item>
<ListGroup.Item>i8next</ListGroup.Item>
<ListGroup.Item>redux</ListGroup.Item>
<ListGroup.Item>redux thunk</ListGroup.Item>
<ListGroup.Item>redux react</ListGroup.Item>
<ListGroup.Item>Scss</ListGroup.Item>
<ListGroup.Item>
firebase (auth, db, google services)
</ListGroup.Item>
</ListGroup>
{/* buttons for usage of reducers and languages */}
<div className="buttons">
<div className="buttons__wrapper">
<div>
<Button onClick={(e) => dispatch({ type: ADD_COUNT })}>
{clicksReducer?.clicks} Add Click
</Button>
<Button onClick={(e) => dispatch({ type: REDUCE_COUNT })}>
{clicksReducer?.clicks} Reduce Click
</Button>
</div>
<div>
<Button onClick={(e) => changeLanguage("tr")}>
Translate to Turkish
</Button>
<Button
className="btn"
onClick={() => changeLanguage("en")}
>
Translate to English
</Button>
</div>
</div>
</div>
{/* some text to be translated */}
<p>{t("home.hero.greeting")}</p>
</Col>
</Row>
</Container>
</Route>
</Switch>
<NavBar />
{/* Routing part */}
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/About" component={About} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "Ressources" section is missing from the NavBar

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not know how I did not see it at all but now I fix it

<Route path="/Contact" component={Contact} />
<Route path="/Universities" component={Universities} />
<Route path="/Blog" component={Blog} />
</Switch>
</BrowserRouter>
</Router>
);
}
Expand Down
61 changes: 37 additions & 24 deletions src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,39 @@
.app {
background-color: #666;
padding: 20px;
margin: 30px 0;
border: 1px solid red;
.app__text {
color: #fff;
text-transform: uppercase;
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Yellowtail&display=swap");
@import "./style/variables";

body {
font-family: $primary-font !important;
margin: 0;
padding: 0;
}
.buttons {
display: flex;
// flex-direction: column;
flex-basis: auto;
.buttons__wrapper {
margin: 1rem;
display: flex;
flex-direction: column;
div {
margin: 1rem;
button {
margin: 1rem;
}
}
}

p {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this p will affect all the p tags in the project, you should give it a className

margin: 0 !important;
padding: 0;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
background-color: $primary-color !important;
}

.btn {
border: none;
padding: 0.75rem 1.75rem;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}

::-webkit-input-placeholder {
/* Edge */
color: #9dafbd;
}

:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #9dafbd;
}

::placeholder {
color: #9dafbd;
}
2 changes: 1 addition & 1 deletion src/App.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe("With React Testing Library", () => {
<App />
</Provider>
);
const linkElement = getByText(/test scss/i);
const linkElement = getByText(/choose wisly/i);
expect(linkElement).toBeInTheDocument();
});
});
44 changes: 44 additions & 0 deletions src/components/NavBar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from "react";
import "./style.scss";
import { Navbar, Nav, Container, Button } from "react-bootstrap";

function NavBar() {
return (
<div>
<Navbar bg="light" variant="light" className="nav__bar">
<Container>
<Navbar.Brand href="/" className="nav__brand">
Choose Wisly
</Navbar.Brand>
<div>
<Nav className="ml-auto nav__items ">
<Nav.Link href="/">
<span>Home </span>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all the text should be coming from the translation file, there shouldn't be any text hard coded, like home, about, etc...

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since it will changes in the future so I removed all the text from pages

<span className="dot"></span>{" "}
</Nav.Link>
<Nav.Link href="About">
<span>About </span>
<span className="dot"></span>
</Nav.Link>
<Nav.Link href="Contact">
<span>Contact </span>
<span className="dot"></span>
</Nav.Link>
<Nav.Link href="Universities">
<span>Universities </span>
<span className="dot"></span>
</Nav.Link>
<Nav.Link href="Blog">
<span> Blog</span>
<span className="dot"></span>
</Nav.Link>
<Button className="nav__btn">Sign up</Button>
</Nav>
</div>
</Container>
</Navbar>
</div>
);
}

export default NavBar;
39 changes: 39 additions & 0 deletions src/components/NavBar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
@import "./../../style/variables";

.nav__bar {
color: #ffffff !important;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you'll have to avoid using important, look at Zakarias code to figure it out

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since I am using bootstrap I need to use it to handle css code
I have look it at zakarias code also he use it , take a look on the FooterButtons style

}

.nav__brand {
color: $primary-color !important;
font-size: 30px !important;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all the units should be in rem not px

font-family: $logo-font;
}
.nav__btn {
margin-left: 4ch;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is a ch, let's try to be as consistent as possible

padding-right: 2rem !important;
padding-left: 2rem !important;
background-color: $primary-color !important;
border: none !important;
}

.nav__items {
.nav-link {
display: flex;
flex-direction: column;
align-items: center;
}
:hover {
color: $primary-color !important;

.dot {

position: absolute;
height: 0.4rem;
width: 0.4rem;
bottom: 1.1rem;
background-color: $primary-color;
border-radius: 100%;
}
}
}
11 changes: 11 additions & 0 deletions src/containers/About/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";

function About() {
return (
<div>
<h2>About page </h2>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also here this should be coming from the translation files

</div>
);
}

export default About;
11 changes: 11 additions & 0 deletions src/containers/Blog/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";

function Blog() {
return (
<div>
<h2>Blog page </h2>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, translation files

</div>
);
}

export default Blog;
11 changes: 11 additions & 0 deletions src/containers/Contact/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react";

function Contact() {
return (
<div>
<h2>Contact page </h2>
</div>
);
}

export default Contact;
39 changes: 38 additions & 1 deletion src/containers/Home/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,38 @@
// hero section for homepage
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hero file should be in component not containers, it should be under Hero folder with the name index.js

import React from "react";

import { Container, Row, Col } from "react-bootstrap";
import hero from "./../../images/hero.svg";

function Hero() {
return (
<header className="hero">
<Container>
<Row>
<Col lg={5}>
<div className="hero_contant">
<div className="hero_title">
<h1>
The Only Place for <br />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all text from translation

selecting you future
</h1>
</div>
<div className="hero_text">
<p> You can find all the content you are looking for about </p>
<p> universities and learning approaches. </p>
</div>
<div className="hero_search">
<input type="search" placeholder="search... " />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you change "search" to "Search".

<button> GO </button>
</div>
</div>
</Col>
<Col lg={7}>
<img src={hero} alt="" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt should not be empty

</Col>
</Row>
</Container>
</header>
);
}

export default Hero;
13 changes: 13 additions & 0 deletions src/containers/Home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from "react";
import Hero from "./Hero";
import "./style.scss";

function Home() {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could change this to arrow function to be consistent with the rest of the code. Same for the other functions

Copy link
Collaborator Author

@AbduallahBarmu AbduallahBarmu Aug 17, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually I would like to do that but I cant becase I feel more comfortable with it to make a difference between componetes and methods (function ) inside the same components so if you can change yours will be better

return (
<main>
<Hero />
</main>
);
}

export default Home;
Loading