6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

mig · Post by **mig** » Fri Nov 11, 2022 10:04 am

Hallo Ludwig,

danke für den css-Schnipsel. Habs eingestellt, funktioniert und gefällt mir ganz gut, so dass ich's erstmal so lassen werde. Auch auf nem Smartphone und Tablet unter Android mit Firefox tut's das, nachdem ich erstmal herausgefunden hatte, wo ich wielange drücken/ halten muss.

Zwei Dinge sind mir aufgefallen:
1. Im HTML-Tag wird ein margin-top von von 75 px eingestellt, so dass sich die Seite im eingeloggten Zustand weiter hochscrollen lässt als normal.
2. wenn man mit der Maus das Adminmenü nach unten an einer Stelle verlässt, an der es kein Untermenü gibt, dann flackert es (unterschiedlich stark, je nach Mauszeigergeschwindigkeit), bis der transparente Bereich an der richtigen Stelle ist.

Aber wie gesagt, das ist nur im eingeloggten Zustand.

Danke!

lck · Post by **lck** » Fri Nov 11, 2022 11:16 am

mig wrote: ↑
Fri Nov 11, 2022 10:04 am
Auch auf nem Smartphone und Tablet unter Android mit Firefox tut's das, nachdem ich erstmal herausgefunden hatte, wo ich wielange drücken/ halten muss.

Ja, auf Touchscreens ist das :hover meist ein Problem. Das Menü öffnen geht natürlich auch anders in CSS, z.B. per :target (das war mein erster Entwurf), per checkbox oder dann gleich per Javascript, aber dazu ist auch ein Änderung in der template.htm notwendig. Ich wollte erstmal etwas simples, ohne große Eingriffe.

mig wrote: ↑
Fri Nov 11, 2022 10:04 am
1. Im HTML-Tag wird ein margin-top von von 75 px eingestellt, so dass sich die Seite im eingeloggten Zustand weiter hochscrollen lässt als normal.

Das könnte man ändern.

Code: Select all

html {
	margin-top: 0 !important;
}

mig wrote: ↑
Fri Nov 11, 2022 10:04 am
2. wenn man mit der Maus das Adminmenü nach unten an einer Stelle verlässt, an der es kein Untermenü gibt, dann flackert es (unterschiedlich stark, je nach Mauszeigergeschwindigkeit), bis der transparente Bereich an der richtigen Stelle ist.

Ja das ist so, weil man mit der Maus dann wieder über dem hover-Bereich ist. Ich kann dir ja mal noch den anderen Entwurf mit :target zukommen lassen.

mig · Post by **mig** » Fri Nov 11, 2022 7:43 pm

lck wrote: ↑
Fri Nov 11, 2022 11:16 am
Ja das ist so, weil man mit der Maus dann wieder über dem hover-Bereich ist. Ich kann dir ja mal noch den anderen Entwurf mit :target zukommen lassen.

Hieße das, dass das Menü dann per Klick und nicht per Hover-Effekt eingeblendet wird? Müsste man ausprobieren, was sich "besser anfühlt", ist sicherlich Geschmackssache. Schließen müsste es sich dann nach einem Klick auf einen Menüeintrag, oder?

Am Desktop finde ich die Hover-Lösung ganz gut und intuitiv bedienbar, auf dem Smartphone könnte ich mir vorstellen, dass eine Klicklösung praktischer ist, ähnlich den meisten mobilen Menüs, die ja häufig auch per Klick auf z.B. den Hamburger geöffnet werden.

Für eine "one-fits-all"-Lösung wäre wahrscheinlich eine Klick-Lösung besser.

lck · Post by **lck** » Fri Nov 11, 2022 7:44 pm

Hier Version 2 zum Adminmenü.

Template fhs-sectionsOP.
Änderungen müssen im Template CSS und der template.htm gemacht werden. Mach am besten vorher eine Kopie/Sicherung deines jetzigen Templates.

stylesheet.css am Ende einfügen

