Problem/Motivation

If you enable more than one language and add the language switcher block to the header in Bartik the top 2 languages are not clickable. The edit mode icon overlays the block and does not allow you to click the language links.

Proposed resolution

See if Bartik has any CSS in place for blocks in the header.
Add fixes to allow users to click on languages in the block with contextual links enabled.

Remaining tasks

Contributor tasks needed
Task Novice task? Contributor instructions Complete?
Discuss solution options
Create a patch Instructions
Manually test the patch Instructions
Add steps to reproduce the issue Instructions
Embed before and after screenshots in the issue summary Instructions
Review patch to ensure that it fixes the issue, stays within scope, is properly documented, and follows coding standards Instructions

User interface changes

Yes.

API changes

None

Files: 
CommentFileSizeAuthor
#38 contexual links concept in mobile devices.png26.3 KBsyamnath
#36 icon-no-border.png30.02 KBemma.maria
#36 mobile-cut-off.png54.58 KBemma.maria
#36 mobile-cant-see.png52.73 KBemma.maria
#36 Screen Shot 2016-04-21 at 12.44.25.png1.3 MBemma.maria
#36 not-visible-at-all.png1.3 MBemma.maria
#36 enough-space.png1.18 MBemma.maria
#35 contexual-menu.gif1.04 MBsyamnath
#29 contextual_link-2355501-29.patch1.19 KBsyamnath
#29 contextual_link-2355501-29.png72.97 KBsyamnath
#26 235501-edit-button-pushing-screen.png30.91 KBhook_awesome
#23 boo | This is your site’s slogan. Edit, move or remove it as needed. 2015-01-09 14-41-55.png26.93 KBGábor Hojtsy
#22 Screen Shot 2014-12-31 at 00.15.02.png17.77 KBemma.maria
#20 example_bad_1.png67.68 KBemma.maria
#20 example_4.png179.95 KBemma.maria
#20 example_2.png14.78 KBemma.maria
#20 example_1.png23.54 KBemma.maria
#20 contextual-icon-placement-2355501-20.patch567 bytesemma.maria
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 83,304 pass(es). View
#9 contextual_link_icon_positioned_half_outside-click.png14.79 KBWim Leers
#9 contextual_link_icon_positioned_half_outside-hover.png12.08 KBWim Leers
#9 alternative_proposal_smarter_contextual_css-2355501-do-not-test.patch582 bytesWim Leers
#7 language-switcher-block-bartik-2355501-7.patch415 bytesemma.maria
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 81,437 pass(es). View
#7 Screen-Shot-2014-11-23-at-23.56.15.png152.82 KBemma.maria
#3 2014-10-16_221511.png3.98 KBhass

Comments

hass’s picture

Issue summary: View changes
hass’s picture

Component: locale.module » contextual.module
hass’s picture

Issue summary: View changes
FileSize
3.98 KB
Wim Leers’s picture

Title: Language switcher not clickable » Language switcher block in header region: language links not clickable because of default styling
Component: contextual.module » Bartik theme
YesCT’s picture

Issue tags: +D8MI
emma.maria’s picture

Issue summary: View changes
emma.maria’s picture

Issue summary: View changes
Status: Active » Needs review
Issue tags: +frontend, +Needs usability review
FileSize
152.82 KB
415 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 81,437 pass(es). View

After some investigation I found that the CSS styles for the language switcher are not in use anymore as the class is currently different to what it used to be. Changing the class makes the menu print horizontally which is a good start. But with very short languages eg. Lao, you can still only click on them if you are very very precise at it.

I am hesitant to add contextual link overriding styles just for Bartik or even just for the language switcher block, it seems like a scrappy fix. But the focus border around the block and the icon on hover do not look good in the header region just for Bartik and this problem will happen for any short text in a block added to the header.

Please can I have usability expert point of view on this, thanks :)

Bojhan’s picture

Issue tags: -Needs usability review

Hmm, that looks pretty bad - but to be expected. Contextual links don't really work well on small individual elements. Can we possibly redesign this block? For example, have some spacing on the right?

Wim Leers’s picture

