User:Johan G/Table style sandbox

From FlightGear wiki
< User:Johan G
Revision as of 20:46, 12 November 2013 by Gijs (talk | contribs) (Fix dotted line)
Jump to navigation Jump to search

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

Some trials

Checklists

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}}


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


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)


Useful resources