summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/actions.js12
-rw-r--r--client/applet.js18
-rw-r--r--client/chart/pie.charts.js4
-rw-r--r--client/index.js1
-rw-r--r--client/map/index.js9
-rw-r--r--client/modalImage/modal.css86
-rw-r--r--client/modalImage/modalImage.container.js18
-rw-r--r--client/store.js12
8 files changed, 112 insertions, 48 deletions
diff --git a/client/actions.js b/client/actions.js
index 7007eb76..4ed6660d 100644
--- a/client/actions.js
+++ b/client/actions.js
@@ -1,9 +1,9 @@
-import * as faceAnalysis from './faceAnalysis/faceAnalysis.actions'
-import * as faceSearch from './faceSearch/faceSearch.actions'
-import * as nameSearch from './nameSearch/nameSearch.actions'
+// import * as faceAnalysis from './faceAnalysis/faceAnalysis.actions'
+// import * as faceSearch from './faceSearch/faceSearch.actions'
+// import * as nameSearch from './nameSearch/nameSearch.actions'
export {
- faceAnalysis,
- faceSearch,
- nameSearch,
+ // faceAnalysis,
+ // faceSearch,
+ // nameSearch,
}
diff --git a/client/applet.js b/client/applet.js
index db95168a..ebc0e3fc 100644
--- a/client/applet.js
+++ b/client/applet.js
@@ -1,8 +1,8 @@
import React, { Component } from 'react'
-import { Container as FaceSearchContainer } from './faceSearch'
-import { Container as FaceAnalysisContainer } from './faceAnalysis'
-import { Container as NameSearchContainer } from './nameSearch'
+// import { Container as FaceSearchContainer } from './faceSearch'
+// import { Container as FaceAnalysisContainer } from './faceAnalysis'
+// import { Container as NameSearchContainer } from './nameSearch'
import { Container as DatasetListContainer } from './datasetList'
import { CitationsTable, FileTable } from './table'
import { CountriesByYear, PieCharts } from './chart'
@@ -11,12 +11,12 @@ export default class Applet extends Component {
render() {
// console.log(this.props.payload.cmd)
switch (this.props.payload.cmd) {
- case 'face_analysis':
- return <FaceAnalysisContainer {...this.props} />
- case 'face_search':
- return <FaceSearchContainer {...this.props} />
- case 'name_search':
- return <NameSearchContainer {...this.props} />
+ // case 'face_analysis':
+ // return <FaceAnalysisContainer {...this.props} />
+ // case 'face_search':
+ // return <FaceSearchContainer {...this.props} />
+ // case 'name_search':
+ // return <NameSearchContainer {...this.props} />
case 'dataset_list':
return <DatasetListContainer {...this.props} />
case 'chart':
diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js
index 84e85c3a..c3b94b7b 100644
--- a/client/chart/pie.charts.js
+++ b/client/chart/pie.charts.js
@@ -87,7 +87,7 @@ class PieCharts extends Component {
height: countryRows.length < 4 ? 316 : 336,
}}
/>
- <span className='chartCaption'>{paper.name}{' dataset citations by country'}</span>
+ <span className='chartCaption'>{citations.length + ' verified ' + paper.name + ' dataset citations by country'}</span>
</div>
<div>
<C3Chart
@@ -107,7 +107,7 @@ class PieCharts extends Component {
height: 316,
}}
/>
- <span className='chartCaption'>{paper.name}{' dataset citations by organization type'}</span>
+ <span className='chartCaption'>{citations.length + ' verified ' + paper.name + ' dataset citations by organization type'}</span>
</div>
</div>
)
diff --git a/client/index.js b/client/index.js
index 10ed8563..c003a8b3 100644
--- a/client/index.js
+++ b/client/index.js
@@ -24,7 +24,6 @@ function appendModalImage() {
const el = document.createElement('div')
document.body.appendChild(el)
ReactDOM.render(<ModalImage />, el)
- console.log(el)
}
function fetchDataset(payload) {
diff --git a/client/map/index.js b/client/map/index.js
index 475ba3c6..29fc2286 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -150,6 +150,15 @@ export default function append(el, payload) {
el.removeChild(mapCover)
}
})
+ mapCover.querySelector('div').addEventListener('touchstart', (e) => {
+ e.preventDefault()
+ })
+ mapCover.querySelector('div').addEventListener('tap', () => {
+ map.scrollWheelZoom.enable()
+ if (mapCover.parentNode === el) {
+ el.removeChild(mapCover)
+ }
+ })
function stopPropagation(e) {
e.stopPropagation()
}
diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css
index d9180125..3ac9237e 100644
--- a/client/modalImage/modal.css
+++ b/client/modalImage/modal.css
@@ -1,7 +1,7 @@
.modal {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
- background: rgba(0,0,0,0.8);
+ background: rgba(0,0,0,0.9);
color: white;
display: flex;
justify-content: center;
@@ -25,45 +25,93 @@
align-items: center;
}
.modal img {
- max-width: 80vw;
- max-height: 80vh;
+ max-width: 85vw;
+ max-height: 90vh;
}
.modal .caption {
display: block;
text-align: center;
+ background: black;
+ padding: 10px;
}
-.modal .prev {
- position: absolute;
- top: 0; left: 0;
- width: 10%;
- height: 100%;
+.modal .prev span,
+.modal .next span,
+.modal .close span {
+ background: #222;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ text-align: center;
display: flex;
justify-content: center;
align-items: center;
- color: white;
- font-size: 40px;
- cursor: pointer;
+ box-shadow: 0 1px 2px rgba(255,255,255,0.4);
+ transition: all 0.2s cubic-bezier(0,0,1,1);
+ user-select: none;
}
-.modal .next {
+.desktop .modal .prev:hover span,
+.desktop .modal .prev:hover span,
+.desktop .modal .prev:hover span {
+ background: #000;
+ box-shadow: 0 1px 2px rgba(255,255,255,0.6);
+}
+.modal .prev,
+.modal .next,
+.modal .close {
position: absolute;
- top: 0; right: 0;
- width: 10%;
+ top: 0;
+ padding: 20px;
+ width: 8%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
- color: white;
- font-size: 40px;
cursor: pointer;
+ transition: all 0.1s cubic-bezier(0,0,0,1);
}
+.modal .prev {
+ left: 0;
+}
+.modal .next {
+ right: 0;
+}
+.modal .prev img,
+.modal .next img {
+ max-width: 100%;
+ max-height: 100%;
+}
+
.modal .close {
position: absolute;
top: 0; right: 0;
- width: 10vw; height: 10vw;
+ width: 80px;
+ height: 80px;
+ max-width: 10vw;
+ max-height: 10vw;
display: flex;
justify-content: center;
align-items: center;
- color: white;
- font-size: 40px;
cursor: pointer;
+ transition: all 0.1s cubic-bezier(0,0,0,1);
+ padding: 20px;
+}
+.modal .close img {
+ width: 100%;
+ height: 100%;
+}
+
+.desktop .modal .prev:hover {
+ width: 9%;
+ left: -8px;
+}
+.desktop .modal .next:hover {
+ width: 9%;
+ right: -8px;
+}
+.desktop .modal .close:hover {
+ padding: 10px;
+}
+
+@media all and (max-device-width: 1024px) {
+
} \ No newline at end of file
diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js
index a637deb6..d6271d61 100644
--- a/client/modalImage/modalImage.container.js
+++ b/client/modalImage/modalImage.container.js
@@ -10,7 +10,7 @@ import csv from 'parse-csv'
class ModalImage extends Component {
state = {
- visible: true,
+ visible: false,
images: [],
index: 0,
}
@@ -26,8 +26,11 @@ class ModalImage extends Component {
if (document.activeElement && document.activeElement !== document.body) {
return null
}
- // console.log(e.keyCode)
+ console.log(e.keyCode)
switch (e.keyCode) {
+ case 27: // esc
+ this.close()
+ break
case 37: // left
this.prev()
break
@@ -41,16 +44,21 @@ class ModalImage extends Component {
}
loadImage(index) {
+ const { images } = this.state
+ if (!images.length) return
+ if (index < 0 || index >= images.length) return
this.setState({ visible: true, index })
}
prev() {
const { index, images } = this.state
+ if (!images.length) return
this.setState({ index: (images.length + index - 1) % images.length })
}
next() {
const { index, images } = this.state
+ if (!images.length) return
this.setState({ index: (index + 1) % images.length })
}
@@ -75,9 +83,9 @@ class ModalImage extends Component {
{caption && <div class='caption'>{caption}</div>}
</div>
</div>
- <div onClick={() => this.prev()}className='prev'>{'<'}</div>
- <div onClick={() => this.next()} className='next'>{'>'}</div>
- <div onClick={() => this.close()} className='close'>{'x'}</div>
+ <div onClick={() => this.prev()} className='prev' aria-label='Previous image' alt='Previous image'><img src='/assets/img/arrow-left.png' /></div>
+ <div onClick={() => this.next()} className='next' aria-label='Next image' alt='Next image'><img src='/assets/img/arrow-right.png' /></div>
+ <div onClick={() => this.close()} className='close' aria-label='Close' alt='Close'><img src='/assets/img/close.png' /></div>
</div>
)
}
diff --git a/client/store.js b/client/store.js
index e896bc58..a404a19d 100644
--- a/client/store.js
+++ b/client/store.js
@@ -1,14 +1,14 @@
import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
import thunk from 'redux-thunk'
-import faceAnalysisReducer from './faceAnalysis/faceAnalysis.reducer'
-import faceSearchReducer from './faceSearch/faceSearch.reducer'
-import nameSearchReducer from './nameSearch/nameSearch.reducer'
+// import faceAnalysisReducer from './faceAnalysis/faceAnalysis.reducer'
+// import faceSearchReducer from './faceSearch/faceSearch.reducer'
+// import nameSearchReducer from './nameSearch/nameSearch.reducer'
const rootReducer = combineReducers({
- faceAnalysis: faceAnalysisReducer,
- faceSearch: faceSearchReducer,
- nameSearch: nameSearchReducer,
+ // faceAnalysis: faceAnalysisReducer,
+ // faceSearch: faceSearchReducer,
+ // nameSearch: nameSearchReducer,
})
function configureStore(initialState = {}) {
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 23:46:29 +0000