Merge pull request #436 from statonlab/add-overlay-expand

Expand observation details when clicking on image
statonlab · Mar 13, 2019 · 2a63162 · 2a63162
2 parents d13fc82 + c788977
commit 2a63162
Show file tree

Hide file tree

Showing 18 changed files with 44 additions and 22 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/0.825a5c484855705e19a3.js b/public/js/0.825a5c484855705e19a3.js
diff --git a/public/js/0.99d5c823070e6284ffaa.js b/public/js/0.99d5c823070e6284ffaa.js
diff --git a/public/js/1.a266fdc902bcbfb78c0d.js b/public/js/1.a266fdc902bcbfb78c0d.js
diff --git a/public/js/1.fdf7ae7a5834c3106b49.js b/public/js/1.fdf7ae7a5834c3106b49.js
diff --git a/public/js/10.13b19ddc3e10d7b970e6.js b/public/js/10.13b19ddc3e10d7b970e6.js
diff --git a/public/js/10.eb3fefb19e1aec5b6a34.js b/public/js/10.eb3fefb19e1aec5b6a34.js
diff --git a/public/js/5.0fcb379126c6dff92351.js b/public/js/5.0fcb379126c6dff92351.js
diff --git a/public/js/5.7ff1c5eaa7fec20ea9ae.js b/public/js/5.7ff1c5eaa7fec20ea9ae.js
diff --git a/public/js/7.31711383b283780003ff.js b/public/js/7.31711383b283780003ff.js
diff --git a/public/js/7.628127b85601a2003538.js b/public/js/7.628127b85601a2003538.js
diff --git a/public/js/8.86ef8961eaaf3c5048fd.js b/public/js/8.86ef8961eaaf3c5048fd.js
diff --git a/public/js/8.e3c466dcae3156837f34.js b/public/js/8.e3c466dcae3156837f34.js
diff --git a/public/js/manifest.js b/public/js/manifest.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
     "/js/vendor.js": "/js/vendor.js?id=da80df012039296cf353",
     "/js/app.js": "/js/app.js?id=77c4fd7378b4f0f4e511",
-    "/css/app.css": "/css/app.css?id=e14a98d124f4aef3659d",
+    "/css/app.css": "/css/app.css?id=076495e51d1dc3726549",
     "/js/admin.js": "/js/admin.js?id=75c7242ae22087a5578f",
-    "/js/manifest.js": "/js/manifest.js?id=68e6367db4de00aa60cc"
+    "/js/manifest.js": "/js/manifest.js?id=9eee0aada8d13e2cf483"
 }
diff --git a/resources/assets/js/components/ObservationCard.jsx b/resources/assets/js/components/ObservationCard.jsx
@@ -101,8 +101,7 @@ export default class ObservationCard extends Component {
       this.slowCloseSlideContent()
 
       return
-    }
-    else if (slide) {
+    } else if (slide) {
       this.setState({
         slideContent: label
       })
@@ -304,8 +303,7 @@ export default class ObservationCard extends Component {
         this.setState({
           correctMarks: this.state.correctMarks - 1
         })
-      }
-      else {
+      } else {
         this.setState({
           incorrectMarks: this.state.incorrectMarks - 1
         })
@@ -323,8 +321,7 @@ export default class ObservationCard extends Component {
     if (this.state.confirmation.id !== -1) {
       if (this.state.confirmation.correct) {
         this.setState({correctMarks: this.state.correctMarks - 1})
-      }
-      else {
+      } else {
         this.setState({incorrectMarks: this.state.incorrectMarks - 1})
       }
     }
@@ -341,8 +338,7 @@ export default class ObservationCard extends Component {
         this.setState({
           correctMarks: this.state.correctMarks + 1
         })
-      }
-      else {
+      } else {
         this.setState({
           incorrectMarks: this.state.incorrectMarks + 1
         })
@@ -473,11 +469,22 @@ export default class ObservationCard extends Component {
           </header>
           <div className="relative-block">
             <Spinner visible={this.state.loading}/>
-            <div className="has-bg-image relative-block">
-              <div className="card-image"
-                   style={{
-                     backgroundImage: `url(${observation.thumbnail || '/images/placeholder.png'})`
+            <div className="has-bg-image relative-block is-positioned-relatively">
+              <div
+                className="card-image img-bg-zoom"
+                style={{
+                  backgroundImage: `url(${observation.thumbnail || '/images/placeholder.png'})`
+                }}>
+                <a href="javascript:;"
+                   className="sidebar-img-overlay flexbox flex-v-center flex-h-center flex-column z-10"
+                   onClick={() => {
+                     this.setState({showDetailsModal: true})
                    }}>
+                  <i className="fa fa-photo"></i>
+                  <div className="has-text-centered">
+                    Click for More Details
+                  </div>
+                </a>
               </div>
             </div>
 

diff --git a/resources/assets/sass/_card.scss b/resources/assets/sass/_card.scss
@@ -135,3 +135,14 @@ a.card-header-title {
     margin-top: auto;
   }
 }
+
+.img-bg-zoom {
+  transition: background-size 250ms linear;
+  &:hover {
+    background-size: 110%;
+  }
+}
+
+.z-10 {
+  z-index: 10!important;
+}
diff --git a/resources/assets/sass/_layout.scss b/resources/assets/sass/_layout.scss
@@ -321,3 +321,7 @@ a.box {
 .has-no-shadow {
   box-shadow: none !important;
 }
+
+.cursor-pointer {
+  cursor: pointer;
+}