diff --git a/.github/config.yml b/.github/config.yml index ec4955e9..57600188 100644 --- a/.github/config.yml +++ b/.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 \ No newline at end of file diff --git a/dist/infragram.css b/dist/infragram.css index bbcd08f8..e51d7988 100644 --- a/dist/infragram.css +++ b/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; -} \ No newline at end of file + 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; +} diff --git a/dist/infragram.js b/dist/infragram.js index eae35d60..fe9ee825 100644 --- a/dist/infragram.js +++ b/dist/infragram.js @@ -2149,4 +2149,4 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i }; }, {}] }, {}, [2]); -//# sourceMappingURL=infragram.js.map +//# sourceMappingURL=infragram.js.map \ No newline at end of file diff --git a/dragndrop.js b/dragndrop.js new file mode 100644 index 00000000..a8e555bf --- /dev/null +++ b/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; + } + } + \ No newline at end of file diff --git a/help.html b/help.html new file mode 100644 index 00000000..387b41c5 --- /dev/null +++ b/help.html @@ -0,0 +1,56 @@ + + + + + + + Help_task + + +

Q&A

+ +

Ask and answer questions to peer-troubleshoot this system:

+ + + + +