VL1 fini 👏 + avertissement sur la dispo du cadre

fabmob · Jan 28, 2021 · c2abea5 · c2abea5
1 parent 0a30638
commit c2abea5
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 54 deletions.
diff --git a/src/Home.js b/src/Home.js
@@ -1,58 +1,25 @@
 import velos from './velos.yaml'
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 
 export default ({}) => (
 	<div>
 		<div css="max-width: 60rem;  text-align: center; margin: 0 auto 6vh; ">
 			<p
 				css={`
-				margin: 1rem 0 .4rem; font-size: 250%;
-@media (max-width: 800px) {
-font-size: 180%
-}
-				`}>
+					margin: 1rem 0 0.4rem;
+					font-size: 250%;
+					@media (max-width: 800px) {
+						font-size: 180%;
+					}
+				`}
+			>
 				Un vélo aussi libre qu'un logiciel libre.
 			</p>
 			<p>En commençant par l'assemblage.</p>
 		</div>
-		<ul
-			css={`
-				display: flex;
-				flex-wrap: wrap;
-				list-style-type: none;
-				justify-content: space-evenly;
-				margin-bottom: 2rem;
-				a {
-					text-decoration: none;
-					color: inherit;
-				}
-				li {
-					margin: 1rem;
-					width: 12rem;
-					height: 24rem;
-					background: white;
-					padding: 1.6rem 1rem;
-					border: 4px solid black;
-					border-radius: 0.3rem;
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-				}
-				li img {
-					width: 90%;
-				}
-				button {
-					padding: 0.2rem 0.5rem;
-					border: none;
-					background: black;
-					color: white;
-					font-size: 130%;
-					cursor: pointer;
-				}
-			`}
-		>
-			{velos.map(({nom, statut, prix, image, grisé}) => (
+		<BikeList>
+			{velos.map(({ nom, statut, prix, image, grisé }) => (
 				<Link to={grisé ? '' : '/vélos/vl1'}>
 					<li
 						css={`
@@ -72,6 +39,42 @@ opacity: 0.65;
 					</li>
 				</Link>
 			))}
-		</ul>
+		</BikeList>
 	</div>
 )
+
+const BikeList = styled.ul`
+	display: flex;
+	flex-wrap: wrap;
+	list-style-type: none;
+	justify-content: space-evenly;
+	margin-bottom: 2rem;
+	a {
+		text-decoration: none;
+		color: inherit;
+	}
+	li {
+		margin: 1rem;
+		width: 12rem;
+		height: 24rem;
+		background: white;
+		padding: 1.6rem 1rem;
+		border: 4px solid black;
+		border-radius: 0.3rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	li img {
+		width: 90%;
+	}
+	button {
+		padding: 0.2rem 0.5rem;
+		border: none;
+		background: black;
+		color: white;
+		font-size: 130%;
+		cursor: pointer;
+	}
+`
diff --git a/src/Specifications.js b/src/Specifications.js
@@ -1,5 +1,7 @@
 import { Link } from 'react-router-dom'
 import Composant from './Composant'
+import { Card } from './ui'
+import { Markdown } from './utils'
 export default ({ vélo, chosen, notChosen, prixTotal }) => (
 	<div css="p {margin: .3rem 0}">
 		<header>
@@ -8,7 +10,7 @@ export default ({ vélo, chosen, notChosen, prixTotal }) => (
 		<p>
 			Prix indicatif: <strong>{prixTotal} €</strong>
 			<Link to="/vélos/vl1/commande">
-				<button css="margin: 1rem">Commander</button>
+				<button css="margin: .4rem 1rem">Commander</button>
 			</Link>
 		</p>
 		<p>
@@ -17,6 +19,7 @@ export default ({ vélo, chosen, notChosen, prixTotal }) => (
 				<em>quoi ?</em>
 			</Link>
 		</p>
+		<Actu actu={vélo.actu} />
 		<h2>Les composants</h2>
 		<ul>
 			{chosen.map((item) => (
@@ -35,3 +38,24 @@ export default ({ vélo, chosen, notChosen, prixTotal }) => (
 		)}
 	</div>
 )
+
+const Actu = ({ actu }) => (
+	<Card
+		color={'#fbca71'}
+		css={`
+			margin: 1rem;
+			display: fex;
+			align-items: center;
+			flex-wrap: wrap;
+			> figure {
+				margin: 0 2rem 0 1rem;
+				font-size: 200%;
+			}
+		`}
+	>
+		<figure>📢</figure>
+		<div>
+			<Markdown source={actu} />
+		</div>
+	</Card>
+)
diff --git a/src/ui.js b/src/ui.js
@@ -1,15 +1,17 @@
-
 import styled from 'styled-components'
 
 export const Card = styled.div`
-
-box-shadow: 0 1px 3px rgba(41, 117, 209, 0.12), 0 1px 2px rgba(41, 117, 209, 0.24);
-border: 4px solid var(--lighterColor);
-    border-radius: 0.3rem;
+	box-shadow: 0 1px 3px rgba(41, 117, 209, 0.12),
+		0 1px 2px rgba(41, 117, 209, 0.24);
+	border: 4px solid var(--lighterColor);
+	border-radius: 0.3rem;
 	padding: 1rem;
 
 	:hover {
-box-shadow: 0px 2px 4px -1px rgba(41, 117, 209, 0.2), 0px 4px 5px 0px rgba(41, 117, 209, 0.14), 0px 1px 10px 0px rgba(41, 117, 209, 0.12);
+		box-shadow: 0px 2px 4px -1px rgba(41, 117, 209, 0.2),
+			0px 4px 5px 0px rgba(41, 117, 209, 0.14),
+			0px 1px 10px 0px rgba(41, 117, 209, 0.12);
 	}
 
+	${(props) => (props.color ? `border-color: ${props.color}` : '')}
 `
diff --git a/src/velos.yaml b/src/velos.yaml
@@ -1,6 +1,6 @@
 - nom: Gravel
-  statut:  🏗️ décembre 2020
-  prix: ~1500 €
+  statut: ✅️
+  prix: 1400 €
   image: gravel.svg
 - nom: Minimaliste
   grisé: oui

diff --git a/vélos/1/specs.yaml b/vélos/1/specs.yaml
@@ -1,5 +1,9 @@
 nom: Gravel
 version: 0.1
+actu: |
+  Comme vous pouvez le constater, les 3 modèles de cadre sélectionnés sont en rupture de stock, contrairement aux autres pièces ! 
+  
+  Heureusement, c'est le sujet de velolib.re pour 2021 : étudier la construction du cadre pour ne plus dépendre des fabricants et donc des problèmes d'approvisionnement de cette pièce centrale.
 description: |
   Le vélo libre 1 est un gravel : polyvalent, à l'aise sur 🌳 chemins ou en forêt grâce à ses gros pneus, confortable en 🏙️ ville,  et respectable pour prendre de la vitesse sur 🚵 route.
 note: |