From 0d34463fb2cd5668fec52cc4a06e6e1b4f6a8ef6 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Tue, 23 Feb 2021 13:09:48 +0100 Subject: [PATCH 1/3] added title validation style --- app-main/public/css/style.css | 100 ++++---- app-main/public/index.html | 366 +++++++++++++--------------- app-main/public/js/lessons/index.js | 16 +- 3 files changed, 229 insertions(+), 253 deletions(-) diff --git a/app-main/public/css/style.css b/app-main/public/css/style.css index ac79fb0..877db8a 100644 --- a/app-main/public/css/style.css +++ b/app-main/public/css/style.css @@ -21,8 +21,8 @@ body { body { margin: 0; padding: 0; - font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue; + font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, + Droid Sans, Helvetica Neue; letter-spacing: 0.02em; } @@ -293,12 +293,7 @@ span.lessons-count { width: 100%; height: 100%; transform: translateX(-100%); - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.2), - transparent - ); + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: loading 1.5s infinite; } @@ -366,12 +361,10 @@ span.lessons-count { border-radius: 3px; padding: 5px 8px; } -.modal-lesson-close:hover -{ +.modal-lesson-close:hover { box-shadow: inset 50px 0 0 0 #a3d2ca; } - .lesson-card-title { margin-top: 0; margin-bottom: 12px; @@ -401,8 +394,8 @@ span.lessons-count { font-size: 12px; border-radius: 3px; box-shadow: inset 0 0 0 0 #ffee93; - transition: ease-out .3s; - outline:none; + transition: ease-out 0.3s; + outline: none; position: relative; } @@ -414,25 +407,22 @@ span.lessons-count { background: var(--tertiary-b-color); color: black; } -.lesson-card-content-buttons button:first-of-type:hover -{ - box-shadow: inset 115px 0 0 0 #ffee93; - color: black; - cursor: pointer; +.lesson-card-content-buttons button:first-of-type:hover { + box-shadow: inset 115px 0 0 0 #ffee93; + color: black; + cursor: pointer; } .lesson-card-content-buttons button:last-of-type { padding: 5px 8px; max-width: 50px; } -.lesson-card-content-buttons button:last-of-type:hover -{ +.lesson-card-content-buttons button:last-of-type:hover { box-shadow: inset 50px 0 0 0 #a3d2ca; - color: black; - cursor: pointer; + color: black; + cursor: pointer; } -.lesson-card-title-container .button:hover -{ +.lesson-card-title-container .button:hover { box-shadow: inset 50px 0 0 0 #ec4646; } @@ -472,12 +462,21 @@ span.lessons-count { } .create-lesson-input { + outline: none; margin-bottom: 20px; padding: 12px; border: 1px solid #ccc; } -input.create-lesson-input { +.create-lesson-input-invalid { + outline: none; + margin-bottom: 20px; + padding: 12px; + border: 2px solid red; +} + +input.create-lesson-input, +input.create-lesson-input-invalid { flex: 1; } @@ -537,21 +536,20 @@ input.create-lesson-input { max-width: 150px; padding: 10px 12px; border-radius: 3px; - background:var(--tertiary-b-color); + background: var(--tertiary-b-color); color: black; letter-spacing: 1px; font-size: 14px; white-space: nowrap; box-shadow: inset 0 0 0 0 #ffee93; - transition: ease-out .3s; - outline:none; + transition: ease-out 0.3s; + outline: none; position: relative; } -.create-lesson .button:hover -{ - box-shadow: inset 150px 0 0 0 #ffee93; - color: black; - cursor: pointer; +.create-lesson .button:hover { + box-shadow: inset 150px 0 0 0 #ffee93; + color: black; + cursor: pointer; } form { @@ -606,16 +604,16 @@ form { max-width: 90%; } } -@media(max-width: 900px){ +@media (max-width: 900px) { body { width: 100%; margin: 0 auto; box-sizing: border-box; } - .app-container{ + .app-container { display: inline-block; } - .lessons-container{ + .lessons-container { width: 80%; height: 250px; padding-bottom: 0px; @@ -623,61 +621,61 @@ form { margin: auto; overflow-x: hidden; } - .lesson-card{ + .lesson-card { display: inline-block; background: #fff; max-width: 150px; } - #delete{ + #delete { padding: 1px 1px; width: 20px; height: 20px; } - .lesson-card-content-buttons{ + .lesson-card-content-buttons { margin-top: 0; justify-content: flex-end; z-index: 500; position: relative; } - .lesson-card-content{ + .lesson-card-content { border: none; padding: 0 5px; } - .ql-editor{ + .ql-editor { padding: 0; } - .lesson-card-content-buttons button:first-of-type{ + .lesson-card-content-buttons button:first-of-type { min-width: auto; } - .lesson-card{ + .lesson-card { height: 120px; justify-content: space-around; } - .lesson-card-title-container{ + .lesson-card-title-container { margin-top: 1px; margin-bottom: 5px; } - .lesson-card-title{ + .lesson-card-title { margin-bottom: 0; } - html{ + html { width: 100%; } - .modal-lesson{ + .modal-lesson { z-index: 600; width: 100%; } - .app-container{ + .app-container { width: 100%; } - .lesson-card .ql-editor{ + .lesson-card .ql-editor { height: 65px; } - .lessons{ + .lessons { display: flex; overflow-x: auto; } - .create-lesson .button{ + .create-lesson .button { margin-right: auto; margin-left: auto; } diff --git a/app-main/public/index.html b/app-main/public/index.html index 0bbd61d..c0e547a 100644 --- a/app-main/public/index.html +++ b/app-main/public/index.html @@ -1,213 +1,183 @@ - - - dev-jot - - - - - - - - - - - - - - -
- + - - - - - + + + + + + - + + + + \ No newline at end of file diff --git a/app-main/public/js/lessons/index.js b/app-main/public/js/lessons/index.js index 068bae2..6f31eb3 100644 --- a/app-main/public/js/lessons/index.js +++ b/app-main/public/js/lessons/index.js @@ -173,16 +173,23 @@ export function addLesson() { const user = JSON.parse(localStorage.getItem("user")); // get editor content; const content = quill.root.innerHTML; - + const lessonTitle = lessonInput.value; // Boolean for if edit View const isEditView = createLessonContainer .getAttribute("view") .includes("edit-lesson"); - // filter tags that are "selected" upon submission const tags = [...tagSelectors.children].filter((tag) => tag.classList.contains("selected") ); + + if (lessonTitle === "") { + console.log('title not valid'); + lessonInput.classList.remove('create-lesson-input'); + lessonInput.classList.add('create-lesson-input-invalid'); + console.log(lessonInput.classList); + return; + } // Regex to match any number of whitespaces in the content form. var regex = /<(.|\n)*?>/g; if (content.replace(regex, "").trim().length === 0) { @@ -199,12 +206,10 @@ export function addLesson() { } return lesson; }); - if (!user.lessons.length) { console.log("Tried to add empty lessons."); return; } - localStorage.setItem("user", JSON.stringify(user)); renderLessons(user); createLessonContainer.setAttribute("view", "create-lesson"); @@ -218,6 +223,9 @@ export function addLesson() { localStorage.setItem("user", JSON.stringify(user)); + lessonInput.classList.remove('create-lesson-input-invalid'); + lessonInput.classList.add('create-lesson-input'); + lessonInput.value = ""; renderLessons(user); } From 7372423cf921e57fc1c1d086b7f03ad375cfb863 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Tue, 23 Feb 2021 15:13:27 +0100 Subject: [PATCH 2/3] issue#64 invalid title and custom tooltip --- app-main/public/css/style.css | 36 +++++++++++++++++++++++++---- app-main/public/index.html | 1 + app-main/public/js/lessons/index.js | 4 +++- 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/app-main/public/css/style.css b/app-main/public/css/style.css index 877db8a..f61949f 100644 --- a/app-main/public/css/style.css +++ b/app-main/public/css/style.css @@ -436,6 +436,7 @@ span.lessons-count { .create-lesson-container { padding: 15px 50px 15px 45px; + position: relative; } .create-lesson-container-header, @@ -472,7 +473,7 @@ span.lessons-count { outline: none; margin-bottom: 20px; padding: 12px; - border: 2px solid red; + border: 1px solid red; } input.create-lesson-input, @@ -480,6 +481,28 @@ input.create-lesson-input-invalid { flex: 1; } +span.create-lesson-input-tooltip::after { + content: "Please fill out this field"; + position: absolute; + top: 14%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--tertiary-b-color); + clip-path: polygon(100% 0, 100% 40%, 39% 40%, 25% 60%, 13% 40%, 0 40%, 0 0); + border: 2px solid var(--tertiary-b-color); + height: 60px; + width: 155px; + display: flex; + align-items: flex-start; + justify-content: center; + font-family: inherit; + border-radius: 3px; + font-size: 14px; + text-align: center; + z-index: 10; + opacity: 1; +} + .tag-selectors { margin-top: -20px; display: flex; @@ -600,6 +623,13 @@ form { overflow-x: scroll; } + span.create-lesson-input-tooltip::after { + top: 15%; + left: 58%; + transform: translate(-50%, -50%); + clip-path: polygon(100% 0, 100% 40%, 39% 40%, 25% 60%, 13% 40%, 0 40%, 0 0); + } + .modal-lesson { max-width: 90%; } @@ -675,8 +705,4 @@ form { display: flex; overflow-x: auto; } - .create-lesson .button { - margin-right: auto; - margin-left: auto; - } } diff --git a/app-main/public/index.html b/app-main/public/index.html index c0e547a..c341be0 100644 --- a/app-main/public/index.html +++ b/app-main/public/index.html @@ -147,6 +147,7 @@

New Lesson

+ diff --git a/app-main/public/js/lessons/index.js b/app-main/public/js/lessons/index.js index 6f31eb3..8b72c39 100644 --- a/app-main/public/js/lessons/index.js +++ b/app-main/public/js/lessons/index.js @@ -174,6 +174,7 @@ export function addLesson() { // get editor content; const content = quill.root.innerHTML; const lessonTitle = lessonInput.value; + const titleTooltip = document.getElementById('title-tooltip'); // Boolean for if edit View const isEditView = createLessonContainer .getAttribute("view") @@ -185,9 +186,9 @@ export function addLesson() { if (lessonTitle === "") { console.log('title not valid'); + titleTooltip.classList.add('create-lesson-input-tooltip'); lessonInput.classList.remove('create-lesson-input'); lessonInput.classList.add('create-lesson-input-invalid'); - console.log(lessonInput.classList); return; } // Regex to match any number of whitespaces in the content form. @@ -224,6 +225,7 @@ export function addLesson() { localStorage.setItem("user", JSON.stringify(user)); lessonInput.classList.remove('create-lesson-input-invalid'); + titleTooltip.classList.remove('create-lesson-input-tooltip'); lessonInput.classList.add('create-lesson-input'); lessonInput.value = ""; From 50494fc5e1366e4243cdde51db5c4637044d029f Mon Sep 17 00:00:00 2001 From: Eduardo Date: Tue, 23 Feb 2021 15:23:25 +0100 Subject: [PATCH 3/3] fixed linting with prettier --- app-main/package.json | 2 +- app-main/public/css/style.css | 11 +- app-main/public/index.html | 366 +++++++++++++++------------- app-main/public/js/index.js | 2 +- app-main/public/js/lessons/index.js | 16 +- 5 files changed, 216 insertions(+), 181 deletions(-) diff --git a/app-main/package.json b/app-main/package.json index 79303fb..63fce6a 100644 --- a/app-main/package.json +++ b/app-main/package.json @@ -47,8 +47,8 @@ "eslint-plugin-prettier": "^3.2.0", "eslint-plugin-react": "^7.21.5", "eslint-plugin-react-hooks": "^4.0.0", - "jest": "^26.6.3", "husky": "^4.3.6", + "jest": "^26.6.3", "prettier": "^2.2.1" } } diff --git a/app-main/public/css/style.css b/app-main/public/css/style.css index f61949f..5955f5a 100644 --- a/app-main/public/css/style.css +++ b/app-main/public/css/style.css @@ -21,8 +21,8 @@ body { body { margin: 0; padding: 0; - font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, - Droid Sans, Helvetica Neue; + font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, + Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue; letter-spacing: 0.02em; } @@ -293,7 +293,12 @@ span.lessons-count { width: 100%; height: 100%; transform: translateX(-100%); - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); animation: loading 1.5s infinite; } diff --git a/app-main/public/index.html b/app-main/public/index.html index c341be0..28a0df3 100644 --- a/app-main/public/index.html +++ b/app-main/public/index.html @@ -1,184 +1,214 @@ + + + dev-jot + + + + + + + + + + + + + - - - dev-jot - - - - - - - - - - - - - - - -
- -
-
-

dev-jot

- note icon + +
+ -
-
-
-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-

-

-
-
-
-
-
-
-

-

-

-
-
+ - - -
-
-
- add icon -

New Lesson

- + -
+
+ +
+ + +
+ +
- - - + + - - + + + + - - - - \ No newline at end of file + diff --git a/app-main/public/js/index.js b/app-main/public/js/index.js index 813d197..c9ac6cc 100644 --- a/app-main/public/js/index.js +++ b/app-main/public/js/index.js @@ -1,4 +1,4 @@ import init from "./init/init.js"; // initialize Application -init(); \ No newline at end of file +init(); diff --git a/app-main/public/js/lessons/index.js b/app-main/public/js/lessons/index.js index 8b72c39..bb7fbe6 100644 --- a/app-main/public/js/lessons/index.js +++ b/app-main/public/js/lessons/index.js @@ -174,7 +174,7 @@ export function addLesson() { // get editor content; const content = quill.root.innerHTML; const lessonTitle = lessonInput.value; - const titleTooltip = document.getElementById('title-tooltip'); + const titleTooltip = document.getElementById("title-tooltip"); // Boolean for if edit View const isEditView = createLessonContainer .getAttribute("view") @@ -185,10 +185,10 @@ export function addLesson() { ); if (lessonTitle === "") { - console.log('title not valid'); - titleTooltip.classList.add('create-lesson-input-tooltip'); - lessonInput.classList.remove('create-lesson-input'); - lessonInput.classList.add('create-lesson-input-invalid'); + console.log("title not valid"); + titleTooltip.classList.add("create-lesson-input-tooltip"); + lessonInput.classList.remove("create-lesson-input"); + lessonInput.classList.add("create-lesson-input-invalid"); return; } // Regex to match any number of whitespaces in the content form. @@ -224,9 +224,9 @@ export function addLesson() { localStorage.setItem("user", JSON.stringify(user)); - lessonInput.classList.remove('create-lesson-input-invalid'); - titleTooltip.classList.remove('create-lesson-input-tooltip'); - lessonInput.classList.add('create-lesson-input'); + lessonInput.classList.remove("create-lesson-input-invalid"); + titleTooltip.classList.remove("create-lesson-input-tooltip"); + lessonInput.classList.add("create-lesson-input"); lessonInput.value = ""; renderLessons(user);