Split out Tooltpi, Sidebar, CSS
This commit is contained in:
Tom Russell
parent
05604e32b6
commit
66c71dfdc7
100
app/src/frontend/about.css
Normal file
100
app/src/frontend/about.css
Normal file
@ -0,0 +1,100 @@
|
||||
|
||||
/**
|
||||
* Carousel
|
||||
*/
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
.carousel-control {
|
||||
display: none;
|
||||
}
|
||||
.carousel.active .carousel-control {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1.75em;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel.active .carousel-control:hover,
|
||||
.carousel.active .carousel-control:active,
|
||||
.carousel.active .carousel-control:focus {
|
||||
border: 0;
|
||||
outline: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.carousel button::-moz-focus-inner {
|
||||
border:0;
|
||||
}
|
||||
.carousel-control.next {
|
||||
right: -1em;
|
||||
background-image: url('images/arrow-next.png');
|
||||
}
|
||||
.carousel-control.back {
|
||||
left: -1em;
|
||||
background-image: url('images/arrow-back.png');
|
||||
}
|
||||
.carousel-content {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.carousel-content li {
|
||||
text-align: center;
|
||||
}
|
||||
.carousel.active .carousel-content li {
|
||||
display: none;
|
||||
}
|
||||
.carousel.active .carousel-content li.current {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logos
|
||||
*/
|
||||
.logo-list {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.logo-list li {
|
||||
display: inline-block;
|
||||
width: 8em;
|
||||
padding: 0 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.logo-list li:first-child {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data categories
|
||||
*/
|
||||
.data-category-list {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
margin: 0 -0.75em;
|
||||
}
|
||||
.data-category-list li {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 9em;
|
||||
height: 9em;
|
||||
margin: 0.375em;
|
||||
padding: 0.1em;
|
||||
}
|
||||
.data-category-list .category {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin: 1.4em 0 0.5em;
|
||||
}
|
||||
.data-category-list .description {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import './about.css';
|
||||
|
||||
const AboutPage = () => (
|
||||
<article>
|
||||
<div className="main-col">
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
const data_map = [
|
||||
{
|
||||
slug: 'date_year',
|
||||
@ -93,8 +95,7 @@ class Legend extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="legend" className="info-container">
|
||||
<h2 className="h2">Maps</h2>
|
||||
<Sidebar title="Maps">
|
||||
{
|
||||
data_map.map((data_group) => (
|
||||
<LegendGroup {...data_group} key={data_group.slug}>
|
||||
@ -116,7 +117,7 @@ class Legend extends Component {
|
||||
</LegendGroup>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,100 +1,8 @@
|
||||
@import 'styles/typography.css';
|
||||
@import 'styles/colours.css';
|
||||
@import 'styles/content.css';
|
||||
|
||||
/**
|
||||
* Main Layout
|
||||
*/
|
||||
main.beta {
|
||||
position: relative;
|
||||
min-height: 35rem;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
main.beta {
|
||||
position: absolute;
|
||||
top: 117px; /* 32px banner + 82px header + 3px border */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
.info-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 3rem;
|
||||
padding: 0.25em 0.75em;
|
||||
background: #fff;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
.leaflet-right{
|
||||
left: 0;
|
||||
}
|
||||
@media (min-width: 380px){
|
||||
.info-container {
|
||||
bottom: 2rem;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
.info-container {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20rem;
|
||||
bottom: 0;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-20rem);
|
||||
}
|
||||
.leaflet-right{
|
||||
left: 20rem;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Text pages
|
||||
*/
|
||||
article section {
|
||||
overflow: hidden;
|
||||
margin: 2.25em 0 4em;
|
||||
padding: 2em 0 4em;
|
||||
}
|
||||
.main-col {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@import 'styles/forms.css';
|
||||
@import 'styles/layout.css';
|
||||
@import 'styles/typography.css';
|
||||
|
||||
/**
|
||||
* View/edit, maps legend
|
||||
@ -123,36 +31,6 @@ hr {
|
||||
.bullet-prefix.toggled-on::before {
|
||||
background-color: #222;
|
||||
}
|
||||
.tooltip-hook {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: #222;
|
||||
background: #fff;
|
||||
border: 1px solid #222;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
padding: 0 0 0 1px;
|
||||
font-size: 0.8rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
.tooltip {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
min-width: 11em;
|
||||
left: -3px;
|
||||
top: 25px;
|
||||
}
|
||||
.tooltip .arrow {
|
||||
left: 5px;
|
||||
}
|
||||
.tooltip-hook:hover .tooltip,
|
||||
.tooltip-hook:hover + .tooltip {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
.data-section .h3 {
|
||||
margin: 0;
|
||||
}
|
||||
@ -198,147 +76,3 @@ hr {
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Forms
|
||||
*/
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="email"] {
|
||||
border-color: #999;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
input[type="number"] {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.form-check {
|
||||
padding-left: 0;
|
||||
}
|
||||
label {
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
.buttons-container {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
form .btn {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.buttons-container.btn-center {
|
||||
text-align: center;
|
||||
}
|
||||
.btn.btn-half {
|
||||
width: 100%;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.btn.btn-half {
|
||||
width: 49%;
|
||||
margin-left: 0;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.btn.btn-half:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Carousel
|
||||
*/
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
.carousel-control {
|
||||
display: none;
|
||||
}
|
||||
.carousel.active .carousel-control {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1.75em;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel.active .carousel-control:hover,
|
||||
.carousel.active .carousel-control:active,
|
||||
.carousel.active .carousel-control:focus {
|
||||
border: 0;
|
||||
outline: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.carousel button::-moz-focus-inner {
|
||||
border:0;
|
||||
}
|
||||
.carousel-control.next {
|
||||
right: -1em;
|
||||
background-image: url('images/arrow-next.png');
|
||||
}
|
||||
.carousel-control.back {
|
||||
left: -1em;
|
||||
background-image: url('images/arrow-back.png');
|
||||
}
|
||||
.carousel-content {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.carousel-content li {
|
||||
text-align: center;
|
||||
}
|
||||
.carousel.active .carousel-content li {
|
||||
display: none;
|
||||
}
|
||||
.carousel.active .carousel-content li.current {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logos
|
||||
*/
|
||||
.logo-list {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.logo-list li {
|
||||
display: inline-block;
|
||||
width: 8em;
|
||||
padding: 0 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.logo-list li:first-child {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data categories
|
||||
*/
|
||||
.data-category-list {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
margin: 0 -0.75em;
|
||||
}
|
||||
.data-category-list li {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 9em;
|
||||
height: 9em;
|
||||
margin: 0.375em;
|
||||
padding: 0.1em;
|
||||
}
|
||||
.data-category-list .category {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin: 1.4em 0 0.5em;
|
||||
}
|
||||
.data-category-list .description {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
51
app/src/frontend/sidebar.css
Normal file
51
app/src/frontend/sidebar.css
Normal file
@ -0,0 +1,51 @@
|
||||
.info-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 3rem;
|
||||
padding: 0.25em 0.75em;
|
||||
background: #fff;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
.leaflet-right{
|
||||
left: 0;
|
||||
}
|
||||
@media (min-width: 380px){
|
||||
.info-container {
|
||||
bottom: 2rem;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
.info-container {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20rem;
|
||||
bottom: 0;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-20rem);
|
||||
}
|
||||
.leaflet-right{
|
||||
left: 20rem;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
12
app/src/frontend/sidebar.js
Normal file
12
app/src/frontend/sidebar.js
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
import './sidebar.css';
|
||||
|
||||
const Sidebar = (props) => (
|
||||
<div id="legend" className="info-container">
|
||||
<h2 className="h2">{props.title}</h2>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Sidebar;
|
||||
48
app/src/frontend/styles/forms.css
Normal file
48
app/src/frontend/styles/forms.css
Normal file
@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Forms
|
||||
*/
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="email"] {
|
||||
border-color: #999;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
input[type="number"] {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.form-check {
|
||||
padding-left: 0;
|
||||
}
|
||||
label {
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
.buttons-container {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.buttons-container .btn {
|
||||
margin-bottom: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
form .btn {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.buttons-container.btn-center {
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.btn.btn-half {
|
||||
width: 100%;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.btn.btn-half {
|
||||
width: 49%;
|
||||
margin-left: 0;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.btn.btn-half:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
42
app/src/frontend/styles/layout.css
Normal file
42
app/src/frontend/styles/layout.css
Normal file
@ -0,0 +1,42 @@
|
||||
|
||||
/**
|
||||
* Main Layout
|
||||
*/
|
||||
main.beta {
|
||||
position: relative;
|
||||
min-height: 35rem;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
main.beta {
|
||||
position: absolute;
|
||||
top: 117px; /* 32px banner + 82px header + 3px border */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Text pages
|
||||
*/
|
||||
article section {
|
||||
overflow: hidden;
|
||||
margin: 2.25em 0 4em;
|
||||
padding: 2em 0 4em;
|
||||
}
|
||||
.main-col {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
30
app/src/frontend/tooltip.css
Normal file
30
app/src/frontend/tooltip.css
Normal file
@ -0,0 +1,30 @@
|
||||
.tooltip-hook {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: #222;
|
||||
background: #fff;
|
||||
border: 1px solid #222;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
padding: 0 0 0 1px;
|
||||
font-size: 0.8rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
.tooltip {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
min-width: 11em;
|
||||
left: -3px;
|
||||
top: 25px;
|
||||
}
|
||||
.tooltip .arrow {
|
||||
left: 5px;
|
||||
}
|
||||
.tooltip-hook:hover .tooltip,
|
||||
.tooltip-hook:hover + .tooltip {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
15
app/src/frontend/tooltip.js
Normal file
15
app/src/frontend/tooltip.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import './tooltip.css';
|
||||
|
||||
const Tooltip = (props) => (
|
||||
<span className="tooltip-hook" data-toggle="tooltip">
|
||||
?
|
||||
<div className="tooltip bs-tooltip-bottom">
|
||||
<div className="arrow"></div>
|
||||
<div className="tooltip-inner">{props.text}</div>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
|
||||
export default Tooltip;
|
||||
Loading…
Reference in New Issue
Block a user