mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-12 21:38:35 +03:00
Clean up unused code, add comments, tidy up
This commit is contained in:
Franc Camps-Febrer
@@ -176,21 +176,7 @@ export function toggleFetchingEvents() {
|
||||
}
|
||||
}
|
||||
|
||||
export const TOGGLE_VIEW = 'TOGGLE_VIEW'
|
||||
export function toggleView() {
|
||||
return {
|
||||
type: TOGGLE_VIEW
|
||||
}
|
||||
}
|
||||
|
||||
export const TOGGLE_TIMELINE = 'TOGGLE_TIMELINE'
|
||||
export function toggleTimeline() {
|
||||
return {
|
||||
type: TOGGLE_TIMELINE
|
||||
}
|
||||
}
|
||||
|
||||
export const TOGGLE_LANGUAGE = 'TOGGLE_LANGUAGE'
|
||||
export const TOGGLE_LANGUAGE = 'TOGGLE_LANGUAGE';
|
||||
export function toggleLanguage(language) {
|
||||
return {
|
||||
type: TOGGLE_LANGUAGE,
|
||||
@@ -198,37 +184,14 @@ export function toggleLanguage(language) {
|
||||
}
|
||||
}
|
||||
|
||||
export const OPEN_TOOLBAR = 'OPEN_TOOLBAR'
|
||||
export function openToolbar(toolbarTab = 0) {
|
||||
return {
|
||||
type: OPEN_TOOLBAR,
|
||||
toolbarTab: toolbarTab,
|
||||
}
|
||||
}
|
||||
|
||||
export const CLOSE_TOOLBAR = 'CLOSE_TOOLBAR'
|
||||
export const CLOSE_TOOLBAR = 'CLOSE_TOOLBAR';
|
||||
export function closeToolbar() {
|
||||
return {
|
||||
type: CLOSE_TOOLBAR
|
||||
}
|
||||
}
|
||||
|
||||
export const OPEN_CABINET = 'OPEN_CABINET'
|
||||
export function openCabinet(tabNum) {
|
||||
return {
|
||||
type: OPEN_CABINET,
|
||||
tabNum: tabNum,
|
||||
}
|
||||
}
|
||||
|
||||
export const CLOSE_CABINET = 'CLOSE_CABINET'
|
||||
export function closeCabinet() {
|
||||
return {
|
||||
type: CLOSE_CABINET
|
||||
}
|
||||
}
|
||||
|
||||
export const TOGGLE_INFOPOPUP = 'TOGGLE_INFOPOPUP'
|
||||
export const TOGGLE_INFOPOPUP = 'TOGGLE_INFOPOPUP';
|
||||
export function toggleInfoPopup() {
|
||||
return {
|
||||
type: TOGGLE_INFOPOPUP
|
||||
|
||||
@@ -146,10 +146,6 @@ class Dashboard extends React.Component {
|
||||
viewFilters={this.props.app.filters.views}
|
||||
features={this.props.app.features}
|
||||
|
||||
isToolbar={this.props.ui.flags.isToolbar}
|
||||
toolbarTab={this.props.ui.components.toolbarTab}
|
||||
isView2d={this.props.ui.flags.isView2d}
|
||||
|
||||
filter={this.handleTagFilter}
|
||||
toggle={ (key) => this.handleToggle(key) }
|
||||
actions={this.props.actions}
|
||||
|
||||
@@ -77,26 +77,7 @@ export default class InfoPopUp extends React.Component{
|
||||
)
|
||||
}
|
||||
|
||||
renderView3DLegend() {
|
||||
const lang = copy[this.props.app.language].legend.view3d;
|
||||
return (
|
||||
<div className={`infopopup ${(this.props.ui.flags.isInfopopup) ? '' : 'hidden'}`}>
|
||||
<button onClick={() => this.props.toggle()} className="side-menu-burg over-white is-active"><span /></button>
|
||||
{lang.paragraphs.map(paragraph => <p>{paragraph}</p>)}
|
||||
{lang.colors.map(color => (
|
||||
<div className="legend-item">
|
||||
<div className={`color-marker ${color.class}`}></div>
|
||||
<div className="item-label">{color.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.props.ui.flags.isView2d) {
|
||||
return (<div>{this.renderView3DLegend()}</div>)
|
||||
}
|
||||
return (
|
||||
<div>{this.renderView2DLegend()}</div>
|
||||
)
|
||||
|
||||
@@ -25,10 +25,6 @@ class Toolbar extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
openCabinet() {
|
||||
this.props.actions.openCabinet();
|
||||
}
|
||||
|
||||
resetAllFilters() {
|
||||
this.props.actions.resetAllFilters();
|
||||
}
|
||||
@@ -54,43 +50,42 @@ class Toolbar extends React.Component {
|
||||
const routeClass = (isViewLayer.routes) ? 'action-button active disabled' : 'action-button disabled'
|
||||
const sitesClass = (isViewLayer.sites) ? 'action-button active disabled' : 'action-button disabled';
|
||||
const coeventsClass = (isViewLayer.coevents) ? 'action-button active disabled' : 'action-button disabled';
|
||||
if (this.props.isView2d) {
|
||||
return (
|
||||
<div className="bottom-action-block">
|
||||
<button
|
||||
className={routeClass}
|
||||
onClick={() => this.toggleMapViews('routes')}
|
||||
>
|
||||
<svg x="0px" y="0px" width="30px" height="20px" viewBox="0 0 30 20" enableBackground="new 0 0 30 20">
|
||||
<path d="M0.806,13.646h7.619c2.762,0,3-0.238,3-3v-0.414c0-2.762,0.301-3,3.246-3h14.523"/>
|
||||
<polyline points="16.671,9.228 19.103,7.233 16.671,5.237 "/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className={sitesClass}
|
||||
onClick={() => this.toggleMapViews('sites')}
|
||||
>
|
||||
|
||||
return (
|
||||
<div className="bottom-action-block">
|
||||
<button
|
||||
className={routeClass}
|
||||
onClick={() => this.toggleMapViews('routes')}
|
||||
>
|
||||
<svg x="0px" y="0px" width="30px" height="20px" viewBox="0 0 30 20" enableBackground="new 0 0 30 20">
|
||||
<path d="M24.615,6.793H5.385c-2.761,0-3,0.239-3,3v0.414
|
||||
c0,2.762,0.239,3,3,3h7.621l1.996,2.432l1.996-2.432h7.618c2.762,0,3-0.238,3-3V9.793C27.615,7.032,27.377,6.793,24.615,6.793z"/>
|
||||
<path d="M0.806,13.646h7.619c2.762,0,3-0.238,3-3v-0.414c0-2.762,0.301-3,3.246-3h14.523"/>
|
||||
<polyline points="16.671,9.228 19.103,7.233 16.671,5.237 "/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className={coeventsClass}
|
||||
onClick={() => this.toggleMapViews('coevents')}
|
||||
>
|
||||
<svg className="coevents" x="0px" y="0px" width="30px" height="20px" viewBox="0 0 30 20" enableBackground="new 0 0 30 20">
|
||||
<polygon stroke-linejoin="round" stroke-miterlimit="10" points="19.178,20 10.823,20 10.473,14.081
|
||||
10,13.396 10,6.084 20,6.084 20,13.396 19.445,14.021 "/>
|
||||
<rect className="no-fill" x="11.4" y="7.867" width="7.2" height="3.35"/>
|
||||
<line stroke-linejoin="round" stroke-miterlimit="10" x1="12.125" y1="1" x2="12.125" y2="5.35"/>
|
||||
<rect x="11.4" y="4.271" width="1.496" height="1.079"/>
|
||||
<rect x="17.104" y="4.271" width="1.496" height="1.079"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</button>
|
||||
<button
|
||||
className={sitesClass}
|
||||
onClick={() => this.toggleMapViews('sites')}
|
||||
>
|
||||
<svg x="0px" y="0px" width="30px" height="20px" viewBox="0 0 30 20" enableBackground="new 0 0 30 20">
|
||||
<path d="M24.615,6.793H5.385c-2.761,0-3,0.239-3,3v0.414
|
||||
c0,2.762,0.239,3,3,3h7.621l1.996,2.432l1.996-2.432h7.618c2.762,0,3-0.238,3-3V9.793C27.615,7.032,27.377,6.793,24.615,6.793z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className={coeventsClass}
|
||||
onClick={() => this.toggleMapViews('coevents')}
|
||||
>
|
||||
<svg className="coevents" x="0px" y="0px" width="30px" height="20px" viewBox="0 0 30 20" enableBackground="new 0 0 30 20">
|
||||
<polygon stroke-linejoin="round" stroke-miterlimit="10" points="19.178,20 10.823,20 10.473,14.081
|
||||
10,13.396 10,6.084 20,6.084 20,13.396 19.445,14.021 "/>
|
||||
<rect className="no-fill" x="11.4" y="7.867" width="7.2" height="3.35"/>
|
||||
<line stroke-linejoin="round" stroke-miterlimit="10" x1="12.125" y1="1" x2="12.125" y2="5.35"/>
|
||||
<rect x="11.4" y="4.271" width="1.496" height="1.079"/>
|
||||
<rect x="17.104" y="4.271" width="1.496" height="1.079"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
return (<div/>)
|
||||
}
|
||||
|
||||
@@ -153,7 +148,7 @@ class Toolbar extends React.Component {
|
||||
const title = copy[this.props.language].toolbar.title;
|
||||
return (
|
||||
<div className="toolbar">
|
||||
<div className="toolbar-header" onClick={() => this.openCabinet()}><p>{title}</p></div>
|
||||
<div className="toolbar-header"><p>{title}</p></div>
|
||||
<div className="toolbar-tabs">
|
||||
{/*this.renderToolbarTab(0, 'search')*/}
|
||||
{this.renderToolbarTagRoot()}
|
||||
|
||||
@@ -273,7 +273,6 @@ Stop and start the development process in terminal after you have added your tok
|
||||
.attr('class', 'location')
|
||||
.attr('transform', (d) => {
|
||||
d.LatLng = new L.LatLng(+d.latitude, +d.longitude);
|
||||
console.log(lMap.latLngToLayerPoint(d.LatLng))
|
||||
return `translate(${lMap.latLngToLayerPoint(d.LatLng).x},
|
||||
${lMap.latLngToLayerPoint(d.LatLng).y})`;
|
||||
})
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import {
|
||||
combineReducers
|
||||
} from 'redux'
|
||||
import { combineReducers } from 'redux'
|
||||
|
||||
import domain from './domain.js'
|
||||
import app from './app.js'
|
||||
|
||||
@@ -5,8 +5,6 @@ import {
|
||||
TOGGLE_FETCHING_EVENTS,
|
||||
TOGGLE_VIEW,
|
||||
TOGGLE_TIMELINE,
|
||||
OPEN_CABINET,
|
||||
CLOSE_CABINET,
|
||||
TOGGLE_INFOPOPUP,
|
||||
TOGGLE_NOTIFICATIONS
|
||||
} from '../actions'
|
||||
@@ -27,41 +25,6 @@ function toggleFetchingEvents(uiState, action) {
|
||||
});
|
||||
}
|
||||
|
||||
function toggleView(uiState, action) {
|
||||
return Object.assign({}, uiState, {
|
||||
flags: Object.assign({}, uiState.flags, {
|
||||
isView2d: !uiState.flags.isView2d
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function toggleTimeline(uiState, action) {
|
||||
return Object.assign({}, uiState, {
|
||||
flags: Object.assign({}, uiState.flags, {
|
||||
isTimeline: !uiState.flags.isTimeline
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function closeCabinet(uiState, action) {
|
||||
return Object.assign({}, uiState, {
|
||||
flags: Object.assign({}, uiState.flags, {
|
||||
isCabinet: false
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function openCabinet(uiState, action) {
|
||||
return Object.assign({}, uiState, {
|
||||
flags: Object.assign({}, uiState.flags, {
|
||||
isCabinet: true
|
||||
}),
|
||||
components: Object.assign({}, uiState.components, {
|
||||
cabinetFileTab: action.tabNum,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function toggleInfoPopup(uiState, action) {
|
||||
return Object.assign({}, uiState, {
|
||||
flags: Object.assign({}, uiState.flags, {
|
||||
@@ -84,14 +47,6 @@ function ui(uiState = initial.ui, action) {
|
||||
return toggleFetchingDomain(uiState, action);
|
||||
case TOGGLE_FETCHING_EVENTS:
|
||||
return toggleFetchingEvents(uiState, action);
|
||||
case TOGGLE_VIEW:
|
||||
return toggleView(uiState, action);
|
||||
case TOGGLE_TIMELINE:
|
||||
return toggleTimeline(uiState, action);
|
||||
case OPEN_CABINET:
|
||||
return openCabinet(uiState, action);
|
||||
case CLOSE_CABINET:
|
||||
return closeCabinet(uiState, action);
|
||||
case TOGGLE_INFOPOPUP:
|
||||
return toggleInfoPopup(uiState, action);
|
||||
case TOGGLE_NOTIFICATIONS:
|
||||
|
||||
@@ -1,827 +0,0 @@
|
||||
@import 'icons';
|
||||
@import 'video';
|
||||
|
||||
.cabinet-wrapper {
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
color: $offwhite;
|
||||
background-color: $black;
|
||||
font-family: 'Merriweather', serif;
|
||||
transition: opacity 0.5s ease 0.1s, z-index 0.1s ease 0s;
|
||||
opacity: 1;
|
||||
z-index: $final-level;
|
||||
|
||||
&.hidden {
|
||||
transition: opacity 0.5s ease 0s, z-index 0.1s ease 0.5s;
|
||||
opacity: 0;
|
||||
z-index: $hidden;
|
||||
}
|
||||
|
||||
&.show {
|
||||
z-index: $final-level;
|
||||
}
|
||||
|
||||
.top-action {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
|
||||
button {
|
||||
font-family: 'Lato';
|
||||
font-size: $xlarge;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
background: none;
|
||||
border: none;
|
||||
color: $offwhite;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
.label {
|
||||
height: 28px;
|
||||
float: left;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
float: left;
|
||||
path, circle, polygon,
|
||||
polyline, line {
|
||||
stroke-width: 2px;
|
||||
transition: 0.2s ease;
|
||||
stroke: $offwhite;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-header {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
background: $black;
|
||||
transition: 1s ease;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Merriweather', serif;
|
||||
|
||||
.header-title {
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: $normal;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: 2s ease;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
p:first-child {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
p {
|
||||
transition: 2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-sm {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.side-menu-file-cabinet {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo-fa {
|
||||
background: url('/static/archive/img/logo-fa-square.png');
|
||||
margin: 0px 0 30px 20px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background-size: 30px;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 3s;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.cabinet-wrapper-files {
|
||||
display: block;
|
||||
background: $black;
|
||||
}
|
||||
|
||||
&.cabinet-wrapper-cover {
|
||||
background-color: $black;
|
||||
background-repeat:no-repeat;
|
||||
-webkit-background-size:cover;
|
||||
-moz-background-size:cover;
|
||||
-o-background-size:cover;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-cover {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
box-sizing: border-box;
|
||||
padding: 30px;
|
||||
border-radius: 2px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cabinet-cover-header {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
animation-name: fallFadeIn;
|
||||
animation-duration: 3s;
|
||||
|
||||
.main-title {
|
||||
.title {
|
||||
font-size: $cover-title;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.untertitle {
|
||||
font-size: $xxlarge;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-cover-content {
|
||||
width: 100%;
|
||||
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 3s;
|
||||
|
||||
.tile-row {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: calc(50% - 20px);
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
border: 1px solid $offwhite;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
font-size: $xxlarge;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: 1s ease;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
span {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 0;
|
||||
transition: 1s ease;
|
||||
background-color: rgba($black, 0.15);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 1s ease;
|
||||
letter-spacing: 0.15em;
|
||||
&:before{
|
||||
transition: 1s ease;
|
||||
background-color: rgba($black, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&.full {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
& * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tile-content {
|
||||
margin: 0 auto;
|
||||
padding: 30px 0;
|
||||
width: 200px;
|
||||
|
||||
.label {
|
||||
height: 28px;
|
||||
float: left;
|
||||
line-height: 28px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
float: left;
|
||||
path, circle, polygon,
|
||||
polyline, line {
|
||||
stroke-width: 2px;
|
||||
transition: 0.2s ease;
|
||||
stroke: $offwhite;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
width: 90px;
|
||||
margin: 0 auto;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Lato';
|
||||
font-size: $small;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
transition: 0.2s ease;
|
||||
border-bottom: 2px solid rgba($offwhite, 0);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
border-bottom: 2px solid $yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-files {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
&.file-tab-list-off {
|
||||
ul.cabinet-file-tab-list {
|
||||
transition: 0.2s ease;
|
||||
left: -300px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.cabinet-file-tab-list {
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
float: left;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding-top: 160px;
|
||||
border-right: 1px solid $darkgrey;
|
||||
background: $black;
|
||||
transition: 0.2s ease;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
li.cabinet-file-tab {
|
||||
width: calc(100% - 40px);
|
||||
text-align: left;
|
||||
border: 0;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Merriweather', serif;
|
||||
font-size: $large;
|
||||
font-weight: 100;
|
||||
border-bottom: 1px solid $darkgrey;
|
||||
transition: 0.2s ease;
|
||||
color: $offwhite;
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
color: $yellow;
|
||||
}
|
||||
|
||||
&.react-tabs__tab--selected {
|
||||
color: $yellow;
|
||||
|
||||
&:after {
|
||||
content: ' →';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
text-align: left;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
button {
|
||||
margin: 20px;
|
||||
width: calc(100% - 40px);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Lato';
|
||||
font-size: $large;
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.secondary-action button {
|
||||
padding: 20px;
|
||||
border: 1px solid $midwhite;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
border-color: $offwhite;
|
||||
background: rgba($offwhite, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.language-toggle {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.react-tabs__tab-panel {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.cabinet-file-content {
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
box-sizing: border-box;
|
||||
padding: 140px 30px 60px 30px;
|
||||
border-radius: 2px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 1.5s;
|
||||
|
||||
h1 {
|
||||
font-size: $title;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.title-separator {
|
||||
margin: 0 auto;
|
||||
width: 100px;
|
||||
border-bottom: 4px solid $yellow;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
letter-spacing: normal;
|
||||
text-transform: capitalize;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cabinet-body-text {
|
||||
padding: 10px 0;
|
||||
|
||||
.section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 20px 0;
|
||||
font-size: $xlarge;
|
||||
font-weight: 100;
|
||||
line-height: 24px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highpoint {
|
||||
font-size: $xxxlarge;
|
||||
margin: 60px 0;
|
||||
border-left: 4px solid $yellow;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
button {
|
||||
font-size: $large;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 1px solid $offwhite;
|
||||
background-size: 100%;
|
||||
color: $offwhite;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
font-family: 'Lato', Helvetica, sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&:after {
|
||||
content: ' →';
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
}
|
||||
|
||||
&.only-on-mobile {
|
||||
display: none;
|
||||
|
||||
button:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.ja {
|
||||
button { background-image: url("/static/archive/img/scene01.jpg"); }
|
||||
}
|
||||
&.pj {
|
||||
button { background-image: url("/static/archive/img/scene02.jpg"); }
|
||||
}
|
||||
&.st {
|
||||
button { background-image: url("/static/archive/img/scene03.jpg"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
min-width: 200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.action {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: $large;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
width: 100%;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 1s;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 120px;
|
||||
margin: 20px auto;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Lato';
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.document-action {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border: 0;
|
||||
outline: none;
|
||||
border-bottom: 4px solid rgba($yellow, 0);
|
||||
background: none;
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 5px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: $offwhite;
|
||||
|
||||
&:after {
|
||||
content: '↓';
|
||||
}
|
||||
&:hover {
|
||||
transition: 0.2s ease;
|
||||
border-bottom: 4px solid rgba($yellow, 1);
|
||||
color: $yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* VIDEO ON LANDING
|
||||
*/
|
||||
|
||||
.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
background: $black;
|
||||
}
|
||||
.video {
|
||||
display: block;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 56.25%; /* 56.25% = 16:9. set ratio */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
-webkit-transform-origin: 50% 0;
|
||||
transform-origin: 50% 0;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.video .wrapper {
|
||||
display: block;
|
||||
height: 300%;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.video iframe {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* VIDEO ON SITE
|
||||
*/
|
||||
|
||||
.video-responsive{
|
||||
overflow:hidden;
|
||||
padding-bottom:56.25%;
|
||||
position:relative;
|
||||
height:0;
|
||||
}
|
||||
.video-responsive iframe{
|
||||
left:0;
|
||||
top:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
/*
|
||||
* Responsiveness
|
||||
*
|
||||
*/
|
||||
|
||||
@media (max-width: 780px) {
|
||||
.cabinet-files .cabinet-file-content .cabinet-body-text .primary-action {
|
||||
&.not-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
&.only-on-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.cabinet-cover {
|
||||
.content {
|
||||
padding: 0;
|
||||
}
|
||||
.cabinet-cover-header {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.main-title {
|
||||
.title {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
.untertitle {
|
||||
font-size: $normal;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-cover-content .tile-row {
|
||||
padding: 0;
|
||||
|
||||
.tile {
|
||||
width: 60%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 0 20%;
|
||||
margin-bottom: 10px;
|
||||
font-size: $normal;
|
||||
&:first-child {
|
||||
margin-right: 20%;
|
||||
}
|
||||
&.tile00 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-files {
|
||||
ul.cabinet-file-tab-list {
|
||||
width: 100%;
|
||||
|
||||
li.cabinet-file-tab {
|
||||
text-align: center;
|
||||
font-size: $normal;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&.file-tab-list-off {
|
||||
ul.cabinet-file-tab-list {
|
||||
transition: 0.2s ease;
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-file-content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 100px 15px 40px 15px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
|
||||
.cabinet-body-text {
|
||||
padding: 10px 0;
|
||||
font-size: $xlarge;
|
||||
|
||||
p {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-action.not-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablets with very short heights */
|
||||
@media (max-height: 768px) and (min-width: 780px) {
|
||||
.cabinet-cover .content {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.cabinet-cover .cabinet-cover-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.main-title .title {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.cabinet-cover .cabinet-cover-content .tile-row .tile {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: $xlarge;
|
||||
|
||||
.tile-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1350px) {
|
||||
.cabinet-files {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
&.file-tab-list-off {
|
||||
ul.cabinet-file-tab-list {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-file-cabinet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------- Non-Retina Screens ----------- */
|
||||
@media screen
|
||||
and (min-device-width: 1200px)
|
||||
and (max-device-width: 1600px)
|
||||
and (-webkit-min-device-pixel-ratio: 1) {
|
||||
}
|
||||
|
||||
/* ----------- Retina Screens ----------- */
|
||||
@media screen
|
||||
and (min-device-width: 1200px)
|
||||
and (max-device-width: 1600px)
|
||||
and (-webkit-min-device-pixel-ratio: 2)
|
||||
and (min-resolution: 192dpi) {
|
||||
}
|
||||
@@ -10,6 +10,7 @@ export const getSites = (state) => {
|
||||
if (process.env.features.USE_SITES) return state.domain.sites
|
||||
return []
|
||||
}
|
||||
console.log(process.env)
|
||||
export const getNotifications = state => state.domain.notifications;
|
||||
export const getTagTree = state => state.domain.tags;
|
||||
export const getTagsFilter = state => state.app.filters.tags;
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
import {
|
||||
createStore,
|
||||
applyMiddleware,
|
||||
compose
|
||||
} from 'redux';
|
||||
import { createStore, applyMiddleware, compose } from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
|
||||
import rootReducer from '../reducers';
|
||||
|
||||
@@ -1,27 +1,33 @@
|
||||
// TODO: annotate sections of this state.
|
||||
|
||||
// NB: why does this canvas document need to be created?
|
||||
const canvas = document.createElement('canvas');
|
||||
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
|
||||
|
||||
const initial = {
|
||||
/*
|
||||
* The Domain or 'domain' of this state refers to the tree of data
|
||||
* available for render and display.
|
||||
* Selections and filters in the 'app' subtree will operate the domain
|
||||
* in mapStateToProps of the Dashboard, and deterimne which items
|
||||
* in the domain will get rendered by React
|
||||
*/
|
||||
domain: {
|
||||
events: [],
|
||||
narratives: [],
|
||||
locations: [],
|
||||
|
||||
categories: [],
|
||||
sites: [],
|
||||
|
||||
// Tag tree
|
||||
tags: { },
|
||||
tags: {},
|
||||
notifications: [],
|
||||
},
|
||||
|
||||
/*
|
||||
* The 'app' subtree of this state determines the data and information to be
|
||||
* displayed.
|
||||
* It may refer to those the user interacts with, by selecting,
|
||||
* fitlering and so on, which ultimately operate on the data to be displayed.
|
||||
* Additionally, some of the 'app' flags are determined by the config file
|
||||
* or by the characteristics of the client, browser, etc.
|
||||
*/
|
||||
app: {
|
||||
error: null,
|
||||
highlighted: null,
|
||||
selected: [],
|
||||
notifications: [],
|
||||
filters: {
|
||||
timerange: [
|
||||
d3.timeParse("%Y-%m-%dT%H:%M:%S")("2014-08-22T12:00:00"),
|
||||
@@ -38,7 +44,6 @@ const initial = {
|
||||
},
|
||||
base_uri: 'http://127.0.0.1:8000/', // Modify accordingly on production setup.
|
||||
isMobile: (/Mobi/.test(navigator.userAgent)),
|
||||
isWebGL: (gl && gl instanceof WebGLRenderingContext),
|
||||
language: 'en-US',
|
||||
mapAnchor: process.env.MAP_ANCHOR,
|
||||
features: {
|
||||
@@ -46,6 +51,12 @@ const initial = {
|
||||
USE_SEARCH: process.env.features.USE_SEARCH
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* The 'ui' subtree of this state refers the state of the cosmetic
|
||||
* elements of the application, such as color palettes of groups or how some
|
||||
* of the UI tools are enabled or disabled dynamically by the user
|
||||
*/
|
||||
ui: {
|
||||
style: {
|
||||
colors: {
|
||||
@@ -77,9 +88,7 @@ const initial = {
|
||||
flags: {
|
||||
isFetchingDomain: false,
|
||||
isFetchingEvents: false,
|
||||
isView2d: true,
|
||||
isTimeline: true,
|
||||
isToolbar: false,
|
||||
|
||||
isCardstack: true,
|
||||
isInfopopup: false,
|
||||
isNotification: true
|
||||
@@ -88,9 +97,6 @@ const initial = {
|
||||
formatter: d3.timeFormat("%d %b, %H:%M"),
|
||||
formatterWithYear: d3.timeFormat("%d %b %Y, %H:%M"),
|
||||
parser: d3.timeParse("%Y-%m-%dT%H:%M:%S")
|
||||
},
|
||||
components: {
|
||||
toolbarTab: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user