Mastodon’s UI has been plagued with inaccessibility from the start. Removing the focus outline is one example of that. This is the start of fixing that. Removes all instances of `outline: 0 | none;`.
Next step is to add nicely styled focus outlines.
Upgrades Prettier to 3.6.2 and pins it there. Prettier [recommends pinning the version](https://prettier.io/docs/install#summary):
> Install an exact version of Prettier locally in your project. This makes sure that everyone in the project gets the exact same version of Prettier. Even a patch release of Prettier can result in slightly different formatting, so you wouldn’t want different team members using different versions and formatting each other’s changes back and forth.
---
Should probably merge after #85.
Co-authored-by: tobi <kipvandenbos@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/86
Co-authored-by: Zoë Bijl <code@moiety.me>
Co-committed-by: Zoë Bijl <code@moiety.me>
Reworked the login page
- Simplified some of the HTML and CSS
- Removed some `aria-label`s
- Added alt text for the logo
- Added a label for the input field
- Added subtle borders to otherwise flat elements
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/76
Co-authored-by: Zoë Bijl <code@moiety.me>
Co-committed-by: Zoë Bijl <code@moiety.me>
Fixes#9
- Cute styling, combination of Mastodon and GTS
- Short description of the project
- Error and status messages (temporarily) appear in disabled button with correct ARIA attributes
- Sufficient contrast (WCAG AAA)
Let me know if using `login.scss` both as an index file and for adding custom styling is okay. I figured this might be preferred over creating an extra folder and file.
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/19
Co-authored-by: vyxen <vyxen@tutamail.com>
Co-committed-by: vyxen <vyxen@tutamail.com>
This PR adds a npm "dev" script. Upon executing `npm run dev`, the project will be served (default port 3035) in "watch" mode, every local change of the files will refresh the page.
This change should enable faster development loop.
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/16
Co-authored-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Co-committed-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Fixes#14
The style changes I made in #11 didn't take hidden media in consideration. This PR fixes it.
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/17
Co-authored-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Co-committed-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Fixes#7
The limit of upload and remote display media was hard coded to 4.
In this PR, I did the following changes:
- Status form now respects instance's upload limit config.
- Remove the limit of images shown on statuses
- Remote statuses may have more than local instance's limit
Also, I kept the 16:9 aspect ratio of the images. I can change to more complex layouts in future PRs if needed.
This works, but it needs more tests. I don't have how to change the config of my instance, so I had to test forcing duplicates on the post. Any help to validate configuration would be nice.
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/11
Co-authored-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Co-committed-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
At least for the logo-symbol-wordmark.svg, this appears to usually be added
by some ruby code in application.html.haml, but since we have a static index.html
this never gets inserted into the HTML. Rather than embedding it into the HTML,
just make the two logos pull from files in public/.
This does not update the branding of the files, just makes them appear.
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/4
Co-authored-by: julia <midnight@trainwit.ch>
Co-committed-by: julia <midnight@trainwit.ch>
This also prevents the 'Can't verify CSRF token authenticity' errors that popup whenever you modify a 'web setting', such as the column layout.
~~NB: There is something funky going on. This works 99% of the time and sometimes doesn't?~~ Fixed now, there was two bits of stuff in verify_state doing the same thing, removed the duplicate.
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/2
Co-authored-by: julia <midnight@trainwit.ch>
Co-committed-by: julia <midnight@trainwit.ch>
The modifications you made are somewhat janky; for instance, editing a toot with an existing content warning makes the UI look very weird and doesn't quite work.
Glitch already has a feature for this, so simply turn it on by default. This should do the same thing.
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/1
Co-authored-by: julia <midnight@trainwit.ch>
Co-committed-by: julia <midnight@trainwit.ch>
Zoë Bijl