Bug 38622
| Summary: | Improve UMC header for mobile devices | ||
|---|---|---|---|
| Product: | UCS | Reporter: | Alexander Kläser <klaeser> |
| Component: | UMC (Generic) | Assignee: | Johannes Keiser <keiser> |
| Status: | CLOSED FIXED | QA Contact: | Alexander Kramer <kramer> |
| Severity: | enhancement | ||
| Priority: | P5 | CC: | best, gohmann, mai, walkenhorst |
| Version: | UCS 4.0 | ||
| Target Milestone: | UCS 4.1-1-errata | ||
| Hardware: | Other | ||
| OS: | Linux | ||
| See Also: |
https://forge.univention.org/bugzilla/show_bug.cgi?id=38491 https://forge.univention.org/bugzilla/show_bug.cgi?id=39853 |
||
| What kind of report is it?: | --- | What type of bug is this?: | --- |
| Who will be affected by this bug?: | --- | How will those affected feel about the bug?: | --- |
| User Pain: | Enterprise Customer affected?: | ||
| School Customer affected?: | ISV affected?: | ||
| Waiting Support: | Flags outvoted (downgraded) after PO Review: | ||
| Ticket number: | Bug group (optional): | Design, Mobile devices/tablets, Usability | |
| Max CVSS v3 score: | |||
| Attachments: |
Improved rendering on mobile devices
Screnshot of UMC login |
||
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. *** |
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.