Or, alternatively, we could make Contextual Links smarter, to work better with small elements. If you have suggestions on how to do that, I'm happy to help. Specifically, it seems tricky to make the contextual link pencil icon appear *outside* the hovered area, because upon leaving the hovered area, it would disappear.

Actually, having done a quick prototype … is there any good reason to insist on putting the contextual links *inside* the affected element? Why can't we put it partially outside? That even looks kinda nice, and AFAICT is close to a solution for this problem:

Bojhan’s picture

The problem is a little bit more difficult. The reason it is in the ---- line, is to make it easy for people to understand what the pen icon relates to. This is a fundamental aspect of this pattern, and we did consider the problem it creates with small elements (we decided to not take it into account). For most occurrences this pattern is just fine - it overlaps perhaps 10/20% of the time on your ordinary website. Aesthetically it also "aligns" with the corner of a context pane.

However as we move this pattern to more and more elements, and specifically smaller and smaller elements. We run into the limits of this pattern. We can move it outside of the area, but it decreases the ability to associate with the context object.

Before we make such a drastic change, I wonder if we can be more smarter about it? For example when the width is too small or if its overlapping with other elements (though I doubt thats measurable).

Wim Leers’s picture

Before we make such a drastic change, I wonder if we can be more smarter about it? For example when the width is too small or if its overlapping with other elements (though I doubt thats measurable).

In any case, that's going to be impossible front-end performance wise.

Why do you consider #9 to be drastic though? It's still overlapping with the element, so I'd say it's still a very clear, very strong association?

LewisNyman’s picture

In any case, that's going to be impossible front-end performance wise.

We could just pick a width and calculate this after that page has loaded? It wouldn't' cause a reflow as it only affects hovered elements. I don't think that's impossible. Is that a suitable fix?

hass’s picture

@Wim: Why have you changed this case to bartik theme?

This is a general issue in contextual links module. Every other custom contrib module has the same problem and I think this should be applied to all. Only themes having a problem with these default should override.

YesCT’s picture

Issue summary: View changes

taking out the novice notes in the issue summary since the path forward is not yet clear.
https://www.drupal.org/core-mentoring/novice-tasks

YesCT’s picture

Issue summary: View changes

actually taking out novice.

Wim Leers’s picture

#12: Then I'm not sure how you're "just going to pick a width"? But if that's possible, then that'd be okay of course.

emma.maria’s picture

Component: Bartik theme » contextual.module
Status: Needs review » Needs work

Switching this to be for the Contextual module.
I think this is a valid issue that should be fixed. This issue will affect any frontend theme that has small width/height elements.

Wim Leers’s picture

LewisNyman & emma.mari: do you have thoughts about my proposal in #9?

LewisNyman’s picture

Yes, let's do it, we might need to tweak the rest of the visuals so it doesn't look strange.

emma.maria’s picture

Title: Language switcher block in header region: language links not clickable because of default styling » Contextual link icons cover too much of small width elements.
Status: Needs work » Needs review
Issue tags: +Needs usability review
FileSize
567 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 83,304 pass(es). View
23.54 KB
14.78 KB
179.95 KB
67.68 KB

Updated the issue title to reflect the direction we are going with this issue now.

Also here is a concept patch for #9.

And some screenshots to show it in use...

Using Bartik as an example I found that when screens get narrow and the regions become the full width of the screen, the icon will obviously get cut off as it straddles the border of the region, see below...

hass’s picture

Can we have a screenshot of language switcher block too, please?

emma.maria’s picture

Here you go, it still covers part of the element (please note that the font is far too small and needs to be fixed in Bartik along with what I said in #7 where the fix is being taken out of this issue). I also purposely picked short languages to give the worst case scenario :)

Gábor Hojtsy’s picture

https://www.drupal.org/project/contextual-flyout-links is what Drupal Gardens uses to place the contextual trigger at the right place. It has JS as well as CSS. While it has not been touched for some time, it may still be a good one to look at.

The contextual flyout links apply a new skin on the core drupal contextual edit links. The links are accessed through a left-aligned tab (right-aligned in RTL languages) that flys out to the left of the content. This updated positioning leaves the content in the block unobscured. When the flyout has insufficient space to the left (i.e. when the links collide with the edge of the viewport), the position of the flyout shifts to the inside of the block.

hass’s picture

#23: That looks like a very good idea to me, too.

Bojhan’s picture

Issue tags: -Needs usability review

This looks like quite a good approach :) Happy to move this forward.

