User:Johan G/Table style sandbox

From FlightGear wiki
Jump to navigation Jump to search

Testing out some ideas for having more consistent looks on checklists, key combinations and OS prompt variations.

Checklists

Using a mix of tables and div tags

EMERGENCY CHECKLIST
LEFT GIZMO ON
RIGHT GIZMO ON
MIDDLE GIZMO AS NEEDED
EMERGENCY CHECKLIST (CHANGED)
LEFT GIZMO ON
RIGHT GIZMO ON
MIDDLE GIZMO AS NEEDED
NORMAL CHECKLIST (CHANGED)
LEFT GIZMO ON
RIGHT GIZMO ON
MIDDLE GIZMO AS NEEDED
NORMAL CHECKLIST
LEFT GIZMO ON
RIGHT GIZMO ON
MIDDLE GIZMO AS NEEDED

Inserting a table with an embedded table with a change bar breaks the dotted line marking the emergency checklist. Lets see if we can do this another way.

Having an empty column to the left, it is possible to insert a multi-row cell with a 2 px border that emulates a change bar, without breaking the red and white border of the emergency checklist. (See below example.) The questions is: How do I make this simple for the users with templates?! Also, I seem to have to go for fixed cell widths (still got that to do).

pre-start checklist

C Right gizmo on R
F Middle gizmo on M
E Left gizmo As needed L / ⇧ Shift+L
C Right gizmo on R
F Middle gizmo on M
E Left gizmo As needed L / ⇧ Shift+L

engine start checklist

C Middle gizmo on M
F Middle gizmo off ⇧ Shift+M
A Announce Well done ⇧ Shift+- Well done ↵ Enter

Emergency checklist

F Announce Ops! ⇧ Shift+- Ops! ↵ Enter
C Announce Ooh, sh**#!! ⇧ Shift+- Ooh, sh**#!! ↵ Enter
C Overhead gizmo off ⇧ Shift+O
C New pants As needed ( P )
F Announce butterfingers ⇧ Shift+- Butterfingers ↵ Enter
C Announce oh, here we go ⇧ Shift+- Oh, here we go ↵ Enter
C Overhead gizmo off ⇧ Shift+O
F New career on ⇧ Shift+ESC 
<div style="width: 50%; border: 1px solid black; padding: 0px;  text-transform: uppercase;">
<div style="background-color: #FFD; margin: 0px; border: none; padding: 0px; padding-left: 32px;">
'''pre-start checklist'''
{|
|
| style="width: 1.5em;"|

| colspan="2" |  <!-- The hard way to do change bars -->
|-
| rowspan="2" style="border-left: 2px solid black;"|

| '''C''' || Right gizmo || '''on''' || {{key press|R}}
|-
| '''F''' || Middle gizmo || '''on''' || {{key press|M}}
|-
| || '''E''' || Left gizmo || '''As needed''' || {{key press|L}} / {{key press|Shift|L}}
|}<!--


The easy way to do change bars

--><div style="margin: 0px; margin-left: 2px; border: none; border-left: 2px solid black; padding: 0px; padding-left: 2px;">
{|
| style="width: 1.5em;"| '''C'''
| Right gizmo || '''on''' || {{key press|R}}
|-
| '''F''' || Middle gizmo || '''on''' || {{key press|M}}
|-
| '''E''' || Left gizmo || '''As needed''' || {{key press|L}} / {{key press|Shift|L}}
|}
</div>
</div>
<div style="background-color: #DFF; margin: 0px; border: none; padding: 0px; padding-left: 32px;">
'''engine start checklist'''
{|
|
| style="width: 1.5em;"| '''C'''
| Middle gizmo || '''on''' || {{key press|M}}
|-
| || '''F''' || Middle gizmo || '''off''' || {{key press|Shift|M}}
|-
| || '''A''' || Announce || '''Well done''' || {{key press|Shift|-}} <tt style="text-transform: none;">Well done</tt> {{key press|Enter}}
|}
</div>
<div style=" style="margin: 0px; margin-left: 5px; border: none; border-left: 15px dotted red; padding: 0px; padding-left: 10px;">
'''Emergency checklist'''
{|
|
| style="width: 1.5em;"| '''F'''
| Announce || '''Ops!''' || {{key press|Shift|-}} <tt style="text-transform: none;">Ops!</tt> {{key press|Enter}}
|-
| || '''C''' || Announce || '''Ooh, sh**#!!''' || {{key press|Shift|-}} <tt style="text-transform: none;">Ooh, sh**#!!</tt> {{key press|Enter}}
|-
| rowspan="2" style="border-left: 2px solid black;"|

|| '''C''' || Overhead gizmo || '''off''' || {{key press|Shift|O}}
|-
| '''C''' || New pants || '''As needed''' || ( {{key press|P}} )
|}
<div style="margin: 0px; margin-left: 2px; border: none; border-left: 2px solid black; padding: 0px; padding-left: 2px;">
{|
| style="width: 1.5em;"| '''F'''
| Announce || '''butterfingers''' || {{key press|Shift|-}} <tt style="text-transform: none;">Butterfingers</tt> {{key press|Enter}}
|-
| '''C''' || Announce || '''oh, here we go''' || {{key press|Shift|-}} <tt style="text-transform: none;">Oh, here we go</tt> {{key press|Enter}}
|-
| '''C''' || Overhead gizmo || '''off''' || {{key press|Shift|O}}
|-
| '''F''' || New career || '''on''' || {{key press|Shift|ESC}}
|}
</div>
</div>
</div>


