Loading spinner is not shown in mobile layout
Hi,
I'm pretty happy with Mayan having a responsive layout. I have found myself increasingly accessing Mayan from my phone.
I noticed some usability issues in the UX of the mobile layout, and would like to discuss some potential fix.
The loading spinner is invisible in the mobile layout.
if it takes sometimes to load the new context, it makes Mayan looks unresponsive, and a user is likely to click the same link again, and again.
Looking at the line of this code:
<div class="hidden-xs hidden-sm" id="ajax-spinner" style="display: none;"></div>
The spinner is hidden for bootstrap's XS and SM definition of screen width. I think so that the spinner does not overlap with the Project's name? What would be the ideal fix?
Personally, I have been patching my personal install so that the spinner appears on all screen width.
Edit: see replies below
The collapsible navigation sidebar is not re-collapsed when a user navigate away from current context.
This is counter-intuitive and the same problem as before, if it takes sometimes to load the new context, it makes Mayan looks unresponsive. Compare Mayan's sidebar behavior with Gmail's, or even Gitlab's:
The open/close behavior is controlled here:
// Small screen main menu toggle to open
$('body').on('click', '#main-menu-button-open', function (event) {
$('#menu-main').addClass('menu-main-opened');
$('#ajax-header').addClass('overlay-gray');
});
// Small screen main menu toggle to close
$('body').on('click', '#menu-main-button-close', function (event) {
$('#menu-main').removeClass('menu-main-opened');
$('#ajax-header').removeClass('overlay-gray');
});
Do you think it makes sense to bind #ajax-content
div's onLoad()
event to #menu-main-button-close
CSS class?
Probably not the best approach, but I would be curious what is the better one.
I would be happy to contribute small MR if the idea is approved by the project, but otherwise I would like to know what's the best way to make the desired behavior on my local install.
Cheers,
Arya