search

GIRA / PhysicalBits

A web-based programming environment for educational robotics that supports live coding and autonomy using a hybrid blocks/text programming language.
https://gira.github.io/PhysicalBits/
MIT License
18 stars 5 forks source link

first very crude version for demonstrating all-caps mode functionality #16

Closed kristiank closed 4 years ago

kristiank commented 4 years ago

This is very crude and hackish code. I want to test this out on my kids first.

kristiank commented 4 years ago

I now changed the style to use small caps instead of uppercase, as I think it helps young readers more in the direction to learn read mixed size script.

kristiank commented 4 years ago

I'm working on saving the all-caps setting in localStorage. I got the storage part working but I need to make the code more safe as it currently doesn't verify which CSS rule it deletes.

kristiank commented 4 years ago

I'm satisfied with the code now and will resolve any conflicts.

  1. I opted to add a CSS class to ide.css so that the all-caps mode (or all-kids mode?) can be further styled (larger text etc).
  2. The all-caps mode is toggled by simply toggling the allCapsMode class in document.body's classList.
  3. I removed the check that prevented setting the already set locale. This way the UI can be re-rendered in a simple fashion (e.g. I couldn't find another way to trigger the re-rendering).
kristiank commented 4 years ago

I think this pull request is not that crude any more. What do you think, could it be merged?

RichoM commented 4 years ago

Nice work. I already merged it. However, don't you think it would make sense for the checkbox to be somewhere other than the "Internationalization" options. "User interface" might be more appropriate. Or maybe we could add a new section called "General"? If we add the "General" section we could put the "Interactive mode" checkbox in there as well, I don't really like where it is right now. What do you think?

RichoM commented 4 years ago

I've just noticed the "all-caps" option is not applied to the buttons in the top bar. I'm almost sure it was working in one of your previous commits.

kristiank commented 4 years ago

I did change how it works, but give me some time for debugging. I also agree that it can be put elsewhere in the options/menus.

kristiank commented 4 years ago

Hmh... It seems that it is only the button elements (and form select elements) that are not shown with all-caps.

Inspecting with Firefox I can see that the best CSS style rule match for buttons come from a file forms.css (row 634 in it) but I can't understand from where this file is taken. It seems it is downloaded from the net.

RichoM commented 4 years ago

I really don't know why the style is not applied for buttons. And I don't see the forms.css file anywhere. Until we figure this out I added a small hack that seems to fix this: 7acd5d09b2d156ecf9f893a9dc88239d56466187