Skip to content
This repository was archived by the owner on Apr 16, 2022. It is now read-only.

#63 Notify user when trying to create a lesson with no notes #103

Open
edXmO wants to merge 3 commits into
base: master
Choose a base branch
from
Open

#63 Notify user when trying to create a lesson with no notes #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0d34463
added title validation style
edXmO Feb 23, 2021
7372423
issue#64 invalid title and custom tooltip
edXmO Feb 23, 2021
50494fc
fixed linting with prettier
edXmO Feb 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app-main/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
121 changes: 75 additions & 46 deletions app-main/public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,12 +366,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;
Expand Down Expand Up @@ -401,8 +399,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;
}

Expand All @@ -414,25 +412,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;
}

Expand All @@ -446,6 +441,7 @@ span.lessons-count {

.create-lesson-container {
padding: 15px 50px 15px 45px;
position: relative;
}

.create-lesson-container-header,
Expand All @@ -472,15 +468,46 @@ 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;
Copy link
Owner

@jrobind jrobind Feb 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is fine, but when setting borders it can cause some layout shifting. box-sizing: border-box; means that padding and border are included in the width and height of an element. We could try using outline instead and see how that looks? I haven't tested it so it might look terrible.

Copy link
Contributor Author

@edXmO edXmO Feb 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll test it out maybe it does look better.

margin-bottom: 20px;
padding: 12px;
border: 1px solid red;
}

input.create-lesson-input,
input.create-lesson-input-invalid {
flex: 1;
}

span.create-lesson-input-tooltip::after {
Copy link
Owner

@jrobind jrobind Feb 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if maybe we're better off sticking with the native HTML form validation? i.e. by using the required attribute. I think this code is still useful though and we shouldn't remove it. We will need tooltips at some point (we probably need them for the lesson tags).

Because we have some positioning issues on smaller screen sizes I wonder if we just leave the native HTML validation tooltip to do its job. What do you think?

Copy link
Contributor Author

@edXmO edXmO Feb 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure I think that's the best option. I'll remove everything but the CSS code in regards to the custom tooltip and fix the issue with the required attribute instead.

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;
Expand Down Expand Up @@ -537,21 +564,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 {
Expand Down Expand Up @@ -602,83 +628,86 @@ 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%;
}
}
@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;
overflow-y: scroll;
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{
margin-right: auto;
margin-left: auto;
}
}
5 changes: 3 additions & 2 deletions app-main/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
content="/images/favicon/browserconfig.xml"
/>
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./css/style.css" />
<link
href="https://cdn.quilljs.com/1.3.6/quill.snow.css"
Expand Down Expand Up @@ -169,8 +169,8 @@ <h2>New Lesson</h2>
class="create-lesson-input"
type="text"
placeholder="Lesson title"
required
/>
<span id="title-tooltip"></span>
Copy link
Owner

@jrobind jrobind Feb 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we decided to remove the tooltip for the form validation we can keep the CSS but just remove the logic and markup for it.

<button
class="add-tag create-lesson-input"
id="addTag"
Expand Down Expand Up @@ -205,6 +205,7 @@ <h2>New Lesson</h2>
>
</div>
</footer>

<body>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion app-main/public/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import init from "./init/init.js";

// initialize Application
init();
init();
18 changes: 14 additions & 4 deletions app-main/public/js/lessons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,16 +173,24 @@ export function addLesson() {
const user = JSON.parse(localStorage.getItem("user"));
// 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")
.includes("edit-lesson");

// filter tags that are "selected" upon submission
const tags = [...tagSelectors.children].filter((tag) =>
tag.classList.contains("selected")
);

if (lessonTitle === "") {
Copy link
Owner

@jrobind jrobind Feb 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This check could also be !lessonTitle

Copy link
Contributor Author

@edXmO edXmO Feb 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it!

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.
var regex = /<(.|\n)*?>/g;
if (content.replace(regex, "").trim().length === 0) {
Expand All @@ -199,12 +207,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");
Expand All @@ -218,6 +224,10 @@ 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 = "";
renderLessons(user);
}
Expand Down