allow $:/core/ui/ControlPanel/Basics to work in the story river + some docs about utility classes

[pmario]

This PR is draft atm, since 1 doc tiddler needs prove-reading and it contains a lot of whitespace for easy editing.

For reviewers

• Dev Snapshot to play with: basics-fix-in-story-river-plus-docs (2).zip

• Please check the wording in the docs text

To reproduce:

• open https://tiddlywiki.com/#%24%3A%2Fcore%2Fui%2FControlPanel%2FBasics
• the text input elements don't have the right size
• The second problem with tables in general. code snippets clash with table borders

Problem with ControlPanel table in story river

The second problem with tables in general

Code snippets in tables clash with table border

This PR

• This PR allows the $:/core/ui/ControlPanel/Basics tiddler to work in the story river.

• The screenshot also shows the Basics tiddler in the sidebar, to prove that the used classes also work there.

• The PR also contains 3 doc tiddlers that have been updated with the info needed to understand the concept

• This PR should also deal with the second code snippet problem described above.

• The tiddler: editions/tw5.com/tiddlers/wikitext/Tables in WikiText Utility Classes.tid contains a lot of whitespace, that will be removed. It only makes editing with the preview ON easier.

This PR should also allow users to create table based "input forms" similar to those we use in the ControlPanel. IMO user forms should be consistent with the current theme.

[pmario]

@twMat ... Could you please have a look at the docs?

[twMat]

@twMat ... Could you please have a look at the docs?

The above linked zip file, right? Will do, hopefully already tonight. Can I give the feedback by replying with a modified zip?

[pmario]

Can I give the feedback by replying with a modified zip?

sure

[twMat]

basics-fix-in-story-river-plus-docs_twMat.zip

OK, I've fiddled around in ~4 doc tiddlers. Hope this is what you requested. Further:

• I propose calling them "Utility Styles" rather than "Utility Classes". Yes, I understand that technically it is more correct with "Classes" but it is unfortunately ambiguous whereas "Styles" is directly clear for both "CSS people" and "non-CSS people".
• I propose simply calling it "Tables" rather than "Tables in WikiText", at least in the headings, because it is understood the docs are about WikiText.

...Thus the tiddler title could be something like "Tables and Utility Styles" or even just "Styling tables" or "Table styling"

• OT: I think we should have a separate doc tiddler on CSS that we link to any time CSS is mentioned. Beyond a brief general note about what CSS is, the doc should explain CSS' role in TW and link to where it is brought up, but also make it clear that it is mostly outside the scope of the TW docs.

[pmario]

@twMat ... It seems you did modify the quote in the "HTML Block Elements" tiddler ... IMO that's not possible. Quotes have to be exact and shouldn't be modified, even if they have typos.

It's possible to create a PR directly at the mozilla repo, that is linked at the bottom of the page: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements.

They provide a link: Edit on GitHub ...

You should use this one and fix the problem there. .. They are very kind folks and they are happy to get feedback. I did create several issues, with some problems I couldn't fix, but I wanted to let them know. They have been fixed in the meantime.

Once it is fixed upstream, we can fix it too

Edit: I found that https://english.stackexchange.com/questions/16619/should-i-fix-typos-grammatical-errors-in-quotation .. but I still think you should create a PR upstream

[twMat]

It seems you did modify the quote in the "HTML Block Elements" tiddler

Ah, I didn't realize it was a direct quote but, regardless, I don't think I actually changed anything in the end. Anyway, just disregard that particular tiddler and I hope the other mods made sense :)

[pmario]

... I hope the other mods made sense :)

Absolutely. ... I think with this in place, there can be a lot more docs about "user created forms" that look nice out of the box.

We have a lot of CSS related requests at Talk, where from my point of view, the "solutions" sometimes are really complex CSS constructions. .. But that's not the users fault. It's just the lack of knowledge and some very basic core definitions. + some docs ;)

I think, they will not only help users, but also bring better consistency to the core UI itself. Even if the differences are almost invisible, like a little bit of padding added to the default tables. .. In the end it makes a big difference in readability.

[pmario]

@Jermolene .. I did update the ZIP file to the latest version in the OT

There is still a lot of whitespace in 1 tiddler for easier editing ... But I think it should be reviewed.

If you are OK with it I'll remove the whitespace and create a "real PR"

[pmario]

I did test it with FF on windows and FF on my Android phone .. Looks good an the phone too

[pmario]

@Jermolene .. Ready for review again -- I did update the OP with a new link to the test version: See: https://pmario.github.io/kitchensink/6912-table-utility-classes.html

It looks good with all the browsers I do have available. See updated OP

[pmario]

@Jermolene pls merge or comment

[Jermolene]

Great thank you @pmario.

[Jermolene]

Hi @pmario I've reverted this PR in the light of #7037, are you able to rework it?

[Jermolene]

@pmario I'm afraid I still have a problem with these changes, and it's an issue we have discussed before.

I think it is a mistake to overwrite browser styles for built-in HTML controls. For example, these recent changes make the text boxes in control panel look the same in all browsers. That really should not be a goal for us. We get better compatibility and usability by using operating system default styling.

I will consider whether to pull those particular changes. It would be good to keep the other enhancements though.

[pmario]

I'm pretty sure, that this PR doesn't change anything with the edit input elements.

[pmario]

@Jermolene The PR https://github.com/Jermolene/TiddlyWiki5/pull/6910 changed those settings because there has been a problem with the new reset we used starting with 5.1.23. It needed to fix the focus-ring for FF.

We did have a lot of requests at Talk that the UI should look the same for all browsers.