Code: Select all

/*** Adminmenu show/hide per :target ***/
/* Template fix for Backend */
#header {
    z-index: 2; /* original = z-index: 1; damit überlagert das Menü des TinyMCE5 das mobile Template-Menü */
}

html {
    margin-top: 0 !important;
}
#xh_adminmenu_fixed {
    visibility: hidden;
}
#lck-body:target #xh_adminmenu_fixed {
    visibility: visible;
}
.showHideAdminmenu {
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 9999;
}
a.showAdminmenu, a.hideAdminmenu {
    background-color: #cc3300;
    border-radius: 0 5px 5px 0;
    color: #fff !important;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 1em;
    margin: 0.25em 0;
    padding: 0.25em 0.5em;
    width: 3em;
}
#lck-body:not(:target) #xh_adminmenu_fixed ~ .showHideAdminmenu a.hideAdminmenu,
#lck-body:target #xh_adminmenu_fixed ~ .showHideAdminmenu a.showAdminmenu {
    display: none;
}

template.htm - body-Tag erweitern mit einer ID und darunter den weiteren Code.

Code: Select all

<body id="lck-body" <?=onload();?>>
<?php if (XH_ADM):?>
<div class="showHideAdminmenu">
<a href="#lck-body" class="showAdminmenu" title="Adminmenü öffnen">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</a>
<a href="#0" class="hideAdminmenu"title="Adminmenü schließen">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</a>
</div>
<?php endif ?>

Dann bedarf es noch 2 Änderungen im <head> Bereich:
Hier das "margin",

Code: Select all

.mainContent {
    max-width: 1200px;
    /* margin: 0 auto; */
    margin: 100px auto 0;
    padding: 2em;
}

und hier den header, sichtbar lassen zwecks Template-Menü

Code: Select all

/* #header, */
#footer{
    display: none !important;
}

Ich glaube das war's. Viel Spaß beim umsetzen und testen.

lck · Post by **lck** » Fri Nov 11, 2022 7:55 pm

mig wrote: ↑
Fri Nov 11, 2022 7:43 pm
Hieße das, dass das Menü dann per Klick und nicht per Hover-Effekt eingeblendet wird? Müsste man ausprobieren, was sich "besser anfühlt", ist sicherlich Geschmackssache. Schließen müsste es sich dann nach einem Klick auf einen Menüeintrag, oder?

Ja genau und desweiteren erscheint dann ein Close-Button anstatt des Open-Buttons, falls man es direkt wieder schließen will ohne im Adminmenü einen Link zu klicken.

mig wrote: ↑
Fri Nov 11, 2022 7:43 pm
Am Desktop finde ich die Hover-Lösung ganz gut und intuitiv bedienbar, auf dem Smartphone könnte ich mir vorstellen, dass eine Klicklösung praktischer ist, ähnlich den meisten mobilen Menüs, die ja häufig auch per Klick auf z.B. den Hamburger geöffnet werden.

Am Desktop, ja da finde ich die hover-Lösung auch praktischer/einfacher/schneller. Nach oben muss man mit der Maus sowieso und gleichzeitig öffnet sich dann das Adminmenü.

mig wrote: ↑
Fri Nov 11, 2022 7:43 pm
Für eine "one-fits-all"-Lösung wäre wahrscheinlich eine Klick-Lösung besser.

Je nachdem. Wenn man viel am Smartphone arbeitet, dann ja.

mig · Post by **mig** » Fri Nov 11, 2022 8:09 pm

So, ich habe es eingestellt, und soweit ich das bis jetzt gesehen habe, funktioniert auch alles. Ich werde mal mit beiden Varianten ne zeitlang testen um herauszufinden, was mir besser gefällt

Vielen Dank!

lck · Post by **lck** » Fri Nov 11, 2022 8:11 pm

