Added close button for popovers #14

MapcreatorIO · Jul 19, 2016 · cfa9541 · cfa9541
1 parent ce8a765
commit cfa9541
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/app/js/classes/popup.js b/app/js/classes/popup.js
@@ -303,9 +303,17 @@ Popup.prototype.generatePopover = function(popup, title_html, info_html, media_h
 	popup.classList.add("m4n-popover");
 
 	var triangle = helpers.createElement("div", "m4n-popover-triangle");
+	var header = helpers.createElement("div", "m4n-popover-header");
+	var close = helpers.createElement("div", "m4n-popover-close", {
+		"click": function() { this.hide(true); }.bind(this),
+		"touchend": function() { this.hide(true); }.bind(this)
+	});
+
+	header.appendChild(close);
+	header.appendChild(title_html);
 
 	popup.appendChild(triangle);
-	popup.appendChild(title_html);
+	popup.appendChild(header);
 	popup.appendChild(media_html);
 	popup.appendChild(info_html);
 

diff --git a/app/less/popups/popover.less b/app/less/popups/popover.less
@@ -15,7 +15,7 @@
   display: none;
 }
 
-.m4n-popover .m4n-title {
+.m4n-popover .m4n-popover-header {
   font-size: 14px;
   line-height: 1.5;
   padding: 10px;
@@ -83,4 +83,22 @@
   background: white;
   box-shadow: -1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.2);
   z-index: -1;
+}
+
+.m4n-popover-close {
+  float: right;
+  color: #888;
+  text-align: center;
+  font-family: "Arial", serif;
+  font-weight: bold;
+  cursor: pointer;
+  top: 0;
+}
+
+.m4n-popover-close:hover {
+  color: #555;
+}
+
+.m4n-popover-close::before {
+  content: '✕';
 }