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.
r 65697 univention-management-console-frontend (5.0.63-4) unstable; urgency=low * Bug #38622: added mobile check for UMC header
r 68702 univention-management-console-frontend (5.0.63-33): r 68703 univention-management-console-frontend-theme (1.0.4-2): 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 possible. 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 per module. 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.
r 68876 univention-management-console-frontend (5.0.63-35): * 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.
r 69023 univention-management-console-frontend-theme (1.0.4-4): * 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. r 69098 univention-management-console-frontend (5.0.63-41): Bug #38622: * imrpoved responsiveness of the mobile menu on mobile devices * fixed a visual bug of the mobile menu on mobile devices r 69100 univention-management-console-frontend (5.0.63-42): * Bug #38622: changed on listener for mobile r 69101 univention-management-console-frontend-theme (1.0.4-5): Bug #38622: * 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? r 69101 univention-management-console-frontend-theme (1.0.4-5): Bug #38622: * Show just the univention 'u' on small screens for the login screen r 69103 univention-management-console-frontend-theme (1.0.4-6): * 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. ---- QA 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: a) Desktop - Firefox - Chrome - IE 9, 11, Edge b) Mobile Android - Firefox - Chrome c) Mobile iOS (iPad) - Safari OK - yaml file for both packages
*** Bug 39853 has been marked as a duplicate of this bug. ***
<http://errata.software-univention.de/ucs/4.1/165.html> <http://errata.software-univention.de/ucs/4.1/174.html>