Enable responsive search results if the new design is used (fixes #2839)

[Yorwba]

This PR allows authenticated users to benefit from the more mobile-friendly layout if they have enabled the new design.

Two issues using the sentence menu on narrow screen are fixed with a slight redesign.

Expanded menu

Before

Screen width 900 px

Screen width 400 px

Screen width 300 px

After rearranging the menu

Screen width 900 px

Screen width 400 px

Screen width 300 px

I also tried smaller screens (200 px), but then something else hits its minimum width, preventing the page from shrinking further.

Collapsed menu

At 300 px, the problem caused by placing the sentence description ("sentence x belongs to y") next to the menu (already mentioned by jiru on the original PR) becomes quite severe:

Before

I think a good solution is to allow the menu to wrap below the description:

After

[trang]

@Yorwba Thanks for working on this and help move forward the transition to a responsive UI!

Rather than showing the sentence menu below the ID and owner, I think it feels more natural to have it at the very top. I actually had a commit in my half-dead pull request that did just that, by switching the layout to columnwhen the menu is expanded and using flex-order to put the menu element above the ID+owner element.

Taking that commit and with additional changes to ensure the menu is always full-width in small screen and that the change doesn't affect non-authenticated users, we could have something like this:

• in sentence_and_translation.ctp:

        <?php
        if (CurrentUser::isMember()) {
            $layout = 'layout="{{vm.isMenuExpanded ? \'column\' : \'row\'}}" layout-xs="column"';
        } else {
            $layout = 'layout="row"';
        }
        ?>
        <div <?= $layout ?> class="header">
            <md-subheader flex flex-order="0">

• and in sentence_menu.ctp:

<div class="menu-wrapper" sentence-menu 
     flex="{{vm.isMenuExpanded ? '100' : 'none'}}" flex-order="{{vm.isMenuExpanded ? -1 : 1}}"
     flex-xs="100" flex-order-xs="-1"
     ng-init="vm.initMenu(<?= (int)$expanded ?>, vm.sentence.permissions)">

If that looks fine to you, I'll let you incorporate it to your pull request, or do any additional adjustment if needed. Then it should be good for merge 🙂

[Yorwba]

Thank you for the review.

I agree that putting the menu on top is more natural. I also noticed that you removed the ng-if="!vm.isMenuExpanded" from the ID+owner element, which is probably for the best when we have another way to make room for it.

However, I don't quite like using the -xs attributes to change the layout for small screens. The nice thing about the wrapping-based solution is that it takes the available space into account and switches to two rows exactly when a single row no longer fits.

I think there's a way to have the first element wrap to the second row instead of the last, which would also put the menu on top, but only when necessary. So I'll try that first.

[Yorwba]

Okay, the way to keep the menu on top with wrapping is to reverse the ordering of the elements in the HTML and then apply flex-direction: row-reverse to visually reverse them again, so that it appears as if nothing changed ... as long as everything fits on a single row. If it breaks into two rows, the menu stays on top and the id+username ends up below.

See the new commits.

[trang]

@Yorwba Thanks for the updated solution!

There's just a small visual issue with this, caused by the rounded corner in the menu. It creates a dent in the middle of the menu bar. It's not super noticeable with the light grey background, so in my screenshot below I changed the color to make it more apparent:

Possible solutions

1. Remove the rounded corner. The rounded corner gives a more "comfy" feel to the menu, but it's really not high impact in terms of UX and probably very few people notice it.
   

2. Remove the background color on .sentence-and-translations .header. I personally find the white space a bit awkward but again, the menu background is a very, very light grey so, it's probably not a big deal either.
   

Maybe you have other ideas, but in any case, I don't consider this to be a blocking issue for merging. I would just merge this on Saturday and probably remove the rounded corner if you don't have time to look into it.

[Yorwba]

The rounded corner gives a more "comfy" feel to the menu, but it's really not high impact in terms of UX and probably very few people notice it.

Count me among the people who never noticed it, but now that you pointed it out, I cannot unsee it. :) It does feel a bit softer somehow.

Remove the background color on .sentence-and-translations .header. I personally find the white space a bit awkward but again, the menu background is a very, very light grey so, it's probably not a big deal either.

I think it makes sense to have the menu background fit snugly around the icons. That way, when the menu is expanded, it expands naturally into the whitespace. It does look a bit awkward, but having the background cover the entire top of the header with only a handful of icons is also awkward. So I like this option better.

I've taken the liberty to implement option 2 and also moved the flex-direction from the style attribute to the standalone CSS file, which is where I should have put it in the first place.