MobileMenu

[alltime]

Hallo,

auf dem Weg mein MaterialDesign näher an den Standard zu bringen, habe ich ein neues Plugin/Widget geschrieben, dass die NavbarLeft aus und einklappen kann:
https://github.com/CometVisu/CometVisu/pull/261/files
Im Moment habe ich es so eingestellt, dass es nur aktiv ist, wenn der Screen kleiner/gleich der max_mobile_screen_width ist.

Damit kann man den Trigger zum ausklappen des Menüs einbauen:

<mobilemenu>
    <text>
        <label>--&gt; scroll demo (click)&lt;--</label>
    </text>
</mobilemenu>

Das Menu wird bei jedem Pagejump automatisch wieder geschlossen.

Außerdem habe ich mit diesem Plugin gleich noch das Problem, dass die NavbarLeft nicht scrollbar ist, gelöst.

Wer es testen will kann die config visu_config_scroll verwenden (?config=scroll).

[Chris M.]

Wo komme ich an die visu_config_scroll?
Falls die universell ist, kann man die in's Demo-Verzeichnis packen, wenn die nur hier zur Demonstration dienen soll hier an den Thread anhängen.

Was ich noch nicht verstanden habe, ist wie das mobilemenu mit der normalen Navbar zusammen spielen soll (ich hab's aber auch noch nicht live testen können ). Und wie soll sich das ganze auf großen Bildschirmen verhalten? Bzw. was ist hier die Strategie um mit einer Config alles zu handlen?

[alltime]

Die ...scroll.config sollte sich schon im Demoverzeichnis befinden. Ich weiß nicht warum Git sie nicht auflistet...
Das MobileMenu soll sich nur auswirken, wenn es sich um ein kleines Display handelt. Nur dann soll der Trigger angezeigt werden und der NavbarLeft eine Klasse hinzugefügt werden. Diese Klasse erbt dann die Eigenschaften aus der MobileMenu.CSS. Außerdem wird dann standardmäßig die NavbarLeft ausgeblendet. Beim Klick auf den Trigger wird die aktive NavbarLeft eingeblendet. Und beim Klick auf einen Pagejump wieder ausgeblendet.

Bei einem größeren Display wird der Trigger versteckt (Display = none). Außerdem hat das Plugin dann (hoffentlich ) keinerlei Auswirkungen.

[Chris M.]

Wenn Du die Datei direkt unter /config/ hast, wird die normalerweise vom Git ignoriert. So kannst Du bei Dir testen ohne aus versehen dort eine Datei hochzuladen. Das Verzeichnis gehört ja auch dem User, d.h. hier sollten wir auch nur sehr selektiv Dateien hinlegen.
Unter /config/demo/ kommen die ganzen Demo-Configs. Evtl. musst Du hier Git auch davon überzeugen die Datei nicht zu ignorieren (git add -f).

Aber auch dort sollten nur "richtige" Demo-Configs.

Ein Beispiel wie man das nutzt u.ä. würde ich einfach hier im Forum anhängen. Oder einen Link auf die Datei in Deinem Fork setzten. Oder...

[Chris M.]

Ich hab jetzt mal an meine Config einfach ein <mobilemenu> hinzugefügt um testen zu können.

Dabei ist mir aufgefallen:

1. Das Menü wird per Klick eingeblendet - ich habe es aber dann nicht mehr weg bekommen. (Im Code sehe ich da auch gerade keinen Pfad für, der das machen würde)
2. Die Widgets liegen einfach über der restlichen Seite - ich empfinde das als ziemlich unübersichtlich, vgl. Screenshot
3. Der Code der die linke Navbar (wieso nur die linke?) scrollbar machen soll ist nun im Plugin versteckt - ich denke der gehört eher in nach pagepartshandler.js (wo das Navbar-Handling liegt) oder in die templateengine.js (wo alles generische liegt - auch der Teil der z.B. das Overscrollen verhindern soll)

Ich würde das Thema eher anders angehen, um auch mit größeren Geräten sauber zu funktionieren:
Wenn die Bildschrimgröße zu klein ist (man beachte auch Größenänderungen während der Laufzeit; vgl. auch handleResize in der templateEngine), dann wird die Navbar raus geschoben. Zum Anzeigen sollte diese sich per Wisch von außen nach innen holen lassen, alternativ/zusätzlich auch per Text/Icon (die üblichen drei Punkte oder Striche übereinander...). Und zum Ausblenden wieder genau so herausschieben lassen.
(Live-Beispiel: n-tv App)

Screenshot_20160219-231946.png

[alltime]

1. Das Menu wird bei jedem Pagejump automatisch wieder geschlossen. Ein extra Button oder wischen wäre sicherlich nicht verkehrt. Allerdings sollte die Hauptanwendung des MobileMenus die Seitennavigation darstellen. Darum habe ich mich auf den Pagejump konzentriert.
2. Das liegt nur daran, dass im Design pure der Hintergrund der NavbarLeft transparent ist. Ursprünglich hatte ich zur besseren Visualisierung den Hintergrund schwarz gemacht. Du hast darum gebeten dies zu entfernen. Ein bisschen müssen die Designs schon angepasst werden, das lässt sich einfach nicht vermeiden...
3. MobileMenu soll eine Art Android-Menu ermöglichen. Ein Menü reicht meiner Meinung nach. Man benötigt einen Funktionsaufruf, ich fand es unschön den in Pageparthandler.js einzubauen.

Um das Resize-Problem zu umgehen, könnte man das MobileMenu auch ausschließlich bei Touchscreens aktivieren. Da verändert man die Größe ja nicht immer.

...Zum Anzeigen sollte diese sich per Wisch von außen nach innen holen lassen,...

Das habe ich schon getestet. Leider wurde dabei oft die "Scrollbarkeit" der NavbarLeft wieder zerstört...

...alternativ/zusätzlich auch per Text/Icon (die üblichen drei Punkte oder Striche übereinander...)...

Das ist ja so gedacht... Einfach den Text "scroll demo (click)" durch ein Icon ersetzen.

[alltime]

So sieht es aus, wenn man das MobileMenu richtig im Design unterstüzt:
mobilemenu.PNG

[Chris M.]

[*]Das liegt nur daran, dass im Design pure der Hintergrund der NavbarLeft transparent ist. Ursprünglich hatte ich zur besseren Visualisierung den Hintergrund schwarz gemacht. Du hast darum gebeten dies zu entfernen. Ein bisschen müssen die Designs schon angepasst werden, das lässt sich einfach nicht vermeiden...

Das Thema war, dass da auch noch ein box-shadow mit drinnen war, was nicht zum Pure-Design passt (dazu ist es zu puristisch...). Der nicht durchsichtige Background würde dem wohl schon gut tuen.

[*]MobileMenu soll eine Art Android-Menu ermöglichen. Ein Menü reicht meiner Meinung nach. Man benötigt einen Funktionsaufruf, ich fand es unschön den in Pageparthandler.js einzubauen.

Nun, ob ein Menü reicht - und dann auch noch explizit das linke, können andere durchaus auch anders sehen. Warum es unschön im pageparthandler.js wäre, müsstest Du nochmal genauer sagen.

Um das Resize-Problem zu umgehen, könnte man das MobileMenu auch ausschließlich bei Touchscreens aktivieren. Da verändert man die Größe ja nicht immer.

Sicher? Bei meinem Tablet (Galaxy Note 10.1) kann ich Fenster nebeneinander öffnen, d.h. die darzustellende Größe ändern.

Wichtig ist, dass wir bei der CometVisu die Themen "richtig" lösen wollen, auch wenn es etwas mehr Aufwand ist. Wenn Du etwas lösen willst, was an Touch hängt, dann schaue nach Touch. Wenn Du etwas lösen willst, was an Seiten-Größe hängt, dann schau nach Seiten-Größe. Die kann sich jeder Zeit ändern.
Browser-Weichen (Wenn Android, dann...) sind nur um ein spezifisches Problem zu lösen und nicht um ein generisches Touch-Problem zu lösen.
Etc. pp.

Ich habe das ganze jetzt mal gepullt, auch wenn ich (s.o.) noch nicht 100%ig überzeugt bin. Da aber alles in einem Plugin hängt ist das ganze ja eh optional und daher die Anforderungen an die Reife/Abgestimmtheit nicht ganz so hart, wie wenn es zentralen Code betreffen würde.

[alltime]

Ich behaupte nicht, dass die Lösung perfekt ist. Aber es ist mal ein Anfang. Ich bin mir sicher, wenn das Plugin genutzt wird kommen noch einige weitere Ideen.

• Navbar
  Wie wäre es denn mit einem Tag

  navbar="left"

  im Trigger? Dieser Tag könnte dann definieren, ob die linke oder rechte Navbar eingeblendet wird.
• Swipe
  Eine generelle Swipe-Erkennung wäre für die gesamte Cometvisu sinnvoll. Dann könnte man auch mit diesem Plugin leicht darauf zugreifen (einblenden, ausblenden, ...).
• Resize
  Mit einem zusätzlicher Tag

  mobileonly="true"

  könnte man einstellen, ob das MobileMenu nur auf kleinen Displays aktiviert werden soll oder immer.
  Ich schaue mal, ob ich eine Funktion an resize binden kann, die das Plugin aktiviert oder deaktiviert wenn die maxMobileGrenze über- bzw. unterschritten wird...

[MasterOfDesaster]

Wie genau binde ich das MobileMenue in die Config ein (Cometvisu 0.9.1 im Metal-Design)?

Was hab ich bisher gemacht:
- Plugin "MobileMenue" im Plugin-Block definiert

 
 <mobilemenu>     <text>         <label>--&gt; scroll demo (click)&lt;--</label>     </text> </mobilemenu>

Auf der entsprechenden Page den "Mobile" Tag hinter der "Navbar" eingefügt.

Bisher hab ich es geschaft, das die "Standard" Navbar auf dem iPhone verschwindet, aber das MobileMenue wird nicht angezeigt. Was hab ich vergessen?

Gruß

Alex

[alltime]

Hallo Alex,

den Tag darfst du nicht in der NavbarLeft einfügen, sondern er muss sich in einem sichtbaren Bereich befinden, z.B. NavbarTop.
Das ist der Trigger (Text/Icon/...) zum einblenden der Navbar. Idealerweise ist es ein Icon auf der Seite oben links.

Viele Grüße,
Tim

[MasterOfDesaster]

Hi Tim,
hast du mir eine Beispielkonfiguration ?

Gruss

Alex

[alltime]

<navbar position="top">
<mobilemenu>
<text>
<label>ich bin der trigger zum anzeigen der NavbarLeft</label>
</text>
</mobilemenu>
</navbar>

<navbar position="left" dynamic="true" width="250">
<text>
<label>diese Navbar kann aus und eingeblendet werden</label>
</text>
</navbar>

[MasterOfDesaster]

Hi Tim,
danke.
Ok, jetzt hab ich's....Ich dachte immer das ist ein separates, zusätzliches Menü.....

Hab das jetzt so eingebaut, nur ist nun auf dem iPhone das Menü immer ausgeblendet...Wie wird jetzt das Menü eingeblendet?

[alltime]

klicke doch mal auf den Text "ich bin der trigger zum anzeigen der NavbarLeft"