Moved Q&A section into a Help menu

.github/config.yml

@@ -26,4 +26,4 @@ firstPRMergeComment: |
  Now that you've completed this, you can help someone else take their first step!
  See: [Public Lab's coding community!](https://code.publiclab.org)
 
-# It is recommended to include as many gifs and emojis as possible
+# It is recommended to include as many gifs and emojis as possible

dist/infragram.css

@@ -1,120 +1,162 @@
 /* https://github.com/theleagueof/junction */
 @font-face {
-  font-family:'junctionregular';
-  src:url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot");
-  src:url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot?#iefix") format("embedded-opentype"),
-      url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.woff") format("woff"),
-      url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.ttf") format("truetype"),
-      url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.svg#junctionregular") format("svg");
+  font-family: "junctionregular";
+  src: url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot");
+  src: url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot?#iefix")
+      format("embedded-opentype"),
+    url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.woff")
+      format("woff"),
+    url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.ttf")
+      format("truetype"),
+    url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.svg#junctionregular")
+      format("svg");
 }
 
-h1,h2,h3,h4,h5,h6{
-  font-family: junctionregular, "lucida grande", "lucida sans console", sans-serif;
-  font-weight:normal
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: junctionregular, "lucida grande", "lucida sans console",
+    sans-serif;
+  font-weight: normal;
 }
 
-body { padding-top: 20px; }
-span.group { display: inline-block; }
+body {
+  padding-top: 20px;
+}
+span.group {
+  display: inline-block;
+}
 
 footer.footer {
- clear: both;
- padding-top: 10px;
+  clear: both;
+  padding-top: 10px;
 }
 
 div#image-container {
- text-align: center;
+  text-align: center;
 }
 
 div#image-container canvas#image {
- margin: 0px auto;
+  margin: 0px auto;
 }
 
 div#colorbar-container {
- display: inline-block;
- width: 70%;
+  display: inline-block;
+  width: 70%;
 }
 
 div#colorbar-container canvas#colorbar {
- width: 80%;
- height: 2em;
- vertical-align: middle;
+  width: 80%;
+  height: 2em;
+  vertical-align: middle;
 }
 
 #toolbar {
-  clear:both;
-  background:#eee;
-  margin-bottom:10px;
+  clear: both;
+  background: #eee;
+  margin-bottom: 10px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-
 }
 #toolbar .zone {
-  margin:6px 0 6px 6px;
-  padding:0 12px 0 6px;
-  border-right:1px solid #ddd;
-  float:left;
+  margin: 6px 0 6px 6px;
+  padding: 0 12px 0 6px;
+  border-right: 1px solid #ddd;
+  float: left;
 }
 #toolbar .zone.last {
-  border:none;
+  border: none;
 }
 #toolbar .zone p {
-  color:#bbb;
-  font-weight:bold;
-  font-size:10px;
-  margin-bottom:0;
+  color: #bbb;
+  font-weight: bold;
+  font-size: 10px;
+  margin-bottom: 0;
 }
 
 #image {
-  background:#ddd;
-  width:800px;
-  height:600px;
+  background: #ddd;
+  width: 800px;
+  height: 600px;
 }
 
-@media (max-width: 700px){
+@media (max-width: 700px) {
   #image {
-    width:100%;
-    height:auto;
+    width: 100%;
+    height: auto;
   }
 }
 #overlay-container {
-  position:absolute;
- display: inline-block;
-  overflow:hidden;
-  width:800px;
-  height:600px;
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  width: 800px;
+  height: 600px;
 }
 
 #overlay-save-btn {
-  margin-top:2px;
+  margin-top: 2px;
 }
 
-#overlay-img {
-  opacity:0.5;
+#-img {
+  opacity: 0.5;
 }
 
-ul.dropdown-menu li:hover{
+ul.dropdown-menu li:hover {
   cursor: pointer;
   background-color: #e0e0e0;
 }
 #file-sel {
-  position:absolute; 
-  left:0;
-  width:55px;
-  height:44px;
-  opacity:0;
+  position: absolute;
+  left: 0;
+  width: 55px;
+  height: 44px;
+  opacity: 0;
 }
 .vr #toolbar {
