New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create Off Canvas Menu for better mobile navigation #114

Closed
RolandStuder opened this Issue Nov 10, 2016 · 22 comments

Comments

2 participants
@RolandStuder
Copy link
Member

RolandStuder commented Nov 10, 2016

Today it is really hard to use hitobito on mobile devices, as the navigation is not really responsive. The left-navigation disappears completely making some parts completely inaccessible.

It would be great to have the current navigation duplicated in an off-canvas Navigation (hamburger menu).

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Nov 13, 2016

A proof of concept is found in: https://github.com/hitobito/hitobito/tree/feature/more-responsive

It is done in a way, both variations of the navigation are created from the same helpers and templates in order to ensure that wagon specialties and future extensions are automatically represented in both.

We still have to check if it's easy to refactor the markup a bit, without affecting possible extisting wagon styling.

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Mar 19, 2017

I made a raw html and css concept. It does not work in IE11 yet.
screen shot 2017-03-19 at 08 50 55
FIGMA MOCKUP
download

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Mar 19, 2017

@manuelmeister Thanks. I painted some more. What do you think of these concepts:

desktop copy 3
desktop copy 5
desktop copy 4
desktop

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Mar 19, 2017

@RolandStuder I quite like these.

  1. I would like to seee an example, where number 1 & 3 are mixed.
    I think we have to keep the green and I quite like the round edges, but think it would be helpful to display the hierarchy above the current layer.
  2. In the first example, the hierarchy above the person is really good, but in the left navigation, the hierarchy is missing.
  3. Also, I would like to see a dynamic navigation, where you can unfold the items without clicking on the link.
  4. How did you want to do this tree on the left with these lines and points
  5. I would not put the Settings inside the left navigation, because it is not the same content as Gruppen, Anlässe, Lager and Kurse.
    Thanks for the good work!
@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Mar 19, 2017

@manuelmeister Danke für das Feedback. Es waren einfach mal noch ein paar Explorationen. Nicht zu sehr auf die Details achten. Ich glaube den Hintergrund wegzunehmen wie bei 1 und 2 ist etwas schade, dann verliert es die runden ecken und Identität.

Was hast du gemeint mit Nummer 1 & 3 gemischt? Nicht so oder?

desktop copy 6

Grundästzlich möchte ich zuerst eine Version machen, ohne expand / collapse. Weil das etwas ist, was ich selbst machen kann. Für das andere wird es eben noch mehr Development Power brauchen.

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Mar 19, 2017

@RolandStuder das wegen collapse/expand ist klar.
Ich hatte es gerade umgekehrt gemeint. Der Hintergrund ist zwar schön, nützt aber niemandem etwas. Ich finde es irgendwie noch gut, wenn der Dachverband (Info, Anlässe,…) auf der gleichen Höhe ist, wie Hitobito.
Ist aber schwierig das runde Ecken Konzept beizubehalten. Vielleicht könnte man es ja so machen:
vorschlagv2 1

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Mar 21, 2017

@RolandStuder Ich habe jetzt noch die Suche und den User hinzugefügt.
vorschlagv2 1

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Jul 24, 2017

@manuelmeister Danke für deine Vorschläge, ich finde deinen letzten Vorschlag interessant, aber irgendwie ist da sehr viel los, mit dieser Unterteilung. Ich habe dieses Wochenende nochmals etwas ausprobiert und ich glaube ich habe etwas, was gut am bestehenden anschliesst und relativ ruhig ist.

image

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Jul 24, 2017

@RolandStuder Finde ich einen interessanten Vorschlag.
Evtl. kann die Hierarchie in einem Dropdown oder ähnliches noch angezeigt werden, damit man nicht immer die volle Hierarchie anzeigen muss. Aber die Hierarchie nach oben, sollte bei komplizierten Strukturen angezeigt werden. z.B. mit Kurznamen wie bei #114 (comment)

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Aug 6, 2017

image

Der letzte Vorschlag noch modernisiert. Ich glaub für die darüberliegenden Ebenen würde ich das eher über ein Dropdown machen, viele Verwenden nicht solche Kurznamen wie ihr. Und oben rechts im Fenster hat man auch immer noch die Hierachie.

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Aug 18, 2017

Cool
Mir gefallen die font-weights und die Abstände noch nicht
Ist das ein Prototyp oder ein Design? Ich möchte gerne daran schrauben ;)

wie würde denn dieses Dropdown aussehen?

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Aug 22, 2017

@manuelmeister Ist beides, es gibt einen Branch https://github.com/hitobito/hitobito/tree/feature/more-responsive auf dem du Herumspielen kannst. Und anbei das Sketch File mit allen Entwürfen

Better responsive.zip

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Aug 28, 2017

desktop copy 31 2x

Ich habe jetzt die Schrift "Source Sans Pro" verwendet, da sie schöne Unterscheidungen macht zwischen I,l,L,i usw. Ausserdem habe ich auf die Icons von https://www.icons8.com gesetzt. Diese bieten konsistente Icons für alles.
Ausserdem habe ich die font-weights angepasst und die Button angepasst.

Better responsive.sketch.zip

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Sep 30, 2017

Wie findest du?

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Oct 2, 2017

@manuelmeister Beim erneuten Draufschauen, muss ich sagen, dass deines klarer ist. Bezüglich Header bin ich mir noch nicht so sicher, ob das so passt.

Iconset bin ich hingegen weniger Fan davon, da würde ich eher auf Font Awesome setzen, weil die praktisch alles abdecken und als Icon Font einfach customized werden können mit den Farben.

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Oct 2, 2017

Bezüglich Iconset: ich finde FontAwesome einfach unschön + man kann bei icons8 auch einfach auswählen welche(s) Icon(s) dass man will und nicht alle andern noch mitladen (Collections).
Ausserdem ist einen Iconfont nicht sehr semantisch und accessible.

Ich würde zumindest die grossen Icons behalten.

Den Header habe ich in der Sketchdatei in verschiedenen Ausführungen. Mir gefällt vor allem die Farbe + Farbverlauf im Hintergrund nicht

@RolandStuder RolandStuder added this to In Progress in Aktuelle Arbeiten Sep 25, 2018

@RolandStuder RolandStuder self-assigned this Sep 25, 2018

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Sep 25, 2018

Implementation rücke näher: So wird es aussehen.

image

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Sep 25, 2018

Und Mobile?
Finde es schade, ist abmelden und Profil links unten und nichts rechts oben

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Sep 25, 2018

Kann man gerne noch patchen, aber gerade auf Mobile braucht man es sicher in der Linksnavigation sonst hat es keinen nur wenig Platz fürs Suchfeld, oder man muss für die Suche noch etwas Javascript machen.

Mobile bin ich noch dran.

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Sep 25, 2018

ok, jetzt ist es so:

image

mobile:

image

und mit navigation auf mobile:

image

@manuelmeister

This comment has been minimized.

Copy link

manuelmeister commented Sep 25, 2018

@RolandStuder

This comment has been minimized.

Copy link
Member

RolandStuder commented Sep 28, 2018

@manuelmeister Danke für das mitdenken und dein Vorschläge!

@RolandStuder RolandStuder moved this from In Progress to In Abnahme in Aktuelle Arbeiten Oct 10, 2018

@RolandStuder RolandStuder moved this from In Abnahme to Abgenommen in Aktuelle Arbeiten Oct 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment