Tile: Layout für "über-große" Kacheln

[kleinklausi]

Hallo peuter,

könntest Du mir bitte einen Tipp geben wie man am besten ein Layout erzeugt, in dem z.B. ein Web-Widget eine Kachel von 8x8 belegt?

Auf unserer Startseite der zentralen Visu haben wir z.B. rechts den Familienkalender und links ein Bild der Wettervorhersage. Im vorherigen Design habe ich intensiv mit Gruppen gearbeitet. Wie würde ich z.B. am besten so ein Layout bekommen?

Vielen lieben Dank und Grüße,
Moritz

image.png

[peuter]

Mit Bordmitteln gar nicht, weil das Tile-Design für sowas nicht gemacht / gedacht ist. Als kurze Faustregel: Das Tile-Design ist als "mobile-first" Design entworfen, alles ist so entworfen das es auf einen Smartphone-Bildschirm passt. Dein Beispiel würde auf einem Smartphone nicht funktionieren. Im Sinne des Tile-Designs würde man das so umsetzen, dass man eine Kachel mit ein paar Kurzinfos macht, also z.B. aktuelle Temperatur, oder die nächsten 3 Termine als Liste und dann beim Doppelklick dann ein Popup mit weiteren Information im Fullscreen sieht.

Nun zum aber: Natürlich kann man alles auf seine Bedürfnisse umbiegen mit ein paar CSS-Regeln. Wenn Du größere Kacheln möchtest, z.B. 8x8 müsstest du so eine Regeln hinzufügen:

body cv-widget[size="8x8"] {
width: min(calc(100vw - var(--spacing)*3), min(100vw, calc(var(--tileCellWidth) * 3 * 8 + var(--spacing))));
height: calc(var(--tileCellHeight) * 3 * 8 + var(--spacing) * 3);
}​

Dann kannst Du Widgets in dieser Größe erzeugen mit <cv-widget size="8x8">...

Wenn es nur eine anderen Internetseite sein soll die eingebettet wird, dann geht das z.B. auch so auf voller Bildschirmbreite:

<cv-group name="Webseite">
    <cv-web style="width: 100%; min-height: 600px;" src="http://webseite/" allow-fullscreen="true"/>
</cv-group>​

Und ansonsten kann man mittels CSS-Regeln alles noch mehr anpassen, setzt dann aber auch je nachdem wie weit man da gehen möchte tiefere Kenntnisse von CSS vorraus.

[kleinklausi]

Vielen Dank Tobias!
Das hilft mir zu verstehen - und das ist ja schon mal was ;-)

Grüße