-  position:absolute;
-  left:0;
-  top:0;
-  width:100%;
-  z-index:99;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 99;
 }
 .vr .canvas {
-  width:50% !important;
-  height:100% !important;
-  left:0;
-  top:100px;
-  position:absolute;
-}
+  width: 50% !important;
+  height: 100% !important;
+  left: 0;
+  top: 100px;
+  position: absolute;
+}
+#helping_hands {
+  border-color: #2e6da4;
+  background-color: #337ab7; /* Green */
+  border: none;
+  color: white;
+  padding: 12px 30px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  display: inline-block;
+  margin-bottom: 10;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin-top: 20px;
+  margin-left: 10px;
+  /*padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+
+  margin-top: 10;
+}

dragndrop.js

@@ -0,0 +1,67 @@
+document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
+    const dropZoneElement = inputElement.closest("#image-container");
+
+    dropZoneElement.addEventListener("click", (e) => {
+      inputElement.click();
+    });
+
+    inputElement.addEventListener("change", (e) => {
+      if (inputElement.files.length) {
+        updateThumbnail(dropZoneElement, inputElement.files[0]);
+      }
+    });
+
+    dropZoneElement.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      dropZoneElement.classList.add("drop-zone--over");
+    });
+
+    ["dragleave", "dragend"].forEach((type) => {
+      dropZoneElement.addEventListener(type, (e) => {
+        dropZoneElement.classList.remove("drop-zone--over");
+      });
+    });
+
+    dropZoneElement.addEventListener("drop", (e) => {
+      e.preventDefault();
+
+      if (e.dataTransfer.files.length) {
+        inputElement.files = e.dataTransfer.files;
+        updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
+      }
+
+      dropZoneElement.classList.remove("drop-zone--over");
+    });
+  });
+
+
+  function updateThumbnail(dropZoneElement, file) {
+    let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");
+
+    // First time - remove the prompt
+    if (dropZoneElement.querySelector(".drop-zone__prompt")) {
+      dropZoneElement.querySelector(".drop-zone__prompt").remove();
+    }
+
+    // First time - there is no thumbnail element, so lets create it
+    if (!thumbnailElement) {
+      thumbnailElement = document.createElement("div");
+      thumbnailElement.classList.add("drop-zone__thumb");
+      dropZoneElement.appendChild(thumbnailElement);
+    }
+
+    thumbnailElement.dataset.label = file.name;
+
+    // Show thumbnail for image files
+    if (file.type.startsWith("image/")) {
+      const reader = new FileReader();
+
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
+      };
+    } else {
+      thumbnailElement.style.backgroundImage = null;
+    }
+  }
+

help.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Help_task</title>
+</head>
+<body>
+    <h2>Q&A</h2>
+
+        <p>Ask and answer questions to peer-troubleshoot this system:</p>
+
+        <iframe
+          style="border: none"
+          width="100%"
+          height="900px"
+          src="//publiclab.org/embed/grid/question:infragram?"
+        ></iframe>
+      </div>
+
+      <footer class="footer">
+        <hr />
+        <h4 style="margin-bottom: 40px">
+          <a
+            style="color: #444"
+            href="http://publiclab.org/infragram"
+            target="_blank"
+            >Infragram</a
+          >
+          <small
+            >by <a href="http://publiclab.org" target="_blank">Public Lab</a> |
+            This web app is
+            <a href="https://github.com/publiclab/infragram/" target="_blank"
+              >open source software</a
+            >;
+            <a
+              href="https://github.com/publiclab/infragram/issues"
+              target="_blank"
+              >please report bugs</a
+            ></small
+          >
+        </h4>
+        <p>
+          Infragram was created by
+          <a href="https://github.com/bgamari" target="_blank">Ben Gamari</a>,
+          <a href="http://github.com/donblair" target="_blank">Don Blair</a>,
+          <a href="http://publiclab.org/profile/warren">Jeff Warren</a> and
+          <a href="http://github.com/pfoltyn" target="_blank">Piotr Foltyn</a>
+          and others from
+          <a href="http://publiclab.org/contributors/infragram" target="_blank"
+            >Public Lab</a
+          >.
+        </p>
+</body>
+</html>