joernweissenborn / lcars

CSS Framework to style web pages like the fictional computer operating system of a popular sci-fi franchise.
http://joernweissenborn.github.io/lcars/
MIT License
333 stars 80 forks source link

brackets to support text content #54

Open dthv opened 4 years ago

dthv commented 4 years ago

I'd love to see brackets of all kinds support text content like elements do. While left and right brackets obviously can only support one or two letters (probably numbers?), the top and button brackets can support text according to their width. The content of hollow brackets should appear white, by default, to be readable on black backgrounds, obviously. :-)

jrwarwick commented 3 years ago

Would you mind perhaps creating a mock-up picture (or you can always provide link to a "canon" screen capture) of what you have in mind?

What text alignment options would be appropriate?

joernweissenborn commented 3 years ago

The brackets can encapsulate anything. They are designed in a way that you can simply put them at the front/end of your lcars-row/column, no magic here. They just resize to fit the height/width of whatever is in between, so they visually catch it. What is in between then is up to you :)

Am Mo., 9. Nov. 2020 um 20:31 Uhr schrieb Justin Warwick < notifications@github.com>:

Would you mind perhaps creating a mock-up picture (or you can always provide link to a "canon" screen capture) of what you have in mind?

What text alignment options would be appropriate?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/joernweissenborn/lcars/issues/54#issuecomment-724229642, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARG7QJVXIG55N6SRRQJVWDSPA7QNANCNFSM4Q4VYBIA .

dthv commented 3 years ago

lcars-mockup

This is what I meant. I do not have canon screen capture at hands, but as a general rule, every LCARS element could/should be able to display text and/or being a functional button.

Just imagine styling a lightbox with brackets that surround the presented image. Clicking the left/right brackets for left/right navigation is super intuitive. Alternatively, if you choose to use top/bottom brackets, you could display text that describes the image into the brackets and effectively use the ("black")space.

jrwarwick commented 3 years ago

Although I agree that all elements of LCARS interface are potentially input/button/controls, I do not totally agree that all elements would or should have direct labeling. I believe there are some things that are pure geometry and users are just expected to be familiar or to intuit the function. Very much like our real modern scrollbars; no words/labels, just a shape to interact with. That, said, here it is what those brackets look like currently, by default, if you throw text into them: image Not very LCARS-ish, to be sure, and not even legible in some cases. I think providing decent defaults that resemble your mock-up makes sense, and cannot harm anything. After a bit of poking around, I think the answer is the (somewhat) newer flexbox rules of CSS. I have a recollection that Xenziffen was working on some enhancements using flexbox. I will throw together a minimal improvement in my own branch and then we can make some comparisons and think about it and discuss some more.

jrwarwick commented 3 years ago

My minimal, decent defaults: To preview: http://htmlpreview.github.io/?https://github.com/jrwarwick/lcars/blob/improve-brackets/lcars/index.html

image

At some point, we should examine @xenziffen's work on bracket fixing: https://github.com/xenziffen/lcars/commit/a1c40d74d82e8c98955b33cbf69a7f52091ebfc2#diff-41c1ea49b3e4c2f19aa910a7f8a75fdd09e091536277d0178d875d301b94bfec

It may contain some more robust styling that covers more situations or something. It would be helpful is someone could checkout both of them and then just sort of poke around and try different stuff to see how they each behave differently.

Then we can create a PR with the best approach, after the primary branch is renamed to "main".