modal css

14 files changed, 183 insertions, 149 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/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 && <div class='caption'>{caption}</div>}
           </div>
         </div>
-        <div onClick={() => this.prev()}className='prev'><span>{'<'}</span></div>
-        <div onClick={() => this.next()} className='next'><span>{'>'}</span></div>
-        <div onClick={() => this.close()} className='close'><span>{'×'}</span></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 = {}) {
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
--- /dev/null
+++ b/site/assets/img/arrow-left-black.png
diff --git a/site/assets/img/arrow-left.png b/site/assets/img/arrow-left.png
new file mode 100644
index 00000000..3ddd4781
--- /dev/null
+++ b/site/assets/img/arrow-left.png
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
--- /dev/null
+++ b/site/assets/img/arrow-right-black.png
diff --git a/site/assets/img/arrow-right.png b/site/assets/img/arrow-right.png
new file mode 100644
index 00000000..0cb2588f
--- /dev/null
+++ b/site/assets/img/arrow-right.png
diff --git a/site/assets/img/close-black.png b/site/assets/img/close-black.png
new file mode 100644
index 00000000..191442ac
--- /dev/null
+++ b/site/assets/img/close-black.png
diff --git a/site/assets/img/close.png b/site/assets/img/close.png
new file mode 100644
index 00000000..529d7302
--- /dev/null
+++ b/site/assets/img/close.png
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)