diff --git a/activities/views/compose.py b/activities/views/compose.py index 3c2e3a8..08b54ab 100644 --- a/activities/views/compose.py +++ b/activities/views/compose.py @@ -30,6 +30,19 @@ class Compose(FormView): "autofocus": "autofocus", "maxlength": Config.lazy_system_value("post_length"), "placeholder": "What's on your mind?", + "_": f""" + on load or input + set characters to my.value.trim().length + put { Config.system.post_length } - characters into #character-counter + + if characters > { Config.system.post_length } then + set #character-counter's style.color to 'var(--color-text-error)' + add [@disabled=] to #post-button + else + set #character-counter's style.color to '' + remove @disabled from #post-button + end + """, }, ) ) diff --git a/activities/views/timelines.py b/activities/views/timelines.py index b7a67c6..bcc6e7f 100644 --- a/activities/views/timelines.py +++ b/activities/views/timelines.py @@ -20,6 +20,19 @@ class Home(FormView): widget=forms.Textarea( attrs={ "placeholder": "What's on your mind?", + "_": f""" + on load or input + set characters to my.value.trim().length + put { Config.system.post_length } - characters into #character-counter + + if characters > { Config.system.post_length } then + set #character-counter's style.color to 'var(--color-text-error)' + add [@disabled=] to #post-button + else + set #character-counter's style.color to '' + remove @disabled from #post-button + end + """, }, ) ) diff --git a/static/css/style.css b/static/css/style.css index 267549a..80a26ab 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -93,11 +93,13 @@ td a { --color-text-dull: #99a; --color-text-main: #fff; --color-text-link: rgb(176, 194, 206); + --color-text-error: #f44336; --color-input-border: #000; --color-input-border-active: #444b5d; --color-button-main: #444b5d; --color-button-main-hover: #515d7c; + --color-button-disabled: #7c9c97; --color-bg3: #444b5d; } @@ -666,6 +668,11 @@ button.toggle, background: var(--color-bg-main); } +button[disabled], +.button[disabled] { + background: var(--color-button-disabled); +} + button.left, .button.left { float: left; diff --git a/templates/activities/_menu.html b/templates/activities/_menu.html index 4676831..b5c4faf 100644 --- a/templates/activities/_menu.html +++ b/templates/activities/_menu.html @@ -60,8 +60,9 @@ {{ form.content_warning }}
{% endif %} diff --git a/templates/activities/compose.html b/templates/activities/compose.html index 7065863..9587559 100644 --- a/templates/activities/compose.html +++ b/templates/activities/compose.html @@ -34,7 +34,8 @@ {% endif %} {% endblock %}