mig wrote: ↑
Fri Nov 11, 2022 8:09 pm
So, ich habe es eingestellt, und soweit ich das bis jetzt gesehen habe, funktioniert auch alles. Ich werde mal mit beiden Varianten ne zeitlang testen um herauszufinden, was mir besser gefällt

Okay, gut. Danke für die Rückmeldung.

frase · Post by **frase** » Sat Nov 12, 2022 8:32 am

mig wrote: ↑
Fri Nov 11, 2022 8:09 pm
Ich werde mal mit beiden Varianten ne zeitlang testen um herauszufinden, was mir besser gefällt

Mir gefällt die :target-Lösung besser.

@lck
Du hast auch überlegt, wohin mit dem Hamburger – stimmts?
Das Ergebnis ist eigentlich ganz gut. Zwar mit anderer (einfacherer) Technik, als beim abgetrennten Admin-Template, aber im Prinzip ähnlich: ein- und ausblenden je nach Situation.

Ganz private Meinung: Das Hovern nach Menüpunkten gefällt mir eigentlich ganz und gar nicht. Wir sind nur seit Urzeiten daran gewöhnt. Das gibt es kaum anderswo so. Deshalb finde ich das in fhs-adminmenu eigentlich besser und übersichtlicher, wenn auch mit mehr Klicks verbunden.

lck · Post by **lck** » Sat Nov 12, 2022 11:05 am

frase wrote: ↑
Sat Nov 12, 2022 8:32 am
Mir gefällt die :target-Lösung besser.

Danke für's Testen!
Geschmacks- und Gerätesache. Am Desktop ist mir das schnellere persönlich lieber, das wäre das mit hover. Kann ja noch verbessert werden. Mir ging es erst mal um die Funktion und simple Lösungen sind mir persönlich lieber als Komplizierte.

frase wrote: ↑
Sat Nov 12, 2022 8:32 am

Eigentlich nicht, auf Anhieb gut platziert. Nur mit der Größe habe ich noch gespielt. Na ja, ist halt je nach Template nicht unbedingt immer an der richtigen Stelle, ist ja speziell für dein Template fhs-sectionOP. Aber ich glaube weitgehend sollte die Position passen, auch bei kleineren Bildschirmen/mobilen Geräten.

frase wrote: ↑
Sat Nov 12, 2022 8:32 am
Das Ergebnis ist eigentlich ganz gut. Zwar mit anderer (einfacherer) Technik, als beim abgetrennten Admin-Template, aber im Prinzip ähnlich: ein- und ausblenden je nach Situation.

Ja und, es soll auch kein Ersatz dafür sein. Aber wer will kann diese simple Alternative jetzt schon einbauen und nutzen.

frase wrote: ↑
Sat Nov 12, 2022 8:32 am
Ganz private Meinung: Das Hovern nach Menüpunkten gefällt mir eigentlich ganz und gar nicht. Wir sind nur seit Urzeiten daran gewöhnt. Das gibt es kaum anderswo so. Deshalb finde ich das in fhs-adminmenu eigentlich besser und übersichtlicher, wenn auch mit mehr Klicks verbunden.

Auf Touchscreens ja. Aber das ist noch nicht alles zu Ende gedacht.

frase · Post by **frase** » Sat Nov 12, 2022 11:42 am

lck wrote: ↑
Sat Nov 12, 2022 11:05 am
Ja und, es soll auch kein Ersatz dafür sein. Aber wer will kann diese simple Alternative jetzt schon einbauen und nutzen.

Ja, und so richtig schlecht kann ich das gar nicht finden

Zumindest, solange wir nichts anderes haben, ist das für bestimmte Templates eine ganz gute Lösung.

Noch etwas „geschmeidiger“:

Code: Select all

#xh_adminmenu_fixed {
    top: -70px;
    transition: top .5s;
}
#lck-body:target #xh_adminmenu_fixed {
    top: 0;
}

Man müsste die aktuelle Menühöhe noch dynamisch berechnen – für schmale Viewports.

CMSimple_XH–Forum

6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit