axiom-team
/
feedless
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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:
Rogerio Chaves 2020-04-26 11:07:01 +02:00
parent 83a06924b3
commit de012758f9
No known key found for this signature in database
GPG Key ID: E6AF5440509B1D94
9 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/public/js/desktop.js
View File

@ -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);
};

16
app/public/js/mobile.js
View File

@ -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);
};

3
app/public/mobile.css
View File

@ -209,6 +209,9 @@ a.compose-new-button {
padding: 0;
height: auto;
}
.open-menu:hover {
background: none;
}
.menu-dash {
width: 25px;

6
app/views/mobile/secrets.ejs
View File

@ -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">

6
app/views/mobile/secrets/_compose_multiple.ejs
View File

@ -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">

6
app/views/mobile/secrets/_compose_single.ejs
View File

@ -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">

8
app/views/secrets/_compose_multiple.ejs
View File

@ -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>

6
app/views/secrets/_compose_single.ejs
View File

@ -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>

8
app/views/secrets/_messages.ejs
View File

@ -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>