#167164932 landing page #7

allebd · 2019-08-29T09:57:13Z

Pivotal tracker story

#167164932

What does this PR do?

User should be able to see a landing page

Summary of Task

Create Footer Component
Create other component for landing page
Create styling

How can this be tested?

Use git clone to clone this repository to local branch
Use npm install to download all necessary packages
Use npm run dev to test

Screenshots (if appropriate)

Sample of the landing page

Sample of landing page mobile view

Nkemjiks · 2019-08-29T13:35:17Z

Remove the dummy component and route

Nkemjiks · 2019-08-29T13:38:39Z

Move the membership and weekly novel component to the landing page component. Also remove the components in the folder and file name. We already know its a component because its in the component folder

Nkemjiks · 2019-08-29T13:40:00Z

Change WeeklyNovel to NovelOfTheweek. That is a better name

Nkemjiks · 2019-08-29T13:41:38Z

I thought there was only one without an api. I don't see any api calls here?

src/components/App.js

allebd · 2019-08-29T13:45:58Z

Remove the dummy component and route

Noted, would remove the dummy component

allebd · 2019-08-29T13:48:27Z

Move the membership and weekly novel component to the landing page component. Also remove the components in the folder and file name. We already know its a component because its in the component folder

Noted, would work on it

allebd · 2019-08-29T13:49:17Z

Change WeeklyNovel to NovelOfTheweek. That is a better name

Noted, would rename the component

src/components/FooterComponent/Footer.js

allebd · 2019-08-29T14:11:34Z

I thought there was only one without an api. I don't see any api calls here?

There is currently no particular api call for the landing page, but I can try and make use of the get novels api call to achieve the novel of the week

Nkemjiks · 2019-08-29T14:14:38Z

You need to add support for wider screens.

Nkemjiks · 2019-08-29T14:15:06Z

I thought there was only one without an api. I don't see any api calls here?

There is currently no particular api call for the landing page, but I can try and make use of the get novels api call to achieve the novel of the week

And the hero image, is that not supposed to be served by an API?

Nkemjiks · 2019-08-29T14:15:53Z

And can you cherry-pick nero's navbar and make the necessary update so you page can be complete

allebd · 2019-08-29T14:25:00Z

And can you cherry-pick nero's navbar and make the necessary update so you page can be complete

Okay, would do that

allebd · 2019-08-29T14:25:34Z

You need to add support for wider screens.

Noted, would work on it

allebd · 2019-08-29T14:26:22Z

I thought there was only one without an api. I don't see any api calls here?

There is currently no particular api call for the landing page, but I can try and make use of the get novels api call to achieve the novel of the week

And the hero image, is that not supposed to be served by an API?

This can also be served from the get novels api call

Nkemjiks · 2019-08-30T12:16:00Z

src/components/App.js

