User:Johan G/Table style sandbox
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...