How to change the header and footer?

[ghost]

I've managed to change the header orientation using a scaleY(-1) transform. But really I'd like to be able to put a header in any place as a row. It seems to be 'stuck' to the top. The newer LCARS displays have the header and footer swapped (so their bars meet in the middle, like this screenshot below). How can I do this with CSS? It has a left column first, then a 'header', then footer and then another left column. This is how the elements should be laid out in this case:

[  .gif  ][ u-1-4 ][u-1-3]      [u-1-3]
[button][button][button]        [button]
[button][button][button]        [button]
[button][button][button]        [elbow][bar][bar][bar][bar]
<ul></ul>        [u-1-7]        [elbow][bar][bar][bar][bar]
[space][button][button]             [button]
[button][button][button]        [button]
[button][button][button]        [button]
[space][space] [button]             [button]
[space][space] [u-1-2 ]             [u-1-5]

[joernweissenborn]

Hi, I see what you want to achieve.

The header and footer are actually just convenience classes for 'simple' UIs.

For your more complex case, I would rather directly start at the body and structure your interface with lcars-row and lcars-column. You can put the elbow anywhere, also outside footer. there is also no need to manually mirror it, since ou can just write lcars-elbow left-bottom.

I will make a more complete example later, but play with the pure lcars grid and the elbow class and its modifier.

I recommend browsing the stylus sources for the options you have for each class, e.g. for the elbow.

Hope this helps!

[ghost]

That is a big help, thank you. Once you explained the header and footer, I was able to arrange things differently. I'm a novice (don't understand the different displays/layouts of CSS), so my code is a bit crazy. I'm looking forward to seeing your more complex example to learn proper practise :)

It's incredible the way things align so well. Just like the real thing. You've made it easy to use. Well done!

[joernweissenborn]

Thank you alot! I did m job well apparently ;)

The buttons and things are actually really easy shapes. But IMHO the core experience of LCARS is exactly the alignment. So you can do that with plain CSS as well, but this library is mainly intended to handle the edge cases and give you designs out of box.

You should look at this btw if you haven't: http://www.lcars-terminal.de/tutorial/guideline.htm

The basic math of the look and feel I found in an article, which unfortunately have been taken down, probably by JJ Abrams....

[joernweissenborn]

By the why, your work looks beautiful, love staring at the gif :)

[joernweissenborn]

can you share the code of your example? I this I basically what I had in mind as example.

[ghost]

Great link, thank you. I will read it all in detail. Pity about the other article :/ Glad you like the gif! I'm also staring at it, imagining all kinds of things that can be build with your libarary; RSS reader, e-mail client, wikipedia browser, google-translate interface, a music player ... :)

I'm attaching my code. It's messy because I don't know what I'm doing so lots of inline styling. The fundamental rule of consistent alignment, as you say, has been broken here. I've coded this for a 1600px wide window, although 1280px should adapt well, with some parts left out.

The archive contains your library, but only these files are unique: ./lcars/css/lcars.css (I made changes here - not a good idea, but I wasn't expecting to get results) ./lcars/css/test-animations.css (animations for the lists - all hard coded unfortunately) ./media_queries.css (I'm in the process of migrating some LCARS-Iarla.zip inline styling to here) ./scrúdú-lcars.php (the main file)

[iron-hope-shop]

Thanks for breaking it down, @joernweissenborn!

@tenleftfingers Dang, I was hoping for a purely html* solution.

[ghost]

vGoldsmith, the PHP can be removed and change the file extension to html. Without the PHP, the two strings (small blue paragraph text up top) will need to be pasted in the Javascript section above for "txt1 =" and "txt2 ="

I'm happy to do it for you, but since my file looks really terrible on anything that isn't 1280 or 1600 wide, it might not be much use to you anyway.

[joernweissenborn]

@vGoldsmith what do mean with not pure css solution?

Please give me further detail about what you want to achieve.

TLF notifications@github.com schrieb am So., 18. Aug. 2019, 06:22:

vGoldsmith, the PHP can be removed and change the file extension to html. Without the PHP, the two strings (small blue paragraph text up top) will need to be pasted in the Javascript section above for "txt1 =" and "txt2 ="

I'm happy to do it for you, but since my file looks really terrible on anything that isn't 1280 or 1600 wide, it might not be much use to you anyway.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/joernweissenborn/lcars/issues/13?email_source=notifications&email_token=AARG7QMQBG6W3CNL6RAXZD3QFDE7PA5CNFSM4IL65NRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4QYGXY#issuecomment-522290015, or mute the thread https://github.com/notifications/unsubscribe-auth/AARG7QKFZ6ACRRC7VWW33LTQFDE7PANCNFSM4IL65NRA .

[iron-hope-shop]

I think I understand the layout a little better after reviewing tenleftfingers's project. @joernweissenborn thanks! This will be enough for me I believe but for the future I support #14 100%