Make more complex example

[joernweissenborn]

The current demo only shows how to use the convenience lcars-app-container, which is a rather conservative form for app. Most users wish to create more fancy UIs for which the lcars-app-container is unsuited.

Inspired by #13, thanks to @tenleftfingers

[joernweissenborn]

Thanks for the love, I am on it.

What I want to know: what should a basic example should include?

It is clear that elbow and the grid has to be explained.

But there are always so many details to be solved and thought of.

I would really love get input from you guys out there.

Live long and prosper!

[DBrianKimmel]

Here's an idea. Make the example in the form of a mini-tutorial.

First, explain the philosophy needed to set up a working lcars display. Then do several basic page types with a minimal setup code. Perhaps a page with an outside border of sweeps and test in the middle (leave out the text, just indicate where it would go. Several different page styles some using headers and footers would be great.

Then take a couple of different approaches to filling in various parts of the page to do several different types of pages. Don't get too carried away with any example, just enough code to give the idea of how it would work. Be sure to give enough examples to show the different types of usage of the components.

Good luck

Brian

On Mon, Aug 19, 2019 at 7:14 PM Jörn Weißenborn notifications@github.com wrote:

Thanks for the love, I am on it.

What I want to know: what should a basic example should include?

It is clear that elbow and the grid has to be explained.

But there are always so many details to be solved and thought of.

I would really love get input from you guys out there.

Live long and prosper!

— 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/14?email_source=notifications&email_token=AAMFFTOV4J5UUE7M2QBO54TQFMSM3A5CNFSM4IMCLMXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4USBFI#issuecomment-522789013, or mute the thread https://github.com/notifications/unsubscribe-auth/AAMFFTPEHAQOQ3FZTDUYXTTQFMSM3ANCNFSM4IMCLMXA .

-- D. Brian Kimmel

[ghost]

Two illustrations I'd like to see. Maybe seperate or maybe they can be done in one demo. Lots of comments in the code would help.

1) My main question is about how to lay things out (the grid, as you say). Avoiding the included header, footer (and maybe container classes) would be helpful in this instance, to see how the components behave in more varied scenarios. Any fundamental rules of layout that are worth mentioning would be helpful, for example; it seems that the top level (inside ) should be lcars-row and lcars-column elements, which will contain the components. The elbow could be an advanced illustration in this demonstration.

2) A demo of all the other / more exotic components compenents in action; I see lcars-element-addition and lcars-element-decorator but I can't figure out how to make them work.

Keep up the good work. I'm finding lots of fundamental flaws in my code and reworking it. Eventually I'll be in a position to make some nice applications with this libarary. I'm commited.

Qapla' ! :)

[jrwarwick]

Everyone has made good suggestions here, and #13 and #19 inform the discussion further, I think. I propose:

First defining the standard basic/typical layouts, and then creating a templateX.html file for each. These should be clean and well commented inside to illustrate the way rows and columns work, and how to nest correctly, which CSS classes are too-specific to use in all situations, etc. The highlights of these source comments might be summarized and placed in the content of the project's main index.html/documentation page.

Lastly, build off of the work done in the standard templates to create the more complex example. Again, a little source embedded comments to show where you had to add some styling or where special considerations for order of nesting and so on.

For the initial basic standard template set, I refer to "The LCARS Frame" section of The LCARS Manifesto . I illustrate, and (add a fifth type) here:

 _   _________________   _
(_| |_________________| |_)

     Type 1 Template

 _   _________________   _
(_| |_________________| |_)

  _____________________   _
 /    _________________| |_)
/    /
|   |
|   |  Type 2 Template
|   |
|   |
|   |
 \   \_________________   _
  \____________________| |_)

 ___ 
|   |        Type 3 Template
\   \_______________________
 \__________________________|
  __________________________
 /    ______________________|
/    /
|   |
|   |  
|   |
|___|

 _____      _______________
|     \    /               |
|____  \  / _______________|
     \ | | /
     | | | | Type 4 Template
     | | | |  
     | | | |
     | | | |
     | | | |
 ____/ | |  \______________
|______/  \________________|

           _________________
          /                 |
         /   _______________|
         |  /
         | |  Type 5 Template 
         | |  
         | |
         | |
         | |
 _______/  |
|_________/ 

[physnoct]

I have done some quick templates for types 1 and 2. templates.zip For the others, I think the file lcars.css would need to be modified.

[physnoct]

Done template type 3

[jrwarwick]

@physnoct I took a quick look at type1 and it looks really good to me. Very clean on the inside, scroll and resize behavior is what I would expect. Really nice. Tested on chrome on Windows.

I wonder what you and what @joernweissenborn think about possibly including so called "responsive" css class changes for the grid size. What I mean is: when screen is pretty big, maybe lcars-u-5 should be replaced with lcars-u-8 (automagically with javascript).

Perhaps, @physnoct, you would like to fork the repository and put your templates thus far into a Pull Request? I'd like to see type 3 as well.

[physnoct]

Here is the type 3 template type3.html.gz

[jrwarwick]

@physnoct I just tried type 3 and it looks really nice overall, but I found that content I was putting into the main container is up underneath the header area. Maybe there is a class missing ? Or some kind of spacer needed?