Im Kalender Frontend mit mouseover den Teasertext anzeigen

[mathi66]

Hallo allerseits,

wir möchten gerne im Kalender, wenn man mit der Maus über den Kalendereintrag geht mehr zum Inhalt des Event ausgeben.
Der Teasertext würde zum Beispiel ausreichen.

Ist das mit Contao Bordmittel möglich?

Für Hilfe wäre ich sehr dankbar.

Viele Grüße
Mathi

[folkfreund]

Hallo Mathi,

willkommen im Forum!

Ist das mit Contao Bordmittel möglich?

Ja und nein...
Das ist 'mit Bordmitteln' im Sinne 'Häkchen im Backend setzen' nicht möglich. Aber du kannst dir das Ausgabetemplate anpassen und den benötigten HTML-Code beeinflussen. Ohne Nachladen per Ajax würde das aber bedeuten, dass je nach Füllstand deines Kalenders und nach Länge der Teaser u. U. recht viel geladen werden muss.
Im Prinzip würdest du also im Template für jedes Event auch ein div mit dem Teaser erzeugen und dem eine Klasse zuweisen (z.B. eventteaser). Per CSS stellst du ein, dass alle .eventteaser unsichtbar sind ( display:none ) Ebenfalls per CSS kannst du festlegen, dass bei hover über einem Event das jeweilige darin enthaltene div.eventteaser auf display:block; gestellt wird.
.event > .eventteaser {
display:block;
}
Dann bleibt dir noch die Aufgabe, diesen Block ansprechend per CSS zu gestalten und zu positionieren.

Viel Erfolg!

Edit: ich habe bei folkfreun.de eine ähnliche Anforderung umgesetzt, allerdings mit nur viel weniger Information als dem Teaser, dafür die Eventanzeige in einer Lightbox. Der Besucher verlässt also die Kalenderseite nicht. Kannst ja mal schauen :-)

[Andreas]

Mit Boardmitteln nicht, das wäre zu spezifisch.

Du kannst dein Template cal_default leicht anpassen.

...
              <a href="<?= $event['href'] ?>" ... ><?= $event['link'] ?></a>
              <div class="teaser invisible"><?= $event['teaser'] ?></div>
...

Den Selektor ".invisible" solltest du in deinem CSS zur Verfügung haben.
https://github.com/contao/core/blob/...essed.css#L105
Diese Regel versteckt Elemente, lässt sie aber für Screenreader sichtbar.

Das Ganze kannst du dann mit CSS gestalten, z.B. so.

/* CSS */

.mod_calendar {
  overflow: visible;
}
.mod_calendar .event {
  background-color: red;
  position: relative;
}
.mod_calendar .teaser {
  background-color: green;
  border-radius: 10px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .3s ease 0s;
}
.mod_calendar .event a:hover + .teaser {
  width: auto;
  min-width: 200px;
  height: auto;
  margin: 0;
  clip: auto;
  padding: 1em;
  opacity: .95;
  z-index: 1;
} 

[mathi66]

Hi,

werde ich ausprobieren.
Vielen Dank schon mal.

[folkfreund]

Danke Andreas für's Ausformulieren :-)

Ich hatte in der Mittagspause keine Möglichkeit, das selbst auszuprobieren.
Und die Verwendung von .invisible ist eine gute Idee, v.a. wegen der Barrierefreiheit. Daher dann eben nicht das Ein-/Ausblenden via display, sondern durch Rücknahme der Einstellungen der Klasse .invisible - und sogar mit Überbledung! Schön!

Gruß, folkfreund

[Andreas]

Eigentlich wollte ich nur mal nachsehen, ob der Teasertext in dem Modul zur Verfügung steht.

Normalerweise nutzt man ja eine JS-Lösung genannt Tooltip für sowas. Damit hätte man noch mehr Möglichkeiten, z.B. dass sich das Popup intelligent positioniert.

Man kann es auch nur mit display:none, also ohne die Klasse invisible, umsetzen. Kann ja auch so gewollt sein, dass man diese Info von Screenreadern ausschließen möchte. Ich bin es nur so gewohnt, dass ich für Elemente, welche ich ausblende erstmal die Klasse invisible vergebe.

[mathi66]

Mhhh, irgendwie bekomme ich das nicht hin ...
Wenn ich cal_default so anpasse:

<div class="event cal_<?= $event['parent'] ?><?= $event['class'] ?>">
<a href="<?= $event['href'] ?>" title="<?= $event['title'] ?> .... </a>
<div class="teaser invisible"><?= $event['teaser'] ?></div>
</div>

erscheint zwar das Block-Element, aber ohne Inhalt.

Wenn ich den Taeser direkt einbaue (was evtl auch ausreichen könnte):

<a href="<?= $event['href'] ?>" title="<?= $event['title'] ?> - <?= $event['teaser'] ?> - (<?php if ($event['day']) echo $event['day']

erscheint der Teasertext mit HTML Formatierung im Link Popup( <p> Teasertext </p> )

[csm]

... und bei :hover-Lösungen auch immer an die Touch-Geräte denken :-)

[Andreas]

Mhhh, irgendwie bekomme ich das nicht hin ...

Zeige einen Link zur Seite.

Versuche es so zu machen, wie ich gezeigt habe, inkl. CSS.

Template-Code hier im Forum in den PHP-Wrapper setzen.