Bug 38622 - Improve UMC header for mobile devices
Improve UMC header for mobile devices
Status: CLOSED FIXED
Product: UCS
Classification: Unclassified
Component: UMC (Generic)
UCS 4.0
Other Linux
: P5 enhancement (vote)
: UCS 4.1-1-errata
Assigned To: Johannes Keiser
Alexander Kramer
:
: 39853 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2015-05-29 16:21 CEST by Alexander Kläser
Modified: 2016-05-04 18:12 CEST (History)
4 users (show)

See Also:
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:
Ticket number:
Bug group (optional): Design, Mobile devices/tablets, Usability
Max CVSS v3 score:


Attachments
Improved rendering on mobile devices (106.54 KB, image/png)
2015-05-29 16:21 CEST, Alexander Kläser
Details
Screnshot of UMC login (91.28 KB, image/png)
2016-04-30 00:12 CEST, Alexander Kläser
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Alexander Kläser univentionstaff 2015-05-29 16:21:03 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.
Comment 1 Alexander Kläser univentionstaff 2015-11-03 13:40:24 CET
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.
Comment 2 Johannes Keiser univentionstaff 2015-11-18 17:19:12 CET
r 65697
univention-management-console-frontend (5.0.63-4) unstable; urgency=low

 * Bug #38622: added mobile check for UMC header
Comment 3 Johannes Keiser univentionstaff 2016-04-15 13:57:34 CEST
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.
Comment 4 Johannes Keiser univentionstaff 2016-04-22 16:37:43 CEST
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
Comment 5 Alexander Kläser univentionstaff 2016-04-29 14:12:47 CEST
Really looks nice :) !

I noticed that there is no transition in FF → REOPEN.
Comment 6 Johannes Keiser univentionstaff 2016-04-29 15:45:15 CEST
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
Comment 7 Alexander Kläser univentionstaff 2016-04-29 16:29:40 CEST
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.
Comment 8 Alexander Kläser univentionstaff 2016-04-29 16:33:26 CEST
iPad mini: When opening a UMC UDM module, the browser zooms directly into the grid. Could you have a look here, as well?
Comment 9 Alexander Kläser univentionstaff 2016-04-30 00:12:48 CEST
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?
Comment 10 Johannes Keiser univentionstaff 2016-05-03 18:31:16 CEST
(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
Comment 11 Johannes Keiser univentionstaff 2016-05-03 21:00:43 CEST
(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
Comment 12 Alexander Kramer univentionstaff 2016-05-04 12:58:04 CEST
(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
Comment 13 Alexander Kramer univentionstaff 2016-05-04 12:59:19 CEST
*** Bug 39853 has been marked as a duplicate of this bug. ***