Port settings to vue

[CarlSchwan]

TODOs:

• Implement saving
• Admin settings
• Check with the screen reader to confirm that the accessibility improved
• Remove old php templates
• Make cypress tests work

[CarlSchwan]

@szaimen pointed out to me #589, I'll try to merge both efforts

[jancborchardt]

Nice! Only details:

• Can you move the Mail/Push checkbox columns to the left again, so there’s not so much whitespace and it’s all nicely left-aligned like before? See screenshot below
• I can’t fully tell from the code – are the "Files", "Calendar, contacts and tasks" and "Other activities" marked up as h3?

[nimishavijay]

Can you move the Mail/Push checkbox columns to the left again, so there’s not so much whitespace and it’s all nicely left-aligned like before? See screenshot below

I actually like it how @CarlSchwan did it, before the text alignment was a bit messy.
What do you think about keeping it like this but decreasing the space between the text and checkboxes? @jancborchardt

[CarlSchwan]

Nice! Only details:

* Can you move the Mail/Push checkbox columns to the left again, so there’s not so much whitespace and it’s all nicely left-aligned like before? See screenshot below

My main motivation to moving the checkbox to the right was to simplify the layout for screenreader (we don't have this two level of headers) and since the content is read from the left to the right the screenreader will first read the description of the checkbox and then tell the state of the mail notification and push notification for each row.

This also solves some alignment issues with the content not at all left aligned. See screenshot

* I can’t fully tell from the code – are the "Files", "Calendar, contacts and tasks" and "Other activities" marked up as h3?

Done, this is now using h3

[jancborchardt]

Cool, sounds good @CarlSchwan – do you mind decreasing the space between text and checkboxes a bit like @nimishavijay proposed? :)

[CarlSchwan]

I still need one approval ;)