Last modified: 2012-08-04 21:10:58 UTC
Created attachment 10500 [details] Feedback page mockup with 'Featured' label overlapping text comment The 'Featured' label is covered by the tools panel in the Article Feedback Page, as shown in attachment. This occurs more on small screens, and/or when resizing the browser window. Ideally, the 'Featured' label would be right-aligned, so that it would be flush with the left edge of the tools panel. However, if the screen is resized below a certain width, perhaps we should no longer show that label at all, to avoid a possible overlap with the comments. Is there any other solution you would recommend for solving this issue?
according to the new design, the featured label is moved to the left. closing, deprecated.
Actually, the 'Featured' and 'Resolved' labels still get in the way when the window is resized, causing a line-wrap overlapping the gray tools panel, as shown in this new attachment (New-Feedback-Page-Filter-Line-Wrap.png). As part of the new design, these 'Featured' and 'Resolved' labels should fail more gracefully, rather than collide with the tools panel. Would it be possible to make these labels disappear if the screen is resized to the point that they would start overlapping the tools panel? Also, would it be possible to make the 'Featured' and 'Resolved' labels be right-aligned next to the tools panels? (instead of the current fixed position relative to the left column) I have re-opened this ticket so we can resolve this issue in the context of the new page design.
Created attachment 10562 [details] NEW: New-Feedback-Page-Filter-Line-Wrap.png
I tried a solution for this that consists in the following: Make the following changes to "articleFeedbackv5-comment-tags": float: right; padding-right: 15px; and move "articleFeedbackv5-comment-tags" tags in the HTML after "articleFeedbackv5-feedback-tools". Set a minimal with to the whole post by adding to "articleFeedbackv5-feedback" min-width:850px; With this, the featured label gets replaced according to the available room and the action bar does not overlap with the post content. I have uploaded a video to show the result (only the post at the center of the screen has the modifications applied): http://youtu.be/sKG3DMqndtQ
I created an updated version of the previous proposed changes where: * articlefeedbackv5-content-wrap elements have been set their width from 60% to 70% * and the minimal width for posts has been set to 950px (instead of 850px). This change avoids the "flag as abuse" link to move to a new line but makes the design stop adapting at a bigger screen size. I recreated the effect in a new video: http://youtu.be/23Rc1ZjTsME
Changed to match Pau's suggestion and submitted to gerrit with the rest of the redesign: https://gerrit.wikimedia.org/r/7151
Thank you, Pau and Reha! Seems like a good solution overall. I am a bit confused by why the 'Featured' label behaves differently for different posts, as shown in the attached Firefox screenshot. (Feedback-Form-Display-Issues-Dropdown-Featured-Label.png) Is this because one feedback post is shorter than the other one?
Created attachment 10579 [details] Feedback-Form-Display-Issues-Dropdown-Featured-Label.png
