search

joomla / 40-backend-template

Joomla 4.0 Backend Template Repository
GNU General Public License v2.0
14 stars 6 forks source link

[new design] missing dropdown-styles for headerbar #386

Open svom opened 6 years ago

svom commented 6 years ago

Stylings for the Headerbar dropdowns are missing. See screenshots of proposal attached.

bildschirmfoto 2018-04-16 um 16 08 45 bildschirmfoto 2018-04-16 um 16 08 51 bildschirmfoto 2018-04-16 um 16 08 34 20180302-172412.pdf

lakhanmandloi commented 6 years ago

@svom this looks nice to me. :+1:

One more thing i would like to add in this -

In mobile devices / smaller screens - the headerbar covers a lot of area, i think we should reduce it by hiding less important text. I mean we should reduce 2 rows to single row. This headerbar is a sticky item and would be bad if it covers a lot of area.

Current current

Proposal proposal

Note - pls ignore the icons in this proposal image, this image represents more about reducing the headerbar size in smaller devices. The icons will come from the @svom proposed designs.

Pls let me know your opinion on same - @svom @ciar4n @dgrammatiko Once this is finalised i will start contributing on this issue.

Thanks!

ciar4n commented 6 years ago

+1 from me!

I would add we could also echo the title in the main container and have it only displayed on small screen devices while hiding the title in the header..

image

svom commented 6 years ago

I like the idea!

But in general we had the idea (and showed the idea) to place the navigation as a sticky toolbar at the bottom of the device on smaller devices (mostly smartphones).

In this case it's easier for the user to reach the navigation (due to the anatomy of our hand).

We also provided an idea for the headerbar which is evenn a bit more clean, but in general really similar to your drafts @lakhanmandloi !

As allready said i really like the idea of reducing elements in the headerbar for smaller devices. Thank you!

bildschirmfoto 2018-05-24 um 14 20 19

ciar4n commented 6 years ago

@svom A bit more to consider with this but should be possible.

@lakhanmandloi If you could work on the dropdown styles for the header actions that would be great! We can consider smaller screens separately at a later date. Thank you!

dgrammatiko commented 6 years ago

@lakhanmandloi please wait for me to provide the custom element for the dropdown. We're not gonna use the bootstrap dropdown anymore 😉

lakhanmandloi commented 6 years ago

I would add we could also echo the title in the main container and have it only displayed on small screen devices while hiding the title in the header..

Agree. that's nice approach.:+1: and it seems @svom has already covered this in proposal.

But in general we had the idea (and showed the idea) to place the navigation as a sticky toolbar at the bottom of the device on smaller devices (mostly smartphones). In this case it's easier for the user to reach the navigation (due to the anatomy of our hand).

Agree, bringing the main navigation to the bottom in smaller devices is a very nice idea from the ux perspective, and will give main component area content more space to expand. :+1:

but i have few questions:

please wait for me to provide the custom element for the dropdown. We're not gonna use the bootstrap dropdown anymore .

Okay i will wait. :) do let me know once ready.

Do let me know if some other issues which are very much clear to do and needs contribution. I happy in contributing to the Joomla Community. :)

Thank you again. :)

svom commented 6 years ago

but i have few questions:

what if someone adds more menu-items on level 1 of main navigation. will there be horizontal scrollbar for same?

Could be one opportunity, another opportunity which comes to my mind is to give control about which navitems should be displayed on mobile devices. Actually I guess that the needs of the people are different regarding mobile and desktop navigation, because even in 2018 or 19 most of the people will administrate the page on desktop-devices. Therefore it would be great to have a customizable navbar - so people can refer to their needs. Nevertheless a horizontal scrollbar (actually you don't even need a scrollbar, but only a hint to show that it's possible to drag the navigation) would be a working solution.

how will level 2 navigation be displayed? can you please propose a expanded menu design for same? I will.

from this proposal it seems messages and notifications will go inside the drop-down of account (in smaller devices). But i think we should keep them outside and make them clearly visible. I mean these 2 items are important and should not be hidden somewhere.

We can use a small visual indicator to show that there are notifcations and stuff (like facebook messenger and co are doing).

lakhanmandloi commented 6 years ago

Could be one opportunity, another opportunity which comes to my mind is to give control about which navitems should be displayed on mobile devices. Actually I guess that the needs of the people are different regarding mobile and desktop navigation, because even in 2018 or 19 most of the people will administrate the page on desktop-devices. Therefore it would be great to have a customizable navbar - so people can refer to their needs. Nevertheless a horizontal scrollbar (actually you don't even need a scrollbar, but only a hint to show that it's possible to drag the navigation) would be a working solution.

I absolutely agree with your points. From "customizable navbar" do you mean drag and drop reshuffling ? If yes, +100 :+1: . That will be great ux improvement. In general, what if we apply Drag and drop reshuffling concept at some other places too. Right now the reshuffling of items is limited to items list only, like in modules, menus, articles list etc. What if administrator users are allowed to -

And i am sure, by this addition

Some inspirations -

What do you think ?

We can use a small visual indicator to show that there are notifcations and stuff (like facebook messenger and co are doing).

Agree. Can you pls include this in design so that it is more clear.?