[Dublin Template] Menu Mode Costumization

[Dublin Template] Menu Mode Costumization

  
Forge Component
(18)
Published on 11 Nov (4 weeks ago) by OutSystems Labs
18 votes
Published on 11 Nov (4 weeks ago) by OutSystems Labs
Since the default menu size for desktops is too big it would be great if we could choose what menu mode we want for each device using some properties.

Example:
- Use tablet mode for desktops
or..
- Use Phone Mode for all formats

This would be similar to the behavior properties some SilkUI componets have.
This way I could easily force the Dublin Menu in desktops to be the same we have in tablets which is much better (slimmer and with the submenu items opening to the right of the menu).
 
Hi.

I'm trying to force the tablet menu to desktops.

I'm using SilkUI and jQuery to make this work:

In the menu web block preparation I have this:



In the "If Widget" I'm calling the IsDesktop() function from the SilkUI Framework.
In the RunJavaScript action (HttpRequestHandler) I'm running this jQuery:

$('.Page').removeClass('desktop').addClass('tablet');
$('.Application_Menu').css('width', '100%');


This works, but do you see any problem with this solution or is there a better way to do it?
Solution
Hello Carlos,
 
That solution will bring a lot of issues in the long run.
If you are forcing the properties from desktop to Tablet, then all other patterns you may want to use will also behave like a tablet.
 
The difference between the tablet and desktop menu is just CSS. Actually, the change that you are trying to do is already done to small Desktops, and in order to apply those classes, we used the classes .tablet and .desktop.small . So, our CSS looks like this:
 

 
If you want to override and force the menu to the tablet on your application, you just need to search all the usages to the class ".desktop.small", copy them to your application and change it to look like this:

 
Please keep in mind that you should add this CSS overrides on your application Theme, in order to keep the original Dublin CSS as is, so that you can later on easily upgrade your Dublin with the latests releases.

Please let us know if you need any more help.

Best Regards,
Samuel Jesus
 
Solution
Thanks Samuel.

I will try that way instead.
Hello,
Samuel, according to your directions I managed to decrease the width of menu. However, it still does not behave like on Tablet or Small desktop, as my menu list is longer, and icons wont hide while on desktop. My thoughts are that it has something to do with '.desktop.MenuHideIcons .Menu_TopMenu a span.fa {display: none;}'.
Hope I made it clear.
Kasparas
Hello Kasparas,

Looking at your post, I'm not sure I'm getting what you are trying to do.
If you add an exception to the desktop to also hide the icons (like it does on the Tablet/Small Desktop), when will the menu icons be available on your application?

Can you please share a screenshot of the issue so that we can better help you?


Best Regards,
Samuel Jesus
This is how it looks on desktop width:

This is when the width is of Tablet:


As I understand, it hides icons only when the menu height exceeds the height of the screeen, so icons will be visible.
Hi Kasparas,

Thanks for your feedback. As I can learn from your latest screenshoots, the behavior of Dublin Theme is correct.
The script to remove the icons runs only for tablets.

Best regards,
Pedro Oliveira
Hi, Pedro,

Yes, the behaviour is correct, however the problem I see is that on desktop, if there are more menu items, they are not visible, as you can see from my screenshot, I am not able to go to 'Products' category (on desktop with visible icons), as it hides, and there is no scroll bar.

Regards,
Kasparas 
Hi Kasparas,

Yes, in fact the menu stays hidden but since the menu width is smaller and scroll it's not supported in the menu, you can always try to use CSS to hide the icons on desktop. For this, try to use the ".desktop" class applied to the icons.

Best regards,
Pedro Oliveira

Sorry for necro-ing, but I have an issue with the same menu, might be CSS related as well.

I use similar menu. When display indicates .desktop.small they have icons and text underneath. On desktop everything behaves exactly as intended, but when I use tablet the submenu does not show up at all. Tried it on Safari, Chrome and Firefox browsers.


Anyone else encountered such issue? CSS nor JScript were not altered, therefore it should work normally?