| <script> |
| window.SkiaBehaviors = window.SkiaBehaviors || function() { |
| var bh = {}; |
| bh.StatusPopup = { |
| show: function() { |
| // If we are on a small screen (e.g. mobile), make the popup |
| // take up more space than on a desktop. |
| if (document.documentElement.clientWidth < 600) { |
| this.style["height"] = "70vh"; |
| this.style["width"] = "70vw"; |
| this.style["top"] = "15vh"; |
| this.style["left"] = "15vw"; |
| } |
| // Stop propegation of any taps on the popup, so they don't make |
| // it go away |
| this.addEventListener("tap", function(e){ |
| e.stopPropagation(); |
| }); |
| // If the user taps anywhere else, remove the popup. |
| document.body.addEventListener("tap", this.hide.bind(this)); |
| this.style["display"] = "block"; |
| if (this.showCallback) { |
| this.showCallback(); |
| } |
| }, |
| hide: function() { |
| document.body.removeEventListener("tap", this.hide); |
| this.style["display"] = "none"; |
| if (this.hideCallback) { |
| this.hideCallback(); |
| } |
| }, |
| }; |
| return bh; |
| }(); |
| </script> |
| |
| <dom-module id="status-popup"> |
| <template> |
| <style> |
| :host { |
| position: fixed; |
| box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), |
| 0 6px 30px 5px rgba(0, 0, 0, 0.12), |
| 0 8px 10px -5px rgba(0, 0, 0, 0.4); |
| padding: 15px; |
| border-radius: 10px; |
| background-color: white; |
| /* Default to desktop size of 40% of viewport */ |
| top: 30vh; |
| left: 30vw; |
| height: 40vh; |
| width: 40vw; |
| overflow: auto; |
| z-index: 5; |
| } |
| </style> |
| </template> |
| </dom-module> |