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 +++--- 5 files changed, 71 insertions(+), 44 deletions(-) (limited to 'client') 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 = {}) { -- cgit v1.2.3-70-g09d2