- Betroffene Version
- WoltLab Suite 3.1
Sehr geehrte Woltlab Community,
ich möchte in den Templates meines Stils manche Boxen (z.B das Logo) Mobil anders anordnen als auf Desktopgeräten.
Bisher war alles kein Problem... Ich habe beim Logo beispielweise einfach mit media querys und "display: none;" gearbeitet. Beim userPanel bin ich jetzt allerdings auf ein Problem gestoßen und habe leider noch keinen Weg gefunden dieses zu beheben.
Das userPanel ist zweimal eingebunden, einmal im pageHeader (mobil) und einmal in der pageHeaderfacade (Desktop). Der Hintergrund dabei ist, dass der Header (Menü und Logo) sticky sein sollen, das userPanel aber nicht. Das habe ich wie oben erwähnt mit mediaquerys umgesetzt, jedoch funktioniert nur das userPanel, welches im Template weiter oben included ist. Das untere wird zwar korrekt angezeigt, kann aber bei Mobilgeräten nicht geklickt werden und bei Desktopgeräten wird man falsch weitergeleitet. Es geht also beispielsweise kein Kontrollzentrum auf sondern man wird direkt zum Profil weitergeleitet usw.
Meine Vermutung ist, dass das irgendwie mit dem JS Code des userPanels zutun haben muss aber ich weiß leider nicht wie ich es anders einbinden kann außer das pageHeaderUser Template zweimal zu includen.... dadruch wird halt leider auch der JS Code zweimal eingebunden wodurch möglicherweise dieser Fehler hervorgerufen wird....
Hat jemand eine Idee wie ich das umsetzen könnte? Bin für jede Hilfe sehr dankbar.
Mein pageHeader Template sieht so aus:
<div id="pageHeaderContainer" class="pageHeaderContainer">
<header id="pageHeader" class="pageHeader">
<div class="desktopOnly">
<div id="pageHeaderPanel" class="pageHeaderPanel">
<div class="layoutBoundary">
{include file='pageHeaderMenu'}
{include file='pageHeaderLogo'}
</div>
</div>
<div id="pageHeaderFacade" class="pageHeaderFacade">
<div class="layoutBoundary">
{include file='pageHeaderSearch'}
{include file='pageHeaderUser'}
</div>
</div>
</div>
<div class="desktopOnly">
<div id="pageHeaderPanel" class="pageHeaderPanel">
<div class="layoutBoundary">
{include file='pageHeaderMenu'}
{include file='pageHeaderUser'}
</div>
</div>
<div id="pageHeaderFacade" class="pageHeaderFacade">
<div class="layoutBoundary">
{include file='pageHeaderSearch'}
{include file='pageHeaderLogo'}
</div>
</div>
</div>
<script data-relocate="true">
require(['WoltLabSuite/Core/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
UiPageHeaderFixed.init();
});
</script>
</header>
............. etc.
Alles anzeigen
Also das Logo und das userPanel sind je nach Auflösung verschieden angeordnet.... Dargestellt wird auch alles richtig nur funktioniert das userPanel eben nicht mehr ordentlich.... in diesem Beispiel funktioniert es auf Desktopgeräten aber auf mobilen Geräten nicht (weil desktopOnly über mobileOnly steht)
Ich hoffe es kann mir jemand helfen, vielleicht gibt es ja auch eine bessere Methode meine Vorstellung umzusetzen als mit display:none zu arbeiten...
Danke im Vorraus.
Mit freundlichen Grüßen,
Max