Univention Bugzilla – Bug 38622
Improve UMC header for mobile devices
Last modified: 2016-05-04 18:12:57 CEST
Created attachment 6930 [details]
Improved rendering on mobile devices
The UMC header on small screens of mobile devices is not very intuitive to use and takes too much space. Attached is an improved view for mobile devices.
We discussed the following ideas for this bug:
* Do not use tabs on mobile devices, if a module is re-opened, its latest tab will
be shown. A module is only closed when pressing on one of the two x-buttons.
* We should probably check upon startup whether we have a touch device or a
small screen size. The switch between mobile and desktop view is not necessary
during a UMC session.
* Clicking on the hamburger icon will open one menu which contains the user menu
items and the modul search below.
* The Univention logo could be replace by the Univention "u".
* It would be nice to have smaller category buttons which more prominently change
their display style when they are selected (e.g., using opacity). Currently a
selected category will not be recognized on a mobile device.
univention-management-console-frontend (5.0.63-4) unstable; urgency=low
* Bug #38622: added mobile check for UMC header
YAML for both: r 68704
The changes made address two parts:
Firstly overall changes:
The Category buttons for not selected categories are smaller and slightly
opaque to emphasize the currently selected category.
The univention logo(Univention 'u' + 'univention') is replaced by just the
univention 'u' on small screens.
The height of the module headers are reduced slightly on small screens.
Secondly mobile related changes:
The UMC now has a mobileView.
When the UMC is started the mobileView is applied when the device has touch
or the screen is below a certian treshold. This check is only made once. At
the moment switching between mobileView and normal view on the fly is not
The mobileView comes with following changes:
No tabs are shown. If you open a module, minimize it, and open the same
module again, the last tab will be used. So there can only one tab open
A hamburger icon in the top right corner opens the user menu.
The host info is not available in the mobile view.
A icon for the module search is to the left of the hamburger icon.
Clicking it reveals the input field for the search.
* Bug #38622: fixed umc not loading wen umc has no overview and the
mobile view is active
Really looks nice :) !
I noticed that there is no transition in FF → REOPEN.
* Bug #38622: fixed mobile menu transition not playing on firefox
and show mobile menu above umc notifications
YAML: r 69024
The magnifying glass + the hamburger icon are rendered above the mobile menu (iPad mini + Android 4.2 browser). On iPad mini, I can still move the background around. Touchs (e.g., on the hamburger icon) are detected with some lag.
iPad mini: When opening a UMC UDM module, the browser zooms directly into the grid. Could you have a look here, as well?
Created attachment 7632 [details]
Screnshot of UMC login
Would it be possible to replace the "Univention" logo with just the "u" on smaller screens for the login screen, as well?
(In reply to Alexander Kläser from comment #8)
> iPad mini: When opening a UMC UDM module, the browser zooms directly into
> the grid. Could you have a look here, as well?
It already exists a Bug for this problem Bug #39853
(In reply to Alexander Kläser from comment #7)
> The magnifying glass + the hamburger icon are rendered above the mobile menu
> (iPad mini + Android 4.2 browser). On iPad mini, I can still move the
> background around. Touchs (e.g., on the hamburger icon) are detected with
> some lag.
* imrpoved responsiveness of the mobile menu on mobile devices
* fixed a visual bug of the mobile menu on mobile devices
* Bug #38622: changed on listener for mobile
* Some css cleanup
(In reply to Alexander Kläser from comment #9)
> Created attachment 7632 [details]
> Screnshot of UMC login
> Would it be possible to replace the "Univention" logo with just the "u" on
> smaller screens for the login screen, as well?
* Show just the univention 'u' on small screens for the login screen
* Bug #38622: added workaround for stylus parse error
YAML: r 69104
(In reply to Johannes Keiser from comment #10)
> (In reply to Alexander Kläser from comment #8)
> > iPad mini: When opening a UMC UDM module, the browser zooms directly into
> > the grid. Could you have a look here, as well?
> It already exists a Bug for this problem Bug #39853
As discussed this bug is also fixed within this fix.
I tested the following cases:
- background can't be moved
- no zoom issue under ios when opening a module
- the transition is displayed (except ie9)
- not selected categories are now smaller and have less opacity
- the word 'univention' next to the u-logo disappears if the screen is smaller than 400px
- if the mobile header is displayed
-- a) there are no tabs
-- b) there are no server information
-- c) the module search is hidden and appears if the magnifying glass is clicked
--- the search field is selected (expect Safari Mobile), the inline labels disapears on user input and the module search works as expected
All cases where tested with the following browsers and worked fine:
- IE 9, 11, Edge
b) Mobile Android
c) Mobile iOS (iPad)
OK - yaml file for both packages
*** Bug 39853 has been marked as a duplicate of this bug. ***