Fix Tabs/Menu/Paginator wrapping when width is too small #1973

mkrecek234 · 2023-01-21T07:27:00Z

fix #1780

mvorisek · 2023-01-21T10:15:39Z

There is an fomantic/Fomantic-UI#2345 issue. How did you find the solution, any docs?

Also I wonder why this PR is lowering the coverage.

mkrecek234 · 2023-01-21T12:06:49Z

Please check https://fomantic-ui.com/collections/menu.html#stackable

mvorisek · 2023-01-23T01:55:06Z

When I was developing another component I now understand what stackable does.

Fomantic-UI source code:

& when (@variationButtonStackable) {
    /* --------------
       Stackable
    --------------- */

    /* Tablet Or Below */
    @media only screen and (max-width: @largestMobileScreen) {
        .ui.stackable.buttons {
            flex-direction: column;
            width: 100%;
...

the title of this PR is correct (ie. for/based on mobile devices with small viewport width), but I would say we should NOT merge it, as we do not want to stack based on viewport width, but instead on owning element width

the general usecase is limitted owning element width, like several tables (with paginator/menu) next to each other

please read fomantic/Fomantic-UI#2345 - the solution is to use wrapping class, but it is currently supported on FUI buttons, but not menu

if you would like to get this patched before fixed in FUI officially, you need to patch CSS to add wrapping class support

at least to fix #1780, stackable might be otherwise ok

mkrecek234 · 2023-01-23T06:32:19Z

@mvorisek From a UI perspective, menus should stack, not wrap from my understanding if you have small mobile screens vertically- you don‘t want more than one element per line in small viewport widths. On vertical oriented mobiles all menus are stacked in common web applications, otherwise it is not easy to be used. Wrapping would afaik line-break according to available size which can be on top for desktop screens. Nevertheless, for mobile it ahould stack.

@mvorisek @lubber-de What do you think?

mvorisek · 2023-01-23T13:48:21Z

src/Tabs.php

@@ -9,7 +9,7 @@
 class Tabs extends View
 {
    public $defaultTemplate = 'tabs.html';
-    public $ui = 'tabular menu';
+    public $ui = 'tabular menu stackable';


I support this change in Tabs.

there is an UX issue (the tab menu is hard it understand vs. other components/text) which should be reported, but I do not object to merge it until fixed

Why not for menu? Please try a grid with larger horizontal top menu: The rows stack perfectly, but the menu does not in current code. With stackable all fine, so I would merge both changes

see #1973 (comment)

my primary comment on this PR was in reaction on "fix 1780" description, which is definitely not fixed by this PR

stackable in Menu might be ok in some cases, but UX can be visually very different and can take much more space which might be not wanted

test demos/collection/grid.php demo - when viewport width is below stackable treshold, the table is already very badly reformat, so I would actually prefer to unstackable there

mvorisek · 2023-01-23T14:13:11Z

src/Menu.php

@@ -9,7 +9,7 @@

 class Menu extends View
 {
-    public $ui = 'menu';
+    public $ui = 'menu stackable';


such behaviour is not typical, here is an example of mobile GH

stackable might make UX between mobile and desktop too much different

Indeed best would be to hide remaining menu items with three dot menu, or make it horizontally scrollable as on Amazon.de. Currently it destroys the whole UI as the menu is very wide, but the rows are stacked, so stacking at least would be consistent to rest of grid

mvorisek · 2023-01-23T15:56:28Z

template/paginator.html

@@ -1,4 +1,4 @@
-<div class="{PaginatorType}ui pagination menu{/}">
+<div class="{PaginatorType}{/}">


this was a bug, class is added by Paginator as well

mvorisek · 2023-01-23T15:59:16Z

js/src/vue-components/multiline/multiline.component.js

-            basic: false,
+            compact: 'very',
+            basic: 'very',
+            unstackable: true,


when width is > stackable width (desktop), the format can be hard too read already, so this needs to be fixed properly in another PR

mvorisek · 2023-01-23T16:11:46Z

@mkrecek234 please test this PR, my primary goal is to develop atk4/ui in a way unlimited components/nesting is possible, so the goal is not to focus on stackable (small viewports only)

"wrapping buttons" together with "menu" seems to be a good workaround for fomantic/Fomantic-UI#2345 and I am completely ok to merge this PR even if the visual style might be not perfect/officially supported by Fomantic-UI ATM when wrapped

mvorisek · 2023-01-23T16:38:34Z

⚠️the coverage decrease seems to be related with this PR

mkrecek234 · 2023-01-30T19:15:21Z

FUI 2.9.2 seems to be solving this both for paginator and also for menus if we add wrapping class. fomantic/Fomantic-UI#2345 (comment) Thank you @lubber-de

mvorisek · 2023-01-30T22:29:24Z

Please investigate the coverage drop.

mvorisek · 2023-01-31T15:26:51Z

I have rerun the changes in separate/fresh PR and I can confirm the coverage drop:

This reverts commit c7484b4.

mvorisek · 2024-03-31T20:00:17Z

@mkrecek234 it is your job to answer the CI questions in order to get this PR merged. The coverage is decreased, please explain.

mkrecek234 mentioned this pull request Jan 21, 2023

Paginator & menu of tables/grids/cruds & Tabs not breaking properly on small width columns #1780

Open

mkrecek234 changed the title ~~Fix non-breaking horizontal menus on mobiles~~ Fix non-breaking horizontal menus & tabs on mobiles Jan 21, 2023

mvorisek added the BLOCKED label Jan 23, 2023

mvorisek reviewed Jan 23, 2023

View reviewed changes

mvorisek changed the title ~~Fix non-breaking horizontal menus & tabs on mobiles~~ Fix Tabs/Menu/Paginator wrapping when width is too small Jan 23, 2023

mvorisek removed the BLOCKED label Jan 23, 2023

mvorisek reviewed Jan 23, 2023

View reviewed changes

mvorisek marked this pull request as draft January 31, 2023 15:38

mvorisek added the waiting for author label Sep 6, 2023

mkrecek234 and others added 9 commits March 31, 2024 21:33

Fix non-breaking horizontal menus on mobiles

8ac16a9

Also required for Tabs to break properly for mobile devices

1aa4348

Revert "Fix non-breaking horizontal menus on mobiles"

53670b7

This reverts commit c7484b4.

table in grid can be horizontally scrolled, make it unstackable

42e60f7

make Multiline unstackable by default

c356477

use wrapping /w buttons hack for Menu/Tabs

7a6bc9d

same hack for Paginator

3105ba5

impl. wrapping hack for menu using CSS

ee9986e

add link to FUI source

14b4447

mvorisek force-pushed the fix_grid_menu branch from 0524cdf to 14b4447 Compare March 31, 2024 19:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Tabs/Menu/Paginator wrapping when width is too small #1973

Fix Tabs/Menu/Paginator wrapping when width is too small #1973

mkrecek234 commented Jan 21, 2023 •

edited by mvorisek

Loading

mvorisek commented Jan 21, 2023

mkrecek234 commented Jan 21, 2023 •

edited

Loading

mvorisek commented Jan 23, 2023 •

edited

Loading

mkrecek234 commented Jan 23, 2023

mvorisek Jan 23, 2023

mkrecek234 Jan 23, 2023 •

edited

Loading

mvorisek Jan 23, 2023

mvorisek Jan 23, 2023

mkrecek234 Jan 23, 2023 •

edited

Loading

mvorisek Jan 23, 2023

mvorisek Jan 23, 2023

mvorisek commented Jan 23, 2023

mvorisek commented Jan 23, 2023

mkrecek234 commented Jan 30, 2023 •

edited

Loading

mvorisek commented Jan 30, 2023

mvorisek commented Jan 31, 2023 •

edited

Loading

mvorisek commented Mar 31, 2024

		@@ -1,4 +1,4 @@
		<div class="{PaginatorType}ui pagination menu{/}">
		<div class="{PaginatorType}{/}">

Fix Tabs/Menu/Paginator wrapping when width is too small #1973

Are you sure you want to change the base?

Fix Tabs/Menu/Paginator wrapping when width is too small #1973

Conversation

mkrecek234 commented Jan 21, 2023 • edited by mvorisek Loading

mvorisek commented Jan 21, 2023

mkrecek234 commented Jan 21, 2023 • edited Loading

mvorisek commented Jan 23, 2023 • edited Loading

mkrecek234 commented Jan 23, 2023

mvorisek Jan 23, 2023

Choose a reason for hiding this comment

mkrecek234 Jan 23, 2023 • edited Loading

Choose a reason for hiding this comment

mvorisek Jan 23, 2023

Choose a reason for hiding this comment

mvorisek Jan 23, 2023

Choose a reason for hiding this comment

mkrecek234 Jan 23, 2023 • edited Loading

Choose a reason for hiding this comment

mvorisek Jan 23, 2023

Choose a reason for hiding this comment

mvorisek Jan 23, 2023

Choose a reason for hiding this comment

mvorisek commented Jan 23, 2023

mvorisek commented Jan 23, 2023

mkrecek234 commented Jan 30, 2023 • edited Loading

mvorisek commented Jan 30, 2023

mvorisek commented Jan 31, 2023 • edited Loading

mvorisek commented Mar 31, 2024

mkrecek234 commented Jan 21, 2023 •

edited by mvorisek

Loading

mkrecek234 commented Jan 21, 2023 •

edited

Loading

mvorisek commented Jan 23, 2023 •

edited

Loading

mkrecek234 Jan 23, 2023 •

edited

Loading

mkrecek234 Jan 23, 2023 •

edited

Loading

mkrecek234 commented Jan 30, 2023 •

edited

Loading

mvorisek commented Jan 31, 2023 •

edited

Loading