From c6413f0ddba312ec7efbc41359f844eba55095ff Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:41:08 +0200 Subject: modal... --- client/modalImage/modalImage.container.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index a637deb6..55904c40 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 { index, images } = this.state + if (!images.length) return + if (index < 0 || index >= this.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 }) } -- cgit v1.2.3-70-g09d2 From c0f42b7ec12c1731accfef5835d2c4df6a304791 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:44:05 +0200 Subject: modal hand --- client/modalImage/modalImage.container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 55904c40..20547de3 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -44,7 +44,7 @@ class ModalImage extends Component { } loadImage(index) { - const { index, images } = this.state + const { images } = this.state if (!images.length) return if (index < 0 || index >= this.images.length) return this.setState({ visible: true, index }) -- cgit v1.2.3-70-g09d2 From e52b66449c8b56abab70db03468f2f9ae7f24ec8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 21:34:00 +0200 Subject: modal hand --- client/modalImage/modalImage.container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 20547de3..7ff03a3b 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -46,7 +46,7 @@ class ModalImage extends Component { loadImage(index) { const { images } = this.state if (!images.length) return - if (index < 0 || index >= this.images.length) return + if (index < 0 || index >= images.length) return this.setState({ visible: true, index }) } -- cgit v1.2.3-70-g09d2 From dffdbe1f0f1466229adb78ecd8b3bce3b2aa7445 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 21:46:04 +0200 Subject: modal hand --- client/modalImage/modal.css | 21 +++++++++++++++++++++ client/modalImage/modalImage.container.js | 6 +++--- 2 files changed, 24 insertions(+), 3 deletions(-) (limited to 'client/modalImage/modalImage.container.js') diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index fb3c7ab5..9589b8f4 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -32,6 +32,27 @@ display: block; text-align: center; } +.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; + box-shadow: 0 1px 2px rgba(255,255,255,0.4); + transition: all 0.2s cubic-bezier(0,0,1,1); + user-select: none; +} +.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 { position: absolute; top: 0; left: 0; diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index 7ff03a3b..5479ca5f 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -83,9 +83,9 @@ class ModalImage extends Component { {caption &&
{caption}
} -
this.prev()}className='prev'>{'<'}
-
this.next()} className='next'>{'>'}
-
this.close()} className='close'>{'x'}
+
this.prev()}className='prev'>{'<'}
+
this.next()} className='next'>{'>'}
+
this.close()} className='close'>{'×'}
) } -- cgit v1.2.3-70-g09d2 From 020c015cbca3224f023e44ee72ec11b65f9f80b1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 18 Apr 2019 16:12:00 +0200 Subject: modal css --- client/actions.js | 12 +-- client/applet.js | 18 ++--- client/modalImage/modal.css | 67 +++++++++++----- client/modalImage/modalImage.container.js | 6 +- client/store.js | 12 +-- site/assets/css/css.css | 124 +++++------------------------- site/assets/css/mobile.css | 91 ++++++++++++++++++++++ site/assets/img/arrow-left-black.png | Bin 0 -> 3336 bytes site/assets/img/arrow-left.png | Bin 0 -> 2183 bytes site/assets/img/arrow-right-black.png | Bin 0 -> 3380 bytes site/assets/img/arrow-right.png | Bin 0 -> 2183 bytes site/assets/img/close-black.png | Bin 0 -> 1511 bytes site/assets/img/close.png | Bin 0 -> 3738 bytes site/content/pages/datasets/uccs/index.md | 2 +- 14 files changed, 183 insertions(+), 149 deletions(-) create mode 100644 site/assets/css/mobile.css create mode 100644 site/assets/img/arrow-left-black.png create mode 100644 site/assets/img/arrow-left.png create mode 100644 site/assets/img/arrow-right-black.png create mode 100644 site/assets/img/arrow-right.png create mode 100644 site/assets/img/close-black.png create mode 100644 site/assets/img/close.png (limited to 'client/modalImage/modalImage.container.js') 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 - case 'face_search': - return - case 'name_search': - return + // case 'face_analysis': + // return + // case 'face_search': + // return + // case 'name_search': + // return case 'dataset_list': return case 'chart': diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index 9589b8f4..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,12 +25,14 @@ align-items: center; } .modal img { - max-width: 90vw; + max-width: 85vw; max-height: 90vh; } .modal .caption { display: block; text-align: center; + background: black; + padding: 10px; } .modal .prev span, .modal .next span, @@ -53,38 +55,63 @@ background: #000; box-shadow: 0 1px 2px rgba(255,255,255,0.6); } -.modal .prev { +.modal .prev, +.modal .next, +.modal .close { position: absolute; - top: 0; left: 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 { - position: absolute; - top: 0; right: 0; - width: 10%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - color: white; - font-size: 40px; - cursor: pointer; + 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 5479ca5f..d6271d61 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -83,9 +83,9 @@ class ModalImage extends Component { {caption &&
{caption}
} -
this.prev()}className='prev'>{'<'}
-
this.next()} className='next'>{'>'}
-
this.close()} className='close'>{'×'}
+
this.prev()} className='prev' aria-label='Previous image' alt='Previous image'>
+
this.next()} className='next' aria-label='Next image' alt='Next image'>
+
this.close()} className='close' aria-label='Close' alt='Close'>
) } 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 = {}) { diff --git a/site/assets/css/css.css b/site/assets/css/css.css index a5e36542..48816fef 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -1,4 +1,10 @@ * { box-sizing: border-box; outline: 0; } +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.001s !important; + transition-duration: 0.001s !important; + } +} html, body { margin: 0; padding: 0; @@ -227,7 +233,7 @@ h5 { text-transform: uppercase; letter-spacing: 2px; } -.right-sidebar ul li a{ +.right-sidebar ul li a { border-bottom: 0; } th, .gray { @@ -796,30 +802,29 @@ section.fullwidth .image { padding: 0; } .dataset-list .sort-options:before { - content: 'Browse list by '; + content: 'Browse list by:'; opacity: 0.7; - margin-right: 0px; + display: block; + padding-bottom: 10px; } .dataset-list .sort-options li { display: inline-block; margin: 0; - padding: 0; cursor: pointer; margin-right: 20px; font-size: 16px; -} -.dataset-list .sort-options li:before { - content: '_'; - opacity: 0; - margin-right: 10px; + transition: background 0.2s; + background: #888; + color: #fff; + padding: 4px 6px; + border-radius: 4px; + font-weight: 500; + font-size: 14px; + cursor: pointer; } .dataset-list .sort-options li.active { - border-bottom: 1px solid; -} -.dataset-list .sort-options li.active:before { - content: '>'; - opacity: 1; - margin-right: 10px; + background: #fff; + color: #222; } .dataset_list .applet { margin-bottom: 15px; @@ -1131,92 +1136,3 @@ li p { border-radius: 5px; transition: all 0.1s; } - -/* iphone/ipad css */ -@media all and (max-device-width: 1024px) { - /* header / footer */ - .slogan { - padding-left: 10px; - } - header .splash { - display: none; - } - header .links a { - margin-right: 10px; - } - - /* content */ - - .intro_section { - padding: 50px 0 20px 0; - } - .intro_section .hero_desc { - font-size: 28px; - line-height: 50px; - margin-bottom: 20px; - } - .intro_section .inner { - margin: 0; - max-width: 100%; - padding: 20px; - } - .intro_section .hero_subdesc { - max-width: 100%; - } - section h1, section h2, section h3, section h4, section h5, section h6, section p { - max-width: 100%; - } - section { - width: 100%; - padding: 0 10px; - } - .meta { - margin-right: 0px; - margin-bottom: 10px; - } - .modal img { - max-width: 100%; - } - th { - overflow: hidden; - text-overflow: ellipsis; - } - .citationHeader { - - } - section.wide { - width: 100%; - } - .map, .map .applet { - height: 360px; - } -} - -/* iphone-specific */ -@media all and (max-device-width: 640px) { - .right-sidebar { - float: none; - width: 100%; - border: 0; - margin: 0; - padding: 0 2px; - border-bottom: 1px solid #333; - } - .map, .map .applet { - height: 360px; - } - .citationBrowser input.q { - max-width: 180px; - } - .columns { - flex-direction: column; - } - .columns .column { - margin: 0; - } - .columns-2 .column, - .columns-3 .column, - .columns-4 .column { - width: 100%; - } -} \ No newline at end of file diff --git a/site/assets/css/mobile.css b/site/assets/css/mobile.css new file mode 100644 index 00000000..6a742277 --- /dev/null +++ b/site/assets/css/mobile.css @@ -0,0 +1,91 @@ +/* MOBILE - iphone/ipad css */ + +@media all and (max-device-width: 1024px) { + /* header / footer */ + .slogan { + padding-left: 10px; + } + header .splash { + display: none; + } + header .links a { + margin-right: 14px; + font-size: 14px; + } + + /* MOBILE content */ + + .intro_section { + padding: 50px 0 20px 0; + } + .intro_section .hero_desc { + font-size: 28px; + line-height: 50px; + margin-bottom: 20px; + } + .intro_section .inner { + margin: 0; + max-width: 100%; + padding: 20px; + } + .intro_section .hero_subdesc { + max-width: 100%; + } + section h1, section h2, section h3, section h4, section h5, section h6, section p { + max-width: 100%; + } + section { + width: 100%; + padding: 0 10px; + } + .meta { + margin-right: 0px; + margin-bottom: 10px; + } + .modal img { + max-width: 100%; + } + th { + overflow: hidden; + text-overflow: ellipsis; + } + .citationHeader { + + } + section.wide { + width: 100%; + } + .map, .map .applet { + height: 360px; + } + + /* MOBILE datasets page */ +} + +/* iphone-specific */ +@media all and (max-device-width: 640px) { + .right-sidebar { + float: none; + width: 100%; + border: 0; + margin: 0 0 14px 0; + padding: 0 2px; + } + .map, .map .applet { + height: 360px; + } + .citationBrowser input.q { + max-width: 180px; + } + .columns { + flex-direction: column; + } + .columns .column { + margin: 0; + } + .columns-2 .column, + .columns-3 .column, + .columns-4 .column { + width: 100%; + } +} \ No newline at end of file diff --git a/site/assets/img/arrow-left-black.png b/site/assets/img/arrow-left-black.png new file mode 100644 index 00000000..377a696f Binary files /dev/null and b/site/assets/img/arrow-left-black.png differ diff --git a/site/assets/img/arrow-left.png b/site/assets/img/arrow-left.png new file mode 100644 index 00000000..3ddd4781 Binary files /dev/null and b/site/assets/img/arrow-left.png differ diff --git a/site/assets/img/arrow-right-black.png b/site/assets/img/arrow-right-black.png new file mode 100644 index 00000000..12dbe37c Binary files /dev/null and b/site/assets/img/arrow-right-black.png differ diff --git a/site/assets/img/arrow-right.png b/site/assets/img/arrow-right.png new file mode 100644 index 00000000..0cb2588f Binary files /dev/null and b/site/assets/img/arrow-right.png differ diff --git a/site/assets/img/close-black.png b/site/assets/img/close-black.png new file mode 100644 index 00000000..191442ac Binary files /dev/null and b/site/assets/img/close-black.png differ diff --git a/site/assets/img/close.png b/site/assets/img/close.png new file mode 100644 index 00000000..529d7302 Binary files /dev/null and b/site/assets/img/close.png differ diff --git a/site/content/pages/datasets/uccs/index.md b/site/content/pages/datasets/uccs/index.md index b6073384..de2cec4d 100644 --- a/site/content/pages/datasets/uccs/index.md +++ b/site/content/pages/datasets/uccs/index.md @@ -28,7 +28,7 @@ The UCCS dataset includes over 1,700 unique identities, most of which are studen ![caption: The location at University of Colorado Colorado Springs where students were surreptitiously photographed with a long-range surveillance camera for use in a defense and intelligence agency funded research project on face recognition. Image: Google Maps](assets/uccs_map_aerial.jpg) -The long-range surveillance images in the UnContsrained College Students dataset were taken using a Canon 7D 18-megapixel digital camera fitted with a Sigma 800mm F5.6 EX APO DG HSM telephoto lens and pointed out an office window across the university's West Lawn. The students were photographed from a distance of approximately 150 meters through an office window. "The camera [was] programmed to start capturing images at specific time intervals between classes to maximize the number of faces being captured."[^sapkota_boult] +The long-range surveillance images in the UnConsrained College Students dataset were taken using a Canon 7D 18-megapixel digital camera fitted with a Sigma 800mm F5.6 EX APO DG HSM telephoto lens and pointed out an office window across the university's West Lawn. The students were photographed from a distance of approximately 150 meters through an office window. "The camera [was] programmed to start capturing images at specific time intervals between classes to maximize the number of faces being captured."[^sapkota_boult] Their setup made it impossible for students to know they were being photographed, providing the researchers with realistic surveillance images to help build face recognition systems for real world applications for defense, intelligence, and commercial partners. ![caption: Example images from the UnConstrained College Students Dataset. ](assets/uccs_grid.jpg) -- cgit v1.2.3-70-g09d2