diff --git a/src/components/File-Lesson.vue b/src/components/File-Lesson.vue index 008bf35a8..5adbb8952 100644 --- a/src/components/File-Lesson.vue +++ b/src/components/File-Lesson.vue @@ -25,7 +25,7 @@ export default { for (let f of Array.from(event.dataTransfer.items)) { let isFile = f.getAsEntry ? f.getAsEntry().isFile : (f.webkitGetAsEntry ? f.webkitGetAsEntry().isFile : true) if (!isFile) { - return alert("Directory upload is not supported. Please select one or more files.") + return alert('Directory upload is not supported. Please select one or more files.') } } this.onFiles(files) @@ -35,7 +35,7 @@ export default { event.preventDefault() event.stopPropagation() let elem = document.createElement('input') - elem.setAttribute("type", "file") + elem.setAttribute('type', 'file') elem.setAttribute('multiple', true) elem.onchange = () => { this.onFiles(Array.from(elem.files)) diff --git a/src/components/Lesson.vue b/src/components/Lesson.vue index 3ce795d7c..32e8d0979 100644 --- a/src/components/Lesson.vue +++ b/src/components/Lesson.vue @@ -151,8 +151,11 @@
- - + +
@@ -254,6 +257,7 @@ export default { cachedCode: !!localStorage['cached' + self.$route.path], code: localStorage[self.cacheKey] || self.$attrs.code || self.defaultCode, solution: self.$attrs.solution, + isSubmitting: false, viewSolution: false, overrideErrors: self.$attrs.overrideErrors, isFileLesson: self.isFileLesson, @@ -338,6 +342,7 @@ export default { }, methods: { run: async function (...args) { + this.isSubmitting = true if (oldIPFS) { oldIPFS.stop() oldIPFS = null @@ -356,6 +361,7 @@ export default { if (!this.$attrs.overrideErrors && result && result.error) { Vue.set(output, 'test', result) this.lessonPassed = !!localStorage[this.lessonKey] + this.isSubmitting = false return } // Run the `validate` function in the lesson @@ -371,6 +377,7 @@ export default { localStorage[this.lessonKey] = 'passed' } this.lessonPassed = !!localStorage[this.lessonKey] + this.isSubmitting = false }, createIPFS: function () { if (this.$attrs.createIPFS) { @@ -410,7 +417,6 @@ export default { resetFileUpload: function () { this.uploadedFiles = false this.dragging = false - console.log({uploadedFiles: this.uploadedFiles}) }, clearPassed: function () { delete localStorage[this.lessonKey] @@ -578,6 +584,49 @@ div#drop-area * { border-width: 5px 5px 5px; margin-top: 5px; } + +.loader, +.loader:before, +.loader:after { + border-radius: 50%; + width: 2em; + height: 2em; + animation-fill-mode: both; + animation: loadAnim 1.5s infinite ease-in-out; +} + +.loader { + display: block; + margin: 7px auto; + color: #ffffff; + font-size: 5px; + top: -10px; + position: relative; + animation-delay: -0.15s; + pointer-events: none; +} + +.loader:before { + content: ''; + position: absolute; + left: -3.5em; + animation-delay: -0.30s; +} + +.loader:after { + content: ''; + position: absolute; + left: 3.5em; +} + +@keyframes loadAnim { + 0%, 80%, 100% { + box-shadow: 0 2em 0 -1.3em; + } + 40% { + box-shadow: 0 2em 0 0; + } +}