Like more
diff --git a/app/src/frontend/building/data-container.tsx b/app/src/frontend/building/data-container.tsx
index 02022cb6..192baad3 100644
--- a/app/src/frontend/building/data-container.tsx
+++ b/app/src/frontend/building/data-container.tsx
@@ -2,9 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';
-import BuildingNotFound from './building-not-found';
import ContainerHeader from './container-header';
-import Sidebar from './sidebar';
import ErrorBox from '../components/error-box';
import InfoBox from '../components/info-box';
@@ -198,8 +196,7 @@ const withCopyEdit = (WrappedComponent) => {
toggleCopyAttribute: this.toggleCopyAttribute,
copyingKey: (key) => this.state.keys_to_copy[key]
}
- return this.props.building?
-
+ return (
@@ -207,51 +204,54 @@ const withCopyEdit = (WrappedComponent) => {
{...this.props}
data_string={data_string}
copy={copy}
- />
-
+ {
+ (this.props.mode === 'edit' && !this.props.inactive) ?
+
+
+ {
+ this.props.slug === 'like' ? // special-case for likes
+ null :
+
+
+
+ }
+
+ : null
+ }
+
+ :
+ }
-
- :
+ );
}
}
}
diff --git a/app/src/frontend/building/multi-edit.tsx b/app/src/frontend/building/multi-edit.tsx
index c9790418..a408153b 100644
--- a/app/src/frontend/building/multi-edit.tsx
+++ b/app/src/frontend/building/multi-edit.tsx
@@ -25,8 +25,8 @@ const MultiEdit = (props) => {
@@ -53,8 +53,8 @@ const MultiEdit = (props) => {
diff --git a/app/src/frontend/building/sidebar.css b/app/src/frontend/building/sidebar.css
index 45f4e585..53caf48e 100644
--- a/app/src/frontend/building/sidebar.css
+++ b/app/src/frontend/building/sidebar.css
@@ -2,51 +2,25 @@
* Sidebar layout
*/
.info-container {
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- bottom: 3rem;
+ order: 1;
padding: 0 0 2em;
background: #fff;
- z-index: 1000;
- overflow-y: auto;
+ overflow-y: scroll;
+ height: 40%;
}
+
.info-container h2:first-child {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
margin-left: -0.1em;
padding: 0 0.75rem;
}
-#root .leaflet-container .leaflet-control-attribution {
- width: 100%;
- height: 3rem;
- background: #fff;
- background: rgba(255, 255, 255, 0.7);
-}
-.leaflet-right{
- left: 0;
-}
-@media (min-width: 380px){
- .info-container {
- bottom: 2rem;
- }
- #root .leaflet-container .leaflet-control-attribution {
- height: 2rem;
- }
-}
+
@media (min-width: 768px){
.info-container {
- top: 0;
- left: 0;
- width: 25rem;
- bottom: 0;
- }
- .leaflet-right{
- left: 25rem;
- }
- #root .leaflet-container .leaflet-control-attribution {
- height: auto;
+ order: 0;
+ height: unset;
+ width: 23rem;
}
}
diff --git a/app/src/frontend/components/icons.tsx b/app/src/frontend/components/icons.tsx
index ee439af2..b660c13c 100644
--- a/app/src/frontend/components/icons.tsx
+++ b/app/src/frontend/components/icons.tsx
@@ -5,7 +5,7 @@ import React from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faQuestionCircle, faPaintBrush, faInfoCircle, faTimes, faCheck, faCheckDouble,
- faAngleLeft, faCaretDown, faSearch, faEye } from '@fortawesome/free-solid-svg-icons'
+ faAngleLeft, faCaretDown, faSearch, faEye, faCaretUp } from '@fortawesome/free-solid-svg-icons'
library.add(
faQuestionCircle,
@@ -16,6 +16,7 @@ library.add(
faCheckDouble,
faAngleLeft,
faCaretDown,
+ faCaretUp,
faSearch,
faEye
);
@@ -56,6 +57,10 @@ const DownIcon = () => (
);
+const UpIcon = () => (
+
+);
+
const SearchIcon = () => (
);
@@ -70,5 +75,6 @@ export {
SaveDoneIcon,
BackIcon,
DownIcon,
+ UpIcon,
SearchIcon
};
diff --git a/app/src/frontend/components/logo.css b/app/src/frontend/components/logo.css
index 52f814c0..6058fed2 100644
--- a/app/src/frontend/components/logo.css
+++ b/app/src/frontend/components/logo.css
@@ -5,8 +5,7 @@
font-family: 'glacial_cl', sans-serif;
text-transform: uppercase;
}
-.logo,
-.logo.navbar-brand {
+.logo {
display: block;
padding: 0;
color: #000;
@@ -27,19 +26,7 @@
font-size: 0.625em;
letter-spacing: 0;
}
-.map-legend .logo {
- padding: 0 0.5rem 0.5rem;
-}
-.map-legend .logo .logotype {
- font-size: 1.9rem;
- margin-bottom: -2px;
-}
-.map-legend .logo .row .cell {
- background-color: #ccc;
- height: 12px;
- width: 12px;
- animation: none !important;
-}
+
.logo .grid {
position: relative;
top: -1px;
@@ -60,51 +47,56 @@
height: 14px;
margin: 0 3px 0 0;
}
-.logo .row:nth-child(1) .cell:nth-child(1) {
+
+.logo.gray .cell {
+ background-color: #ccc;
+}
+
+.logo.animated .row:nth-child(1) .cell:nth-child(1) {
animation: pulse 87s infinite;
animation-delay: -1.5s;
}
-.logo .row:nth-child(1) .cell:nth-child(2) {
+.logo.animated .row:nth-child(1) .cell:nth-child(2) {
animation: pulse 52s infinite;
animation-delay: -0.5s;
}
-.logo .row:nth-child(1) .cell:nth-child(3) {
+.logo.animated .row:nth-child(1) .cell:nth-child(3) {
animation: pulse 79s infinite;
animation-delay: -6s;
}
-.logo .row:nth-child(1) .cell:nth-child(4) {
+.logo.animated .row:nth-child(1) .cell:nth-child(4) {
animation: pulse 55s infinite;
animation-delay: -10s;
}
-.logo .row:nth-child(2) .cell:nth-child(1) {
+.logo.animated .row:nth-child(2) .cell:nth-child(1) {
animation: pulse 64s infinite;
animation-delay: -7.2s;
}
-.logo .row:nth-child(2) .cell:nth-child(2) {
+.logo.animated .row:nth-child(2) .cell:nth-child(2) {
animation: pulse 98s infinite;
animation-delay: -25s;
}
-.logo .row:nth-child(2) .cell:nth-child(3) {
+.logo.animated .row:nth-child(2) .cell:nth-child(3) {
animation: pulse 51s infinite;
animation-delay: -35s;
}
-.logo .row:nth-child(2) .cell:nth-child(4) {
+.logo.animated .row:nth-child(2) .cell:nth-child(4) {
animation: pulse 76s infinite;
animation-delay: -20s;
}
-.logo .row:nth-child(3) .cell:nth-child(1) {
+.logo.animated .row:nth-child(3) .cell:nth-child(1) {
animation: pulse 52s infinite;
animation-delay: -3.5s;
}
-.logo .row:nth-child(3) .cell:nth-child(2) {
+.logo.animated .row:nth-child(3) .cell:nth-child(2) {
animation: pulse 79s infinite;
animation-delay: -8.5s;
}
-.logo .row:nth-child(3) .cell:nth-child(3) {
+.logo.animated .row:nth-child(3) .cell:nth-child(3) {
animation: pulse 65s infinite;
animation-delay: -4s;
}
-.logo .row:nth-child(3) .cell:nth-child(4) {
+.logo.animated .row:nth-child(3) .cell:nth-child(4) {
animation: pulse 54s infinite;
animation-delay: -17s;
}
diff --git a/app/src/frontend/components/logo.tsx b/app/src/frontend/components/logo.tsx
index e3781fcb..f842e3d7 100644
--- a/app/src/frontend/components/logo.tsx
+++ b/app/src/frontend/components/logo.tsx
@@ -1,36 +1,27 @@
import React from 'react';
-import { Link } from 'react-router-dom';
import './logo.css';
+interface LogoProps {
+ variant: 'default' | 'animated' | 'gray';
+}
+
/**
* Logo
*
* As link to homepage, used in top header
*/
-const Logo: React.FunctionComponent = () => (
-
-
-
- Colouring
- London
-
-
-);
-
-/**
- * MinorLogo
- *
- * As plain logo, used in legend
- */
-const MinorLogo: React.FunctionComponent = () => (
-
-
-
- Colouring
- London
-
-
-)
+const Logo: React.FunctionComponent
= (props) => {
+ const variantClass = props.variant === 'default' ? '' : props.variant;
+ return (
+
+
+
+ Colouring
+ London
+
+
+ );
+};
const LogoGrid: React.FunctionComponent = () => (
@@ -55,4 +46,4 @@ const LogoGrid: React.FunctionComponent = () => (
)
-export { Logo, MinorLogo };
+export { Logo };
diff --git a/app/src/frontend/header.css b/app/src/frontend/header.css
index 7dcf4d8a..406d618d 100644
--- a/app/src/frontend/header.css
+++ b/app/src/frontend/header.css
@@ -2,14 +2,27 @@
* Main header
*/
.main-header {
- display: block;
- min-height: 79px;
text-decoration: none;
- border-bottom: 3px solid #222;
+ border-bottom: 2px solid #222;
}
.main-header .navbar {
- padding: 0.75em 0.5em 0.75em;
+ padding: 0.5em 0.5em 0.5em;
}
.main-header .navbar-brand {
margin: 0 1em 0 0;
}
+
+.main-header .shorten-username {
+ text-overflow: '…)';
+ white-space: nowrap;
+ overflow: hidden;
+ display: inline-block;
+ vertical-align: bottom;
+ max-width: 70vw;
+}
+
+@media (min-width: 768px) {
+ .main-header .shorten-username {
+ max-width: 5vw;
+ }
+}
\ No newline at end of file
diff --git a/app/src/frontend/header.tsx b/app/src/frontend/header.tsx
index 7b8ba663..75faab34 100644
--- a/app/src/frontend/header.tsx
+++ b/app/src/frontend/header.tsx
@@ -19,6 +19,7 @@ class Header extends React.Component { // TODO: add proper types
super(props);
this.state = {collapseMenu: true};
this.handleClick = this.handleClick.bind(this);
+ this.handleNavigate = this.handleNavigate.bind(this);
}
handleClick() {
@@ -27,22 +28,35 @@ class Header extends React.Component { // TODO: add proper types
}));
}
+ handleNavigate() {
+ this.setState({
+ collapseMenu: true
+ });
+ }
+
render() {
return (
-