a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

DRYer logo

Browse Source
This commit is contained in:
Tom Russell 2019-08-14 08:56:00 +01:00
parent b0bfe70e9d
commit b0f9aa3900
3 changed files with 46 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
app/src/frontend/components/logo.tsx
View File

@ -4,29 +4,12 @@ import './logo.css';
/** /**
* Logo * Logo
*
* As link to homepage, used in top header
*/ */
const Logo = () => ( const Logo: React.FunctionComponent = () => (
<Link to="/" className="logo navbar-brand" id="top"> <Link to="/" className="logo navbar-brand" id="top">
<div className="grid"> <LogoGrid />
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
</div>
<h1 className="logotype"> <h1 className="logotype">
<span>Colouring</span> <span>Colouring</span>
<span>London</span> <span>London</span>
@ -34,4 +17,42 @@ const Logo = () => (
</Link> </Link>
); );
export default Logo; /**
* MinorLogo
*
* As plain logo, used in legend
*/
const MinorLogo: React.FunctionComponent = () => (
<div className="logo">
<LogoGrid />
<h3 className="h3 logotype">
<span>Colouring</span>
<span>London</span>
</h3>
</div>
)
const LogoGrid: React.FunctionComponent = () => (
<div className="grid">
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
</div>
)
export { Logo, MinorLogo };

2
app/src/frontend/header.tsx
View File

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Logo from './components/logo'; import { Logo } from './components/logo';
import './header.css'; import './header.css';
/** /**

28
app/src/frontend/legend.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './legend.css'; import './legend.css';
import { MinorLogo } from './components/logo';
const LEGEND_CONFIG = { const LEGEND_CONFIG = {
location: { location: {
@ -145,32 +146,7 @@ class Legend extends React.Component<any, any> { // TODO: add proper types
return ( return (
<div className="map-legend"> <div className="map-legend">
<div className="logo"> <MinorLogo />
<div className="grid">
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
</div>
<h3 className="h3 logotype">
<span>Colouring</span>
<span>London</span>
</h3>
</div>
<h4 className="h4">{ title } {elements.length?<button className="expander-button btn btn-outline-secondary btn-sm" type="button" onClick={this.handleClick} >^</button>:null}</h4> <h4 className="h4">{ title } {elements.length?<button className="expander-button btn btn-outline-secondary btn-sm" type="button" onClick={this.handleClick} >^</button>:null}</h4>
{ {
details.description? details.description?