+import Navbar from './layout/Navbar';
+import LandingPage from './LandingPage/LandingPage';
+import Footer from './layout/Footer/Footer';
+import './app.scss';

 const Welcome = () => (


Can you put this in a seperate component?

Noted, Treated Accordingly

Nkemjiks · 2019-08-30T12:16:36Z

src/components/LandingPage/LandingPage.js

@@ -0,0 +1,95 @@
+import React from 'react';


Change all react file to use .jsx

Noted, Treated Accordingly

Nkemjiks · 2019-08-30T12:18:01Z

src/components/LandingPage/landingPage.scss

+#writingCaption {
+  min-height:100%;
+  background-size:cover;
+  background:url(https://res.cloudinary.com/allebd/image/upload/v1567024807/dahlia/Rectangle_4.png) rgba(0,0,0,0.3);


Add the css under a parent class in the component so it doesn't clash with other css classes

Noted, Treated Accordingly

Nkemjiks · 2019-08-30T12:19:18Z

src/components/layout/Footer/Footer.js

+          <h4>Quick Links</h4>
+          <div className="subFooter">
+            <ul>
+              <li><Link to="/">Privacy Policy</Link></li>


You can set the to property to# so it doesnt leave the page

Noted, Treated Accordingly

Nkemjiks · 2019-08-30T12:21:34Z

src/components/layout/Navbar/AuthenticatedNav.js

+import Materialize from 'materialize-css';
+
+const AuthenticatedNav = () => {
+  useEffect(() => {


Can we have the states, setStates and use effects in a separate file so that this component file on focuses on rendering the component. The file name can be AuthenticatedNav.js while this file becomes AuthenticatedNav.jsx as i requested above

Noted, Treated Accordingly

Nkemjiks · 2019-08-30T12:21:54Z

src/components/layout/Navbar/UnauthenticatedNav.js

+        />
+        <a href="#!" type="button" data-target="mobile-demo" className="sidenav-trigger">
+          <img src="https://img.icons8.com/ios/50/000000/menu.png" alt="menu" className="font-icon" />
+          {/* <i className="fas fa-bars" />/ */}


Remove this if its not been used

Noted, Treated Accordingly

Nkemjiks · 2019-08-30T12:22:13Z

src/components/layout/Navbar/index.js

+import UnauthenticatedNav from './UnauthenticatedNav';
+
+const Navbar = () => {
+  useEffect(() => {


Move to a separate js file

Noted, Treated Accordingly

src/components/layout/Navbar/index.js

Nkemjiks · 2019-08-30T12:24:14Z

src/components/layout/Navbar/navbar.scss

+$color-white: #ffffff;
+$color-black: #000008;
+
+.navbar-fixed {


Wrap css in a parent class

Noted, Treated Accordingly

Create Footer Component Create other component for landing page Create styling [Finishes #167164932]

src/components/App.jsx

Nkemjiks · 2019-08-30T19:34:56Z

src/components/LandingPage/LandingPage.jsx

+
+const LandingPage = () => (
+  <div>
+    <Navbar />


The navbar and footer component is general to all components so its not supposed to be here. it should be in the router file

Noted, Treated Accordingly

Nkemjiks · 2019-08-30T19:35:11Z

src/components/LandingPage/LandingPage.jsx

+        </div>
+      </section>
+    </div>
+    <Footer />


Move to router file

Noted, Treated Accordingly

Nkemjiks · 2019-08-30T19:36:57Z

src/components/LandingPage/Banner.jsx

@@ -0,0 +1,26 @@
+import React from 'react';


Put this file in folder and add its css file with it

Nkemjiks · 2019-08-30T19:37:29Z

src/components/LandingPage/landingPage.scss

@@ -0,0 +1,240 @@
+/*


Break up this scss file. See suggestion above

allebd requested review from Rythae, OvieMudi, Ukhu, benisi, Nerocodes and WilliamsOhworuka August 29, 2019 13:08

Nkemjiks reviewed Aug 29, 2019

View reviewed changes

src/components/App.js Outdated Show resolved Hide resolved

Nkemjiks reviewed Aug 29, 2019

View reviewed changes

src/components/FooterComponent/Footer.js Outdated Show resolved Hide resolved

Nkemjiks reviewed Aug 29, 2019

View reviewed changes

src/components/FooterComponent/Footer.js Outdated Show resolved Hide resolved

Nkemjiks reviewed Aug 29, 2019

View reviewed changes

src/components/FooterComponent/Footer.js Outdated Show resolved Hide resolved

allebd force-pushed the feature/167164932/landing-page branch from 1b504f2 to 0e7eb4c Compare August 29, 2019 19:50

Nkemjiks suggested changes Aug 30, 2019

View reviewed changes

feature(landingPage): landing page

b6c262c

Create Footer Component Create other component for landing page Create styling [Finishes #167164932]

allebd force-pushed the feature/167164932/landing-page branch from 0e7eb4c to b6c262c Compare August 30, 2019 18:09

allebd added the Needs review when your pr needs review label Aug 31, 2019

Nkemjiks suggested changes Sep 2, 2019

View reviewed changes

allebd added 2 commits September 2, 2019 11:01

update folder structure and add router file

555473b

update landing page folder structure

e3ae2c3

Nkemjiks approved these changes Sep 2, 2019

View reviewed changes

Nkemjiks merged commit f0c0ab5 into develop Sep 2, 2019

Nkemjiks deleted the feature/167164932/landing-page branch September 2, 2019 10:31

#167164932 landing page #7

#167164932 landing page #7

Conversation

allebd commented Aug 29, 2019 • edited Loading

Pivotal tracker story

What does this PR do?

Summary of Task

How can this be tested?

Screenshots (if appropriate)

Nkemjiks commented Aug 29, 2019

Nkemjiks commented Aug 29, 2019

Nkemjiks commented Aug 29, 2019

Nkemjiks commented Aug 29, 2019

allebd commented Aug 29, 2019

allebd commented Aug 29, 2019

allebd commented Aug 29, 2019

allebd commented Aug 29, 2019

Nkemjiks commented Aug 29, 2019

Nkemjiks commented Aug 29, 2019

Nkemjiks commented Aug 29, 2019

allebd commented Aug 29, 2019

allebd commented Aug 29, 2019

allebd commented Aug 29, 2019

Choose a reason for hiding this comment

allebd Aug 30, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

allebd commented Aug 29, 2019 •

edited

Loading

allebd Aug 30, 2019 •

edited

Loading