diff options
| -rw-r--r-- | activities/views/compose.py | 13 | ||||
| -rw-r--r-- | activities/views/timelines.py | 13 | ||||
| -rw-r--r-- | static/css/style.css | 7 | ||||
| -rw-r--r-- | templates/activities/_menu.html | 3 | ||||
| -rw-r--r-- | templates/activities/compose.html | 3 |
5 files changed, 37 insertions, 2 deletions
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 }} <input type="hidden" name="visibility" value="{{ config_identity.default_post_visibility }}"> <div class="buttons"> + <span id="character-counter">{{ config.post_length }}</span> <span class="button toggle" _="on click toggle .enabled then toggle .hidden on #id_content_warning">CW</span> - <button>{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button> + <button id="post-button">{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button> </div> </form> {% 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 %} </fieldset> <div class="buttons"> - <button>{% if post %}Save Edits{% elif config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button> + <span id="character-counter">{{ config.post_length }}</span> + <button id="post-button">{% if post %}Save Edits{% elif config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button> </div> </form> {% endblock %} |