Refactor hidden to display: none, because hidden has many edge cases and display: none is way more common for devs
This commit is contained in:
parent
83a06924b3
commit
de012758f9
|
@ -14,16 +14,16 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
|
|||
const confirmButtons = elem.parentElement.querySelectorAll(".modal-confirm");
|
||||
const steps = elem.parentElement.querySelectorAll(".js-step");
|
||||
|
||||
overlay.hidden = false;
|
||||
modal.hidden = false;
|
||||
overlay.style.display = "block";
|
||||
modal.style.display = "block";
|
||||
|
||||
const onClose = () => {
|
||||
overlay.hidden = true;
|
||||
modal.hidden = true;
|
||||
overlay.style.display = "none";
|
||||
modal.style.display = "none";
|
||||
steps.forEach((step) => {
|
||||
step.hidden = true;
|
||||
step.style.display = "none";
|
||||
});
|
||||
if (steps[0]) steps[0].hidden = false;
|
||||
if (steps[0]) steps[0].style.display = "block";
|
||||
if (afterClose) afterClose();
|
||||
};
|
||||
|
||||
|
@ -34,11 +34,11 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
|
|||
let currentStep;
|
||||
steps.forEach((step, index) => {
|
||||
if (currentStep == index) {
|
||||
step.hidden = false;
|
||||
} else if (!step.hidden) {
|
||||
step.style.display = "block";
|
||||
} else if (step.style.display == "block") {
|
||||
currentStep = index;
|
||||
currentStep++;
|
||||
if (currentStep < steps.length) step.hidden = true;
|
||||
if (currentStep < steps.length) step.style.display = "none";
|
||||
}
|
||||
});
|
||||
if (currentStep == steps.length) {
|
||||
|
@ -88,9 +88,9 @@ composeButtons.forEach((composeButton) => {
|
|||
body += "&recipients=" + encodeURIComponent(recipients);
|
||||
}
|
||||
|
||||
publishButton.style.display = "none"; // hidden doesn't work on buttons
|
||||
publishButton.style.display = "none";
|
||||
sendingMessage.innerHTML = "Loading...";
|
||||
sendingMessage.hidden = false;
|
||||
sendingMessage.style.display = "block";
|
||||
|
||||
fetch(url, {
|
||||
method: "POST",
|
||||
|
@ -108,7 +108,7 @@ composeButtons.forEach((composeButton) => {
|
|||
modal.close();
|
||||
messageInput.value = "";
|
||||
publishButton.style.display = "block";
|
||||
sendingMessage.hidden = true;
|
||||
sendingMessage.style.display = "none";
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
@ -116,7 +116,7 @@ composeButtons.forEach((composeButton) => {
|
|||
sendingMessage.innerHTML = "Error";
|
||||
setTimeout(() => {
|
||||
publishButton.style.display = "block";
|
||||
sendingMessage.hidden = true;
|
||||
sendingMessage.style.display = "none";
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
|
|
@ -22,12 +22,12 @@ const openModalFor = (elem, onConfirm, afterClose = null) => {
|
|||
const closeButton = elem.parentElement.querySelector(".js-modal-close");
|
||||
const backButtons = elem.parentElement.querySelectorAll(".js-modal-back");
|
||||
|
||||
overlay.hidden = false;
|
||||
modal.hidden = false;
|
||||
overlay.style.display = "block";
|
||||
modal.style.display = "block";
|
||||
|
||||
const onClose = () => {
|
||||
overlay.hidden = true;
|
||||
modal.hidden = true;
|
||||
overlay.style.display = "none";
|
||||
modal.style.display = "none";
|
||||
steps.forEach((step) => {
|
||||
step.style.display = "none";
|
||||
});
|
||||
|
@ -113,9 +113,9 @@ composeButtons.forEach((composeButton) => {
|
|||
body += "&recipients=" + encodeURIComponent(recipients);
|
||||
}
|
||||
|
||||
publishButton.style.display = "none"; // hidden doesn't work on buttons
|
||||
publishButton.style.display = "none";
|
||||
sendingMessage.innerHTML = "Loading...";
|
||||
sendingMessage.hidden = false;
|
||||
sendingMessage.style.display = "block";
|
||||
|
||||
fetch(url, {
|
||||
method: "POST",
|
||||
|
@ -133,7 +133,7 @@ composeButtons.forEach((composeButton) => {
|
|||
modal.close();
|
||||
messageInput.value = "";
|
||||
publishButton.style.display = "block";
|
||||
sendingMessage.hidden = true;
|
||||
sendingMessage.style.display = "none";
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
@ -141,7 +141,7 @@ composeButtons.forEach((composeButton) => {
|
|||
sendingMessage.innerHTML = "Error";
|
||||
setTimeout(() => {
|
||||
publishButton.style.display = "block";
|
||||
sendingMessage.hidden = true;
|
||||
sendingMessage.style.display = "none";
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
|
|
|
@ -209,6 +209,9 @@ a.compose-new-button {
|
|||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
.open-menu:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.menu-dash {
|
||||
width: 25px;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="yellow-background <%= secretMessages.length > 0 ? "" : "no-secrets" %>">
|
||||
<div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0;">
|
||||
<div class="column-side-padding" style="margin: 25px 0 20px 0; <%= secretMessages.length > 0 ? "display: none" : "" %>">
|
||||
<div style="font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<div style="font-size: 50px">🤫</div>
|
||||
<div style="padding-top: 20px; font-size: 16px">You don't have any secret messages yet</div>
|
||||
|
@ -31,8 +31,8 @@
|
|||
</small>
|
||||
</div>
|
||||
</button>
|
||||
<div class="overlay" hidden></div>
|
||||
<div class="modal" hidden>
|
||||
<div class="overlay" style="display: none"></div>
|
||||
<div class="modal" style="display: none">
|
||||
<% chat.messages.reverse().map((message, index) => { %>
|
||||
<div class="modal-group js-step" <%- index > 0 ? 'style="display: none"' : "" %>>
|
||||
<div class="modal-footer">
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
<button class="js-compose-secret-message compose-new-button">
|
||||
<div style="font-size: 30px">✍️</div>
|
||||
</button>
|
||||
<div class="overlay" hidden></div>
|
||||
<div class="modal" hidden>
|
||||
<div class="overlay" style="display: none"></div>
|
||||
<div class="modal" style="display: none">
|
||||
<div class="modal-group js-step">
|
||||
<div class="modal-footer">
|
||||
<a href="javascript:;" class="js-modal-close" role="button">Close</a>
|
||||
|
@ -19,7 +19,7 @@
|
|||
<div class="modal-footer">
|
||||
<a href="javascript:;" class="js-modal-back" role="button">⬅ Back</a>
|
||||
<button class="modal-confirm js-secret-publish">Send</button>
|
||||
<div hidden class="js-sending-message"></div>
|
||||
<div style="display: none" class="js-sending-message"></div>
|
||||
</div>
|
||||
<div class="modal-header">Choose the recipients</div>
|
||||
<div class="modal-body js-recipients-list">
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<div class="overlay" hidden></div>
|
||||
<div class="modal" hidden>
|
||||
<div class="overlay" style="display: none"></div>
|
||||
<div class="modal" style="display: none">
|
||||
<div class="modal-footer">
|
||||
<a href="javascript:;" class="js-modal-close" role="button">Close</a>
|
||||
<button class="modal-confirm js-secret-publish">Send</button>
|
||||
<div hidden class="js-sending-message"></div>
|
||||
<div style="display: none" class="js-sending-message"></div>
|
||||
</div>
|
||||
<div class="modal-header">Write a secret message to <%= profile.name %></div>
|
||||
<div class="modal-body">
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
<button class="secret-button js-compose-secret-message" style="padding: 10px 14px; justify-content: center">
|
||||
✍️ Send a Secret
|
||||
</button>
|
||||
<div class="overlay" hidden></div>
|
||||
<div class="modal" hidden>
|
||||
<div class="overlay" style="display: none"></div>
|
||||
<div class="modal" style="display: none">
|
||||
<div class="js-step">
|
||||
<div class="modal-header">Write a secret message</div>
|
||||
<div class="modal-body">
|
||||
|
@ -14,7 +14,7 @@
|
|||
<button class="modal-confirm">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-step" hidden>
|
||||
<div class="js-step" style="display: none">
|
||||
<div class="modal-header">Choose the recipients</div>
|
||||
<div class="modal-body js-recipients-list">
|
||||
<% allFollowing = friends.friends.concat(friends.requestsSent) %>
|
||||
|
@ -34,7 +34,7 @@
|
|||
<div class="modal-footer">
|
||||
this message will disapear right after being read
|
||||
<button class="modal-confirm js-secret-publish">Send</button>
|
||||
<div hidden class="js-sending-message"></div>
|
||||
<div style="display: none" class="js-sending-message"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="overlay" hidden></div>
|
||||
<div class="modal" hidden>
|
||||
<div class="overlay" style="display: none"></div>
|
||||
<div class="modal" style="display: none">
|
||||
<div class="modal-header">Write a secret message to <%= profile.name %></div>
|
||||
<div class="modal-body">
|
||||
<textarea name="message" class="compose-post js-secret-message-input" style="margin: 0"></textarea>
|
||||
|
@ -7,6 +7,6 @@
|
|||
<div class="modal-footer">
|
||||
this message will disapear right after being read
|
||||
<button class="modal-confirm js-secret-publish">Send</button>
|
||||
<div hidden class="js-sending-message"></div>
|
||||
<div style="display: none" class="js-sending-message"></div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,4 +1,4 @@
|
|||
<div class="column-side-padding" <%= secretMessages.length > 0 ? "hidden" : "" %> style="margin: 25px 0 20px 0; font-size: 14px;">
|
||||
<div class="column-side-padding" style="margin: 25px 0 20px 0; font-size: 14px; <%= secretMessages.length > 0 ? "display: none" : "" %>">
|
||||
🤫 You don't have any secret messages yet
|
||||
</div>
|
||||
<% secretMessages.map(chat => { %>
|
||||
|
@ -26,10 +26,10 @@
|
|||
</small>
|
||||
</div>
|
||||
</button>
|
||||
<div class="overlay" hidden></div>
|
||||
<div class="modal" hidden>
|
||||
<div class="overlay" style="display:none"></div>
|
||||
<div class="modal" style="display:none">
|
||||
<% chat.messages.reverse().map((message, index) => { %>
|
||||
<div class="js-step" <%= index > 0 ? "hidden" : "" %>>
|
||||
<div class="js-step" <%- index > 0 ? 'style="display: none"' : "" %>>
|
||||
<a href="<%= profileUrl(chat.authorProfile.id) %>" class="modal-header">
|
||||
<img src="<%= profileImageUrl(chat.authorProfile) %>" class="post-profile-pic" />
|
||||
<div style="padding-left: 10px"><%= chat.authorProfile.name %></div>
|
||||
|
|
Loading…
Reference in New Issue