hook_awesome’s picture

Issue summary: View changes
Status: Needs review » Needs work
FileSize
30.91 KB

I applied the patch #9 and noticed that many edit icons on the screen are almost completely on the right border. In order to not extend past the page content they'll need to be cutoff. In order to keep the pen icon we would need to push it left into the content area, but that would have the same issue if a small area was located along that border.

emma.maria’s picture

Status: Needs work » Active

A new implementation for the idea in #23 needs to be implemented so I'm setting this back to Active.

Wim Leers’s picture

Title: Contextual link icons cover too much of small width elements. » Contextual link triggers cover too much of small contextual regions
Version: 8.0.x-dev » 8.2.x-dev
Category: Bug report » Task
Issue tags: +CSS, +JavaScript
syamnath’s picture

Hi I have created a patch on the above issue also included a screenshot image with it

I request to kindly review my patch.

After patch screenshot
after patch

syamnath’s picture

Assigned: Unassigned » syamnath
Status: Active » Needs review
Wim Leers’s picture

Assigned: syamnath » emma.maria

Assigning to Emma for review.

emma.maria’s picture

Assigned: emma.maria » Unassigned
Issue tags: +Usability, +Needs design review

Thanks @Wim Leers for making me aware of this issue again :)
As this is a design change within Core I am un-assigning myself. I will closely follow the progress and please feel free to assign back to me if/when a CSS review is needed.

I'm Tagging the Usability team in!

Bojhan’s picture

Issue tags: -Needs design review

I am going to defer the conceptual good/bad to Wim. Looks like we don't have suitable alternatives. I would be fine with moving it to the side - conceptually this feels to me like a good idea. But I am not sure if this works in all scenarios.

I am not a very big fan of having a sharp corner on the top left in #29. Can we have a GIF that shows the interaction?

droplet’s picture

+++ b/core/themes/stable/css/contextual/contextual.theme.css
@@ -32,13 +32,13 @@
+  right: -27px; /* LTR */

what if a site didn't have right padding?

Personally, I like the "hover edit" is deactivated by default. Toolbar Edit button toggles it enables. It's less annoying (and provided a chance to optimize it for better Page Loading & JS performance also.)

syamnath’s picture

FileSize
1.04 MB

Hi I have created a gif capture of the contextual link in action
Please refer below gif
contexual link in action

emma.maria’s picture

Status: Needs review » Needs work
FileSize
1.18 MB
1.3 MB
1.3 MB
52.73 KB
54.58 KB
30.02 KB

I did some manual testing on #29.

This solution does not account for designs where elements will be touching/very close to the edge of the browser window. This can be reproduced in Bartik and a typical small screen design will have full width blocks of content etc.

When there is no space on the right of the screen, the icon is sitting off the page or cut off. This is a regression we definitely cannot have.
 

 

 
Also the contextual link icon usually shows before the border that highlights the item displays and the straight left edge looks a bit odd in these cases.
 

We still need to add the suggestion in #23 of making the contextual link aware of space around it so it won't end up off the screen.

Wim Leers’s picture

#36: Thanks for pointing that out! I remember having this exact same discussion and remark several years ago, when we worked on revising the design of Contextual Links.

syamnath’s picture

I was thinking how to resolve that issue. While I was playing around with the conceptual links got two ideas . I just created a mock up and i will share. The concept is to show this overlay when clicking over those blocks ** only on mobile devices large devices the previos solution works fine.
contexual menu ovelay on  mobile devices

I will share the next solution as next comment , kindly review.

Manjit.Singh’s picture

@syamnath_zyxware Thanks for sharing the mockup. But to show the buttons on overlay is looks like not a good User Experience. :(

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.