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 2 commits
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
118 changes: 32 additions & 86 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,48 @@
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 Ressources from "./containers/Ressources";
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="/Ressources" component={Ressources} />
<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();
});
});
38 changes: 38 additions & 0 deletions src/components/Hero/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";
Copy link
Collaborator

Choose a reason for hiding this comment

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

the name of this file should be index.jsx


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>
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 texts should be imported form the translation files

The Only Place for <br />
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... " />
<button> GO </button>
</div>
</div>
</Col>
<Col lg={7}>
<img src={hero} alt="hero section" />
</Col>
</Row>
</Container>
</header>
);
}

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

.hero {
background-color: $light-color;
}

.hero_contant {
margin-top: 50%;

.hero_title {
margin-bottom: 1.875rem;
h1 {
font-family: sans-serif;
color: $primary-color;
font-size: 3rem;
}
}
.hero_text {
margin-bottom: 2.52rem;
p {
color: $secondary-color;
font-size: 1.125rem;
}
}
.hero_search {
display: flex;
align-items: center;
position: relative;
background-color: #ffffff;
border-radius: 4ch;
overflow: hidden;
box-shadow: 0rem 0.62rem 1.25rem rgba(0, 0, 0, 0.2);
button {
background-color: $primary-color;
padding: 0.75rem 2.5rem;
font-size: 0.875rem;
color: #ffffff;
border-radius: 4ch;
border: none;
}
input {
width: 100%;
border: none;
outline: 0;
background: transparent;
padding: 0rem 1.875rem;
}
}
}
48 changes: 48 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,48 @@
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="Ressources">
<span>Ressources </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: 1.875rem !important;
font-family: $logo-font;
}
.nav__btn {
margin-left: 4rem;
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%;
}
}
}
7 changes: 7 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,7 @@
import React from "react";

function About() {
return <div></div>;
}

export default About;
Loading