avior/IMIE_CC
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout de la page Flux

Browse Source 
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
Florian Bouillon 2020-04-28 16:58:20 +02:00
parent 9a2337945e
commit 215383a526
No known key found for this signature in database
GPG Key ID: B143FF27EF555D16
9 changed files with 1674 additions and 1895 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/FluxItem.jsx Normal file
View File

@ -0,0 +1,45 @@
import React from 'react'
export default class FluxItem extends React.Component {
render() {
return (
<div>
<img src={this.props.item.path} alt=""/>
<p>
<span>By <a href="#!">{this.props.item.pseudo}</a></span>
<span>At <a href="#!">{this.props.item.location}</a></span>
</p>
<style jsx>{`
div {
width: 94%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 2%;
margin: 2%;
border: 1px solid black;
border-radius: 8px;
}
img {
max-height: 400px;
object-fit: contain;
flex-basis: 70%;
margin-right: 2%;
}
img {
}
span {
display: block
}
p {
border-left: 1px dashed black;
padding: 2%;
width: 30%;
}
`}</style>
</div>
)
}
}

94
components/Layout.jsx Normal file
View File

@ -0,0 +1,94 @@
import React from 'react'
import Link from 'next/link'
export default class Layout extends React.Component {
render() {
return (
<>
<nav>
<Link href="/" as="/">
<a>
<img src="/p2.svg" alt=""/>
</a>
</Link>
<Link href="/" as="/">
<a>
<img src="/txt1.svg" alt=""/>
</a>
</Link>
<ul>
<li>L'application</li>
<li>
<Link href="/flux" as="/flux">
<a>
La randonnée
</a>
</Link>
</li>
<li>Contact</li>
<li><button>Télécharger</button></li>
</ul>
</nav>
{this.props.children}
<footer>
<div>
Politique de confidencialité
</div>
<div>
Conditions d'utilisations du service
</div>
</footer>
<style jsx>{`
nav {
position: fixed;
width: 100%;
top: 0;
background: white;
display: flex;
z-index: 1001;
height: 50px;
}
a {
display: inline;
}
img {
display: inline;
padding: 5px;
height: 50px;
}
nav ul {
margin: 0;
padding: 0;
width: 100%;
display: inline-flex;
justify-content: flex-end;
list-style: none;
}
nav ul li {
line-height: 2;
padding-right: 15px;
padding: 10px
}
nav ul li button {
background: #3CB992;
color: white;
border-radius: 10px;
padding: 5px 10px;
border: none;
margin: 0;
}
footer {
background: #3CB992;
padding: 20px;
font-weight: 500;
display: flex;
justify-content: space-evenly;
color: white;
text-align: center;
}
`}</style>
</>
)
}
}

56
components/nav.js
View File

@ -1,56 +0,0 @@
import React from 'react'
import Link from 'next/link'
const links = [
{ href: 'https://zeit.co/now', label: 'ZEIT' },
{ href: 'https://github.com/zeit/next.js', label: 'GitHub' },
].map(link => {
link.key = `nav-link-${link.href}-${link.label}`
return link
})
const Nav = () => (
<nav>
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
{links.map(({ key, href, label }) => (
<li key={key}>
<a href={href}>{label}</a>
</li>
))}
</ul>
<style jsx>{`
:global(body) {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
Helvetica, sans-serif;
}
nav {
text-align: center;
}
ul {
display: flex;
justify-content: space-between;
}
nav > ul {
padding: 4px 16px;
}
li {
display: flex;
padding: 6px 8px;
}
a {
color: #067df7;
text-decoration: none;
font-size: 13px;
}
`}</style>
</nav>
)
export default Nav

6
package.json
View File

@ -9,8 +9,8 @@
"export": "next export" "export": "next export"
}, },
"dependencies": { "dependencies": {
"next": "9.1.5", "next": "^9.3.0",
"react": "16.12.0", "react": "^16.13.0",
"react-dom": "16.12.0" "react-dom": "^16.13.0"
} }
} }

15
pages/_app.jsx Normal file
View File

@ -0,0 +1,15 @@
import App from 'next/app'
import '../style.css'
import Layout from '../components/Layout'
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
}

241
pages/flux.jsx Normal file
View File

@ -0,0 +1,241 @@
import React from 'react'
import FluxItem from '../components/FluxItem'
const fakeData = [{
pseudo: 'Avior',
path: '/baniere@2x.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/photo-filtre.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/Rectangle 6.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},{
pseudo: 'Avior',
path: '/phone.png',
location: 'Chateau de la madame'
},]
export default class Flux extends React.Component {
static getInitialProps(ctx) {
return {data: fakeData}
}
render() {
return (
<div>
{this.props.data.map((el, index) => (
<FluxItem key={index} item={el} />
))}
</div>
)
}
}

70
pages/index.jsx
View File

@ -1,19 +1,7 @@
import React from 'react' import React from 'react'
import Head from 'next/head'
import Nav from '../components/nav'
const Home = () => ( const Home = () => (
<div> <>
<nav>
<img src="/p2.svg" alt=""/>
<img src="/txt1.svg" alt=""/>
<ul>
<li>L'application</li>
<li>La randonnée</li>
<li>Contact</li>
<li className="download">Télécharger</li>
</ul>
</nav>
<header> <header>
<div className="headline"> <div className="headline">
<img src="/phone.png" alt=""/> <img src="/phone.png" alt=""/>
@ -57,28 +45,6 @@ const Home = () => (
<img src="/google-play.svg" alt=""/> <img src="/google-play.svg" alt=""/>
</div> </div>
</div> </div>
<footer>
<div className="els black">
<div className="el">
Politique de confidencialité
</div>
<div className="el">
Conditions d'utilisations du service
</div>
</div>
</footer>
<style jsx global>{`
html, body {
padding: 0;
margin:0;
}
body {
margin-top: 70px;
}
`}</style>
<style jsx>{` <style jsx>{`
.black { .black {
background: #3CB992; background: #3CB992;
@ -91,38 +57,6 @@ const Home = () => (
.green { .green {
display: inline-block; display: inline-block;
} }
nav {
position: fixed;
width: 96%;
padding: 2%;
top: 0;
background: white;
display: flex;
z-index: 1001;
}
nav img {
height: 60px;
}
nav ul {
margin: 0;
padding: 0;
width: 100%;
display: inline-flex;
justify-content: flex-end;
list-style: none;
}
nav ul li {
line-height: 2;
padding: 15px;
}
nav ul li.download {
background: #3CB992;
color: white;
border-radius: 10px;
padding: 7px 10px;
margin: 5px;
}
button { button {
border-radius: 10px; border-radius: 10px;
padding: 7px 10px; padding: 7px 10px;
@ -228,7 +162,7 @@ const Home = () => (
} }
`}</style> `}</style>
</div> </>
) )
export default Home export default Home

11
style.css Normal file
View File

@ -0,0 +1,11 @@
html, body {
padding: 0;
margin:0;
}
body {
margin-top: 50px;
}
* {
box-sizing: border-box;
}

3031
yarn.lock
View File

File diff suppressed because it is too large Load Diff