Add footer with version info

This commit is contained in:
Gabriel Augendre 2021-11-12 17:36:30 +01:00
parent 368c9ec03c
commit 9c10ef5e7e
3 changed files with 40 additions and 7 deletions

View file

@ -12,5 +12,15 @@ COPY src ./src
ARG REACT_APP_TCL_AUTH ARG REACT_APP_TCL_AUTH
RUN yarn build RUN yarn build
FROM alpine/git AS git
WORKDIR /app
COPY .git ./
RUN git describe --always > /version
RUN date +"%Y-%m-%d %H:%M:%S" > /date
FROM nginx AS prod FROM nginx AS prod
COPY --from=git /version /app/.version
COPY --from=git /date /app/.date
RUN export REACT_APP_VERSION=$(cat /app/.version)
RUN export REACT_APP_DATE=$(cat /app/.date)
COPY --from=build /app/build /usr/share/nginx/html COPY --from=build /app/build /usr/share/nginx/html

View file

@ -3,6 +3,10 @@ body {
margin-top: 1em; margin-top: 1em;
} }
.main {
margin-bottom: 2rem;
}
.placeholder:empty:before { .placeholder:empty:before {
content: "\200b"; content: "\200b";
} }
@ -12,3 +16,13 @@ body {
width: 50px; width: 50px;
background-color: #c9c9c9; background-color: #c9c9c9;
} }
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 1.5rem;
background-color: #e8e8e8;
font-size: 1rem;
}

View file

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