From f58d41731fc07d94d594d5582aef203564f990ec Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 2 Apr 2019 20:35:50 +0200
Subject: modal image gallery

---
 client/modalImage/modal.css | 69 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 client/modalImage/modal.css

(limited to 'client/modalImage/modal.css')

diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css
new file mode 100644
index 00000000..d9180125
--- /dev/null
+++ b/client/modalImage/modal.css
@@ -0,0 +1,69 @@
+.modal {
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0,0,0,0.8);
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -9999999;
+  transition: opacity 0.2s cubic-bezier(0,0,1,1);
+}
+.modal.visible {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: 999999999;
+}
+.modal .inner {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal img {
+  max-width: 80vw;
+  max-height: 80vh;
+}
+.modal .caption {
+  display: block;
+  text-align: center;
+}
+.modal .prev {
+  position: absolute;
+  top: 0; left: 0;
+  width: 10%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 40px;
+  cursor: pointer;
+}
+.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;
+}
+.modal .close {
+  position: absolute;
+  top: 0; right: 0;
+  width: 10vw; height: 10vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 40px;
+  cursor: pointer;
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From c6413f0ddba312ec7efbc41359f844eba55095ff Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 2 Apr 2019 20:41:08 +0200
Subject: modal...

---
 client/modalImage/modal.css               |  4 ++--
 client/modalImage/modalImage.container.js | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

(limited to 'client/modalImage/modal.css')

diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css
index d9180125..fb3c7ab5 100644
--- a/client/modalImage/modal.css
+++ b/client/modalImage/modal.css
@@ -25,8 +25,8 @@
   align-items: center;
 }
 .modal img {
-  max-width: 80vw;
-  max-height: 80vh;
+  max-width: 90vw;
+  max-height: 90vh;
 }
 .modal .caption {
   display: block;
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 dffdbe1f0f1466229adb78ecd8b3bce3b2aa7445 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
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/modal.css')

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 && <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'><span>{'<'}</span></div>
+        <div onClick={() => this.next()} className='next'><span>{'>'}</span></div>
+        <div onClick={() => this.close()} className='close'><span>{'×'}</span></div>
       </div>
     )
   }
-- 
cgit v1.2.3-70-g09d2