Add some style

This commit is contained in:
Gabriel Augendre 2021-11-12 17:24:16 +01:00
parent 46358a6e5a
commit 368c9ec03c
7 changed files with 63 additions and 10 deletions

2
.gitignore vendored
View file

@ -21,3 +21,5 @@
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
.env

View file

@ -3,6 +3,9 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
@ -10,6 +13,7 @@
"@types/node": "^12.0.0", "@types/node": "^12.0.0",
"@types/react": "^17.0.0", "@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0", "@types/react-dom": "^17.0.0",
"bootstrap": "^5.1.3",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",

View file

@ -1,3 +1,8 @@
body {
font-size: 200%;
margin-top: 1em;
}
.placeholder:empty:before { .placeholder:empty:before {
content: "\200b"; content: "\200b";
} }

View file

@ -19,9 +19,15 @@ class App extends React.Component<{}, IAppState> {
} }
render() { render() {
return <div className="App"> return <div className="container">
<div className="row">
{this.state.passages.map((ligne) => <Ligne key={ligne.ligne} ligne={ligne.ligne} delais={ligne.delais}/>)} {this.state.passages.map((ligne) => <Ligne key={ligne.ligne} ligne={ligne.ligne} delais={ligne.delais}/>)}
<button onClick={this.reload}>Refresh</button> </div>
<div className="row">
<div className="col-12">
<button className="btn btn-block btn-secondary" onClick={this.reload}>Refresh</button>
</div>
</div>
</div>; </div>;
} }

View file

@ -1,12 +1,17 @@
import React from "react"; import React from "react";
import {ILigne, PassageType} from "./interfaces"; import {ILigne, PassageType} from "./interfaces";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faBus} from '@fortawesome/free-solid-svg-icons'
export default class Ligne extends React.Component<ILigne> { export default class Ligne extends React.Component<ILigne> {
render() { render() {
return <div> return <div className="col-4">
<p>Prochains passages de la ligne {placeholder(this.props.ligne)} :</p> <div className="card">
<div className="card-header"><FontAwesomeIcon icon={faBus}/> {placeholder(this.props.ligne)}</div>
<Passages passages={this.props.delais}/> <Passages passages={this.props.delais}/>
</div> </div>
</div>
} }
} }
@ -16,7 +21,7 @@ interface IPassagesProps {
class Passages extends React.Component<IPassagesProps> { class Passages extends React.Component<IPassagesProps> {
render() { render() {
return <ul> return <ul className="list-group list-group-flush">
{this.props.passages?.map((passage, index) => <Passage key={index} passage={passage}/>)} {this.props.passages?.map((passage, index) => <Passage key={index} passage={passage}/>)}
</ul> </ul>
} }
@ -29,15 +34,14 @@ interface IPassageProps {
class Passage extends React.Component<IPassageProps> { class Passage extends React.Component<IPassageProps> {
render() { render() {
return <li>{placeholder(this.props.passage)}</li> return <li className="list-group-item">{placeholder(this.props.passage)}</li>
} }
} }
function placeholder(value?: string) { function placeholder(value?: string) {
if (value === undefined) { if (value === undefined) {
return <span className="placeholder"/> return <span className="placeholder"/>
} } else {
else {
return value; return value;
} }
} }

View file

@ -1,3 +1,4 @@
import 'bootstrap/dist/css/bootstrap.css';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';

View file

@ -1242,6 +1242,32 @@
minimatch "^3.0.4" minimatch "^3.0.4"
strip-json-comments "^3.1.1" strip-json-comments "^3.1.1"
"@fortawesome/fontawesome-common-types@^0.2.36":
version "0.2.36"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
"@fortawesome/fontawesome-svg-core@^1.2.36":
version "1.2.36"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.36"
"@fortawesome/free-solid-svg-icons@^5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.36"
"@fortawesome/react-fontawesome@^0.1.16":
version "0.1.16"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz#ce7665490214e20f929368d6b65f68884a99276a"
integrity sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==
dependencies:
prop-types "^15.7.2"
"@gar/promisify@^1.0.1": "@gar/promisify@^1.0.1":
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
@ -2960,6 +2986,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap@^5.1.3:
version "5.1.3"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
boxen@5.1.2: boxen@5.1.2:
version "5.1.2" version "5.1.2"
resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50" resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"