CSS, yeah! <div> and CSS to the rescue, now I can do LaTeX-esque begin and end templates for the three cases, though I am not sure it is preferable.

Part of checklist What's needed
Beginning and end Starting a <div> separation with border and forced uppercase
Sections "Header", tint, margin and padding
Emergency sections "Header", tint, margin, padding and left border
Changed sections Margin, padding and left border

I could also do a cheklist-begin and a checklist-end and a checklist section template that an be used several times in a row and can be set up for normal, changed, emer and emer changed. Like so: 

{{checklist-begin}}

{{ckecklist-section
|title= |emer=no |chg=no
|crew member|noun|verb|action
|crew member|noun|verb|action
...
}}

...

{{checklist-section}}

{{checklist-end}}

Gijs dotted line fix

One additional idea that did not work out that well: trying to add a dotted line behind the noun. I tried several variations, but it seems impossible to fill that last portion of the cell with a dotted line underneath.

pre-start checklist

C Right gizmo on R
F Middle gizmo (make this line longer) on M


With a bit of help from Gijs the dotted line worked out rather well anyway. Thanks Gijs! (diff)

His fix is in this snippet i the table: 

| style="display: table; white-space: nowrap;" | Right gizmo<span style="background-color: yellow; border-bottom: 1px dotted grey; width: 100%; display: table-cell;"></span> || '''on''' || {{key press|R}}

Here's the full source (but do note that the div tags break in a narrow browser window): 

<div style="width: 50%; border: 1px solid lightgrey; padding: 0px;  text-transform: uppercase;">
<div style="background-color: #FFD; margin: 0px; border: none; padding: 0px; padding-left: 32px;">
'''pre-start checklist'''
{|
| style="width: 1.5em;"| '''C'''
| style="display: table; white-space: nowrap;" | Right gizmo<span style="background-color: yellow; border-bottom: 1px dotted grey; width: 100%; display: table-cell;"></span> || '''on''' || {{key press|R}}
|-
| '''F''' || Middle gizmo (make this line longer) || '''on''' || {{key press|M}}
|}
</div>
</div>

I just noticed how all the previous examples completely breaks when the browser window is narrowed. In other words: Back to the drawing board...

—Johan G (Talk | contribs) 14:51, 12 November 2013 (UTC)

Doing it with tables instead of div

In my other sandbox, User:Johan G/Messagebox style sandbox, I had problems with boxes breaking when built with <div> when narrowing my browser window, However that did work out with tables, so why not test tables instead?

For a while I will use class="wikitable" till I have settled for a structure. Lets here try the following pattern (Note that I used another pattern above):

checklist title
emergency barber pole change bar noun verb crew member key

Elements

checklist title
Title of a part of a checklist. Uppercase, centred or left aligned, e.g. ENGINE START CHECKLIST.
emergency barber pole
That white and red marker along the edge of emergency checklists. Other variants also exist, e.g. red border.
change bar
A vertical black thin bar marking changed sections.
noun
Non-upper case control etc. involved in the task, followed by a dotted line filling that cell, e.g. Window Heater.... /Window heater.....
verb
What is to be done. Uppercase, e.g. AS NEEDED
crew member
Member of the crew to do that task. Common abbreviations are e.g. C, F, F/O, F/E, PF, PNF, PM, PLT
key
Any key or key combination, e.g. ⇧ Shift+B. Conditional keys should be in parenthesis.

This will probably have to be both nested and sequenced (i.e. by tables in sequence) to work out.

Non-nested

checklist title
EMER CHG Noun VERB C/M Key
Noun VERB C/M Key
Noun VERB C/M Key
CHG Noun VERB C/M Key
Noun VERB C/M Key
Noun VERB C/M Key
checklist title
EMER CHG Noun VERB C/M Key
Noun VERB C/M Key
Noun VERB C/M Key
CHG Noun VERB C/M Key
Noun VERB C/M Key
Noun VERB C/M Key

Nested templates

Hmm. I noted that the emergency or not need not be included, as they can be handled by border-left and margin-left. Anyway, I think nested tables might actually be maintainable using nested templates and tables.

EMER CHECKLIST TITLE
CHG
Noun VERB C/M
Noun VERB C/M
CHG
Noun VERB C/M
Noun VERB C/M
NORM CHECKLIST TITLE
CHG
Noun VERB C/M
Noun VERB C/M
CHG
Noun VERB C/M
Noun VERB C/M


One possible way to do it follows below. A few things would be nice to figured out though, like how to handle instructions found in some flight manuals (i.e. not in checklists per see) like e.g. "Hydraulic Brake Pressure Precharge ... CHECK \Observing hydraulic brake pressure indicator, repeatedly actuate brake pedals until pressure indication stabilizes at approximately 1000." 

{{checklist emer
{{checklist |chg=yes |
{|
| Items
|-
| ...
|}
}}
{{checklist |
{|
| Items
|-
| ...
|}
}}
{{checklist norm
{{checklist |chg=yes |
{|
| Items
|-
| ...
|}
}}
{{checklist |
{|
| Items
|-
| ...
|}
}}

Useful resources

HTML and CSS

Checklist typography etc

Retrieved from "https://wiki.flightgear.org/w/index.php?title=User:Johan_G/Table_style_sandbox&oldid=94881"