Project

General

Profile

Actions

Anomalie #1799

closed

Cannot access tabs definition on some resolutions

Added by Johan Cwiklinski 7 months ago. Updated 7 months ago.

Status:
Fermé
Priority:
Normal
Category:
IHM
Target version:
Start date:
03/04/2024
Due date:
% Done:

100%

Estimated time:
Version utilisée:

Description

On some screen sizes, preferences tabs mays not all be visible:

On both examples, the last tab (Administrator) is missing.


Files

clipboard-202403042152-8jbhs.png (141 KB) clipboard-202403042152-8jbhs.png Johan Cwiklinski, 03/04/2024 09:52 PM
clipboard-202403042152-exevy.png (58.8 KB) clipboard-202403042152-exevy.png Johan Cwiklinski, 03/04/2024 09:52 PM
fui-wrapping-menu.png (18.5 KB) fui-wrapping-menu.png Guillaume AGNIERAY, 03/05/2024 12:13 PM
css-overflow-x.png (16.1 KB) css-overflow-x.png Guillaume AGNIERAY, 03/05/2024 12:13 PM
stacked_tabs.png (73.4 KB) stacked_tabs.png Guillaume AGNIERAY, 03/05/2024 02:55 PM

Updated by Guillaume AGNIERAY 7 months ago

Several possible solutions here :

  1. Using the wrapping class (https://fomantic-ui.com/collections/menu.html#wrapping)
  2. Using custom CSS to control overflow-x and enable an horizontal scrollbar
  3. Using javascript to display left/right buttons like in Redmine :
    https://www.redmine.org/attachments/14182
Actions #2

Updated by Johan Cwiklinski 7 months ago

Guillaume AGNIERAY a écrit (#note-1):

Several possible solutions here :

  1. Using the wrapping class (https://fomantic-ui.com/collections/menu.html#wrapping)
  2. Using custom CSS to control overflow-x and enable an horizontal scrollbar
  3. Using javascript to display left/right buttons like in Redmine :
    https://www.redmine.org/attachments/14182

Hum... Thaks for the feedback.

First solution is the most "FUI" one, but 2nd solution seems quite good also; if not too complex.

Redmine like solution would work, but for their usage, tabs are integrated in menu for small screens; which is not (and won't) the case for Galette. A vertical scroll or a 2 lines display will be more easy to use on mobile than small buttons I guess.

My two cents ;)
What would you prefer?

Actions #3

Updated by Guillaume AGNIERAY 7 months ago

Johan Cwiklinski a écrit (#note-2):

First solution is the most "FUI" one, but 2nd solution seems quite good also; if not too complex.

The 1st solution would just need a class added in the template.
The 2nd solution would just need a few lines of CSS ;)

Redmine like solution would work, but for their usage, tabs are integrated in menu for small screens; which is not (and won't) the case for Galette. A vertical scroll or a 2 lines display will be more easy to use on mobile than small buttons I guess.

On mobile, with FUI, tabs are stacked :

My two cents ;)
What would you prefer?

I think the most accessible one is the first solution.

Actions #4

Updated by Johan Cwiklinski 7 months ago

Guillaume AGNIERAY a écrit (#note-3):

I think the most accessible one is the first solution.

It's OK for me :)

Actions #5

Updated by Guillaume AGNIERAY 7 months ago

  • Status changed from Nouveau to Résolu
  • % Done changed from 0 to 100
Actions #6

Updated by Johan Cwiklinski 7 months ago

  • Category set to IHM
  • Assignee set to Guillaume AGNIERAY
  • Target version set to 1.1.0
Actions #7

Updated by Johan Cwiklinski 7 months ago

  • Target version changed from 1.1.0 to 1.0.4
Actions #8

Updated by Johan Cwiklinski 7 months ago

  • Status changed from Résolu to Fermé
Actions

Also available in: Atom PDF