Kanal: Nachrichten schicken

Layout der Elemente

Das Raster mit sechs Spalten: Breiten, Höhen, Mindestgrößen und was die App selbst zurechtrückt.

Elemente in einer Nachricht stehen in einem Raster. Mit zwei Feldern bestimmst du, wie groß ein Element ist: width und height. Den Rest erledigt die App.

Das Raster

Die Fläche unter dem Text einer Nachricht ist in 6 Spalten geteilt. width sagt, wie viele davon ein Element belegt:

`width`	Breite
`6` (Standard)	die ganze Breite
`3`	die Hälfte
`2`	ein Drittel

Die Elemente füllen die Zeilen von links nach rechts, in der Reihenfolge deiner Liste. Passt das nächste nicht mehr in die Zeile, beginnt eine neue.

Wartung shop-api

Heute 22 Uhr, etwa 10 Minuten.

Wartung

Deploys

Neu starten

Die drei Buttons haben width 2. Die Schalter haben width 3, passen in der schmalen Blase aber nicht nebeneinander. Die App setzt sie deshalb untereinander.

Die Liste dazu, im Feld elements von POST /v1/push:

JSON

[
  {"type": "toggle", "id": "wartung",  "label": "Wartung", "value": true, "width": 3},
  {"type": "toggle", "id": "deploys",  "label": "Deploys", "width": 3},
  {"type": "text",   "id": "neustart", "text": "Neu starten", "style": "caption"},
  {"type": "button", "id": "api",      "label": "API",  "width": 2, "height": 56},
  {"type": "button", "id": "shop",     "label": "Shop", "width": 2, "height": 56},
  {"type": "button", "id": "db",       "label": "DB",   "style": "secondary", "width": 2, "height": 56}
]

Die Höhe

Ohne height ist ein Element so hoch, wie sein Inhalt braucht. Mit height gibst du eine Mindesthöhe in Punkten an. Braucht der Inhalt mehr, wird das Element höher.

Dafür ist height gut:

Ein Button wird zur großen Kachel, zum Beispiel "height": 56.
Ein Diagramm bekommt höhere Balken, zum Beispiel "height": 220.

Ein Text hat keine height. Er ist immer so hoch wie sein Inhalt.

Mindestgrößen

Damit alles lesbar und gut antippbar bleibt, hat jedes Element Grenzen:

Element	Breite mindestens	Höhe
`text`	2 Spalten	nach Inhalt
`button`	2 Spalten	44 bis 240
`toggle`	3 Spalten	64 bis 240
`input`	3 Spalten	160 bis 400
`chart`	3 Spalten	120 bis 480
`table`	3 Spalten	80 bis 800

Gibst du weniger oder mehr an, lehnt Samy das nicht ab, sondern bringt den Wert auf die Grenze. Was geändert wurde, steht in der Antwort von POST /v1/push im Feld warnings:

JSON

{
  "message_id": "5b0c1a52-7c1e-4a43-9d0b-2f6f0c7d1e11",
  "warnings": ["wartung: width 2 → 3 (Mindestbreite für toggle)", "db: height 30 → 44 (Mindesthöhe für button)"]
}

Nur eine width außerhalb von 1 bis 6 ist ein Fehler (400).

Was die App selbst zurechtrückt

Handys sind verschieden breit, und eine Nachricht ist schmaler als der Bildschirm. Die App passt dein Layout deshalb an, damit es immer aufgeräumt aussieht:

Der Inhalt bekommt Platz. Passt eine Beschriftung nicht in die angegebene Breite, macht die App das Element breiter. Passt es dann nicht mehr in die Zeile, rutscht es in die nächste.
Zeilen sind immer voll. Bleibt in einer Zeile Platz frei, werden ihre Elemente breiter. Ein einzelnes Element mit width: 3 steht also über die ganze Breite.
Gleiche Höhe. Karten und Buttons in einer Zeile sind gleich hoch. Text bleibt oben links.
Diagramme zeigen bei vielen Punkten nur jede zweite oder dritte Beschriftung.

Dein width ist also ein Wunsch, kein Befehl. Zwei Elemente mit width: 3 und langen Beschriftungen stehen in einer Nachricht oft untereinander. Plane grob und sieh dir das Ergebnis auf dem Handy an.

Tipps

Fang ohne width an. Alles untereinander sieht immer ordentlich aus.
Halt Beschriftungen kurz, dann passen zwei Elemente nebeneinander.
Drei Buttons mit kurzer Beschriftung, width: 2 und height: 56 ergeben eine Reihe Kacheln.
Ein Text mit style: "caption" über einer Gruppe wirkt wie eine Zwischenüberschrift.
Fertige Beispiele zum Abschauen stehen unter Vorlagen.