| 1 | {{/* remote — GET /p/{session}/remote?t=, the phone in the presenter's |
| 2 | hand. |
| 3 | |
| 4 | Four buttons, each its own form, each big enough to hit without |
| 5 | looking down (spec §3.4, §8). Above them: the slide the room is |
| 6 | looking at, the one coming next, and the notes for the one that is |
| 7 | up — rendered at the phone viewport, because that is the viewport |
| 8 | this page is on. |
| 9 | |
| 10 | The script makes it feel live (a swipe, and the slide updating |
| 11 | when somebody else moves it). Nothing here needs it: with scripts |
| 12 | off each button posts and comes straight back. */}} |
| 13 | {{define "page-head"}}<link rel="stylesheet" href="{{asset "static/slides.css"}}"> |
| 14 | <script defer src="{{asset "static/present.js"}}"></script> |
| 15 | <style> |
| 16 | /* The buttons are the screen. 56px is well past the 24 by 24 floor |
| 17 | because this one is pressed in the dark, mid-sentence, by somebody |
| 18 | looking at a room rather than at their hand. */ |
| 19 | [slides-remote-commands] { |
| 20 | display: grid; |
| 21 | gap: var(--rst-sp-3); |
| 22 | grid-template-columns: 1fr 1fr; |
| 23 | } |
| 24 | [slides-remote-commands] form { |
| 25 | margin: 0; |
| 26 | } |
| 27 | [slides-remote-commands] button { |
| 28 | inline-size: 100%; |
| 29 | min-height: 56px; |
| 30 | } |
| 31 | [slides-remote-preview] { |
| 32 | display: grid; |
| 33 | gap: var(--rst-sp-3); |
| 34 | grid-template-columns: 2fr 1fr; |
| 35 | } |
| 36 | /* The two slides are pictures of themselves (presentation.go's |
| 37 | slideThumbImg): one <img> each of the session's SVG thumbnail, |
| 38 | rather than a live copy of the slide. A border and a background |
| 39 | under it so a picture still loading is a slide-shaped space. */ |
| 40 | [slides-thumb-img] { |
| 41 | aspect-ratio: 16 / 9; |
| 42 | background: var(--rst-surface-2); |
| 43 | block-size: auto; |
| 44 | border: 1px solid var(--rst-line); |
| 45 | border-radius: var(--rst-radius); |
| 46 | display: block; |
| 47 | inline-size: 100%; |
| 48 | } |
| 49 | [slides-tools] { |
| 50 | display: flex; |
| 51 | flex-wrap: wrap; |
| 52 | gap: var(--rst-sp-2); |
| 53 | } |
| 54 | [slides-counter] { |
| 55 | color: var(--rst-text-muted); |
| 56 | margin: 0; |
| 57 | } |
| 58 | </style>{{end}} |
| 59 | {{define "content"}} |
| 60 | {{template "page-header" dict "Title" .Title "Sub" .DeckTitle}} |
| 61 | |
| 62 | <div slides-remote data-session="{{.Session}}" data-remote-token="{{.Controls.Token}}" |
| 63 | data-slide="{{.Now}}" |
| 64 | data-blackout="{{if .Blackout}}true{{else}}false{{end}}"> |
| 65 | <div slides-remote-preview> |
| 66 | <div> |
| 67 | <h2>{{.CurrentLabel}}</h2> |
| 68 | {{.Current}} |
| 69 | </div> |
| 70 | <div> |
| 71 | <h2>{{.NextLabel}}</h2> |
| 72 | {{if .HasNext}}{{.Next}}{{end}} |
| 73 | </div> |
| 74 | </div> |
| 75 | <p slides-counter>{{.Counter}}</p> |
| 76 | {{if .Blackout}} |
| 77 | {{template "status-pill" dict "Tone" "neutral" "Label" .BlackoutLabel}} |
| 78 | {{end}} |
| 79 | |
| 80 | <div slides-remote-commands>{{template "present-controls" .Controls}}</div> |
| 81 | |
| 82 | <div rst-box> |
| 83 | <h2>{{.NotesLabel}}</h2> |
| 84 | {{if .Notes}}{{.Notes}}{{else}}<p>{{.NoNotes}}</p>{{end}} |
| 85 | </div> |
| 86 | |
| 87 | <nav slides-tools aria-label="{{.ToolsLabel}}"> |
| 88 | <a rst-btn href="{{.PresenterHref}}">{{.PresenterLabel}}</a> |
| 89 | </nav> |
| 90 | </div> |
| 91 | {{end}} |
| 92 | |
amadan