diff --git a/web/public/js/mobile.js b/web/public/js/mobile.js index 2929202..30dbbc5 100644 --- a/web/public/js/mobile.js +++ b/web/public/js/mobile.js @@ -5,8 +5,10 @@ const composePost = document.querySelector(".js-compose-post"); if (composePost) { const composeButton = document.querySelector(".js-publish-button"); + const letterCounter = document.querySelector(".js-letter-count"); composePost.addEventListener("focus", () => { composeButton.style.display = "block"; + letterCounter.style.display = "block"; }); } diff --git a/web/public/js/shared.js b/web/public/js/shared.js index dc91851..6414c6a 100644 --- a/web/public/js/shared.js +++ b/web/public/js/shared.js @@ -58,3 +58,26 @@ window.onerror = (message, _url, _lineNo, _columnNo, error) => { encodeURIComponent(error.stack), }); }; + +/** + * Letter counter + */ + +const letterCounter = document.querySelector(".js-letter-count"); +if (letterCounter) { + let parent = letterCounter.parentElement; + if (parent.tagName != "FORM") parent = parent.parentElement; + const textarea = parent.querySelector("textarea"); + const submit = parent.querySelector("input[type=submit]"); + const countLetters = () => { + const left = 140 - textarea.value.length; + letterCounter.textContent = left.toString(); + if (left < 0) { + submit.setAttribute("disabled", "disabled"); + } else { + submit.removeAttribute("disabled"); + } + }; + textarea.addEventListener("keyup", countLetters); + countLetters(); +} diff --git a/web/public/shared.css b/web/public/shared.css index 491eb16..e6a6bb4 100644 --- a/web/public/shared.css +++ b/web/public/shared.css @@ -57,6 +57,12 @@ button.button-yellow { button.button-yellow:hover { background: #ddb904; } +button[disabled], +input[type="submit"][disabled] { + background: #eee; + border: 1px solid #999; + color: #999; +} input[type="text"], input[type="email"], @@ -382,3 +388,10 @@ h2 { height: 100vh; } } + +.letter-count { + text-align: right; + font-size: 24px; + color: #ccc; + font-weight: bold; +} diff --git a/web/views/desktop/home.ejs b/web/views/desktop/home.ejs index 958a6ef..3c98a0b 100644 --- a/web/views/desktop/home.ejs +++ b/web/views/desktop/home.ejs @@ -19,7 +19,8 @@ -
+ +
140
diff --git a/web/views/desktop/profile.ejs b/web/views/desktop/profile.ejs index cf2d084..bd35b15 100644 --- a/web/views/desktop/profile.ejs +++ b/web/views/desktop/profile.ejs @@ -32,7 +32,8 @@
- " method="POST" style="padding-top: 20px;"> + " method="POST"> +
140
diff --git a/web/views/mobile/home.ejs b/web/views/mobile/home.ejs index 5ca182f..7bc6da2 100644 --- a/web/views/mobile/home.ejs +++ b/web/views/mobile/home.ejs @@ -10,7 +10,8 @@ <% if (posts.length > 0) { %> -
+
+
diff --git a/web/views/mobile/profile.ejs b/web/views/mobile/profile.ejs index 9cc074d..5421afe 100644 --- a/web/views/mobile/profile.ejs +++ b/web/views/mobile/profile.ejs @@ -38,7 +38,8 @@ <% if (posts.length > 0) { %>
" method="POST" style="padding: 0px 8px 5px 8px;"> -
+
+