1032058 - The English and translation form are not aligned below the main box

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Localization, defect)

Description

[Jean-Yves Perrier [:teoli]]

In the translation interface, below the major textbox where we translate the article, there are a few fields, like tags.

These fields should be at the same height. English tags vis-à-vis of the translated tags, …

This will allow people to:
1. Be less prone to fill them
2. Have the correct information directly available near the field to file.

Comment 1

[Luke Crouch [:groovecoder]]

needinfo? Justin for P1/P2/P3

Comment 2

[Justin Crawford [:hoosteeno] [:jcrawford]]

Attachment: Illustration of the problem

I attach a screenshot.

There are at least 3 areas where the two halves of the page do not match.

A) The main content body is not vertically aligned. 
B) The metadata sections (Tags) are not vertically aligned.
C) The "Tags" headers are not the same markup or style. On the left is a smaller, lighter h3, on the right is a larger, bolder h2.

This bug is part of a larger effort to improve things for localizers in pursuit of an annual Developer Relations goal (https://wiki.mozilla.org/MDN/Projects/Development/Localization_UX_Improvements). It will inherit its priority from that effort. I will file (or find) a tracking bug for that effort.

Comment 3

[Stephanie Hobson [:shobson]]

Working on this I noticed that the page attachments are hidden on the translation page. This seems to be a bug in the code rather than intentional. :teoli can you confirm for me if attachments should or should not be shown on the translation page?

Comment 4

[Stephanie Hobson [:shobson]]

Attachment: translate.png

I've attached a screen shot of my proposed changes. It's a bit confusing because there is something wrong with my local dev and I don't have any of the interface translated. I will get that sorted out on Monday so I can do better testing.

List of proposed changes:
1. Fix the expand and collapse widget so that the icons signaling functionality display.
2. Move the page meta information into its own expanding and collapsing area (the only meta information right now is tags).
3. Move the remaining information to fill the width of the page instead of being underneath the translation side.
4. Title this new section "version notes" (it's called version comments in the screenshot but I didn't like that).
4. Fix attachments so they show up again.

Note: this does not fix the height of the content areas (the problem Justin identified as "a" in his screen shot), however, they line up once the user scrolls and the editing tool bar becomes sticky. Justin, is that good enough or would you like me to look into that again?

If this is good I'll work to refine some of the spacing and the heading hierarchy a bit before pushing it.

Comment 5

[Jean-Yves Perrier [:teoli]]

Attachment: translate.png

Stephanie:
- attachments were clearly forgotten
- I think your proposal is what we need
- I've made comments on it on this attachments. These are details to make the interface better and I guess some were just so obvious that you didn't even bothered to mention.

Concerning Justin's A: this is one of the major defect on the middle "chapter" and we need to find a solution. As there are several other bugs on this intermediary section, I think we should handle these together, but in another bug: Stephanie solution allows us to handle these separately from this bug.

Comment 6

[Justin Crawford [:hoosteeno] [:jcrawford]]

I think the direction :shobson is going (use full width for meta, collapse/expand sections) is great.

I totally agree with :teoli about:
* removing duplicate "tags"
* headings above article tags
* making sure we're using the appropriate heading styles
* placement and contents of of "review needed?" item
* "version notes"

I don't think the lines and icons are adding much as shown. They might add more if associated with the collapse/expand sections.

Comment 7

[Stephanie Hobson [:shobson]]

Attachment: 20140715_translate.png

Here's an update on where I am with this. As :teoli surmised, I had already identified that some of this needed to be done:

Done:
- 938662, remove form field (I may have broken the form when I removed this, if that is the case I will have to add it back so we can get these  changes pushed and address this form field seperately).
- Removed duplicate tag headings.
- Added headings for tags to distinguish English from translation.
- Made tag adding field same size and alignment as existing tags
- Called section "Version Notes"
- Removed icon from "Revision Comments"
- Moved "Review Needed" section up

For another time:
- Any changes to the CKEditor stuff should wait for the upgrade.
- Removing the KumaScript option from the review section should have another bug created for it. It's too interwoven with the regular edit pages for me to do quickly as part of these changes.

Would rather not do:
- Removing the lines here will remove them from other templates as well and I'm hesitant to diverge too far from the English templates and the original design direction. I agree they are not adding anything here but I do not think they are confusing things enough to warrant the work required to remove them :/
- The attachments form is separate from the other form on the page and cannot be quickly combined into a collapsible chapter.
- I'd like to leave the icon on the attachments heading as it is there on the article pages and I want to keep display consistent.

Still to do:
- Something is wrong with the spacing around the buttons at the top of the page.

Comment 8

[Stephanie Hobson [:shobson]]

Also still to do:
- Add new translation strings to verbatim.

Comment 9

[Luke Crouch [:groovecoder]]

(In reply to comment #8)
> Also still to do:
> - Add new translation strings to verbatim.

Ping me when you want to do that and I'll help you go thru http://kuma.readthedocs.org/en/latest/localization.html#updating-the-localizations

Comment 10

[Stephanie Hobson [:shobson]]

Sorry everyone, Bug #938662 is out of scope for this one. Simply removing it breaks other stuff (creating and editing new translations).

Comment 11

[Stephanie Hobson [:shobson]]

Found a way to remove the lines!

Now being held up by needing permissions to all the various systems to update the strings for localization.

Comment 12

[Jean-Yves Perrier [:teoli]]

Cool!

I will not bikeshed the attachment thing, so it is ok. The important is that it is there.

Globally it is very good. A few comments:
1. Bug 938662 has always been a separate bug.
2. I've filled the bug to remove the checkbox to toggle a translated page into a macro. I will add it to the meta bug.
3. There is nothing related to the CKEditor in this bug report, so I don't see why you are saying you won't do it now.

So for me, we are good here.

Comment 13

[Jean-Yves Perrier [:teoli]]

(In reply to Jean-Yves Perrier [:teoli] from comment #12)
> 3. There is nothing related to the CKEditor in this bug report, so I don't
> see why you are saying you won't do it now.
Oh, I have understood what you meant here :-) The alignment problem. It was added to that bug by Justin. I'm creating a follow-up bug for this one.

Comment 14

[Jean-Yves Perrier [:teoli]]

For the record, the two follow-up bugs are bug 1040595 and bug 1045099. I'm not marking them as blocking this bug as they are really independent of it. I've made them blocking the meta bug though.

Comment 15

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/3e61140953b624b060a54b394d6a00441a17bdba
Fix Bug #1032058 - Translation Form Alignment

1. Fix the expand and collapse widget so that the icons signalling functionality display.
2. Move the page meta information into its own expanding and collapsing area (the only meta information right now is tags).
3. Move the remaining information to fill the width of the page instead of being underneath the translation side.
4. Title this new section "version notes" (it's called version comments in the screenshot but I didn't like that).
5. Fix attachments so they show up again.
6. Document heiracrchy fixes to support new organization.
7. Style fixes for page-button alignment.
8. Move Review Flags up in document order.

Potential site wide impact:
- changed behaviour of clearfix() to clear using clear:both instead of :before
- removed wiki-block as extend for page-tags and page-comments and instead placed the class on the blocks.

https://github.com/mozilla/kuma/commit/e5e77b75a5763f80932681c4369334f558a7c814
Merge pull request #2571 from stephaniehobson/BUG-1032058-translation-v-align

Fix Bug #1032058 - Translation Form Alignment

Comment 16

[Jean-Yves Perrier [:teoli]]

Like for the tabs-at-the-bottom, I received positive feedback from our community, the very same day this hit production :-)

Well done, Stephanie. Thanks a lot.

Comment 17

[Jean-Yves Perrier [:teoli]]

I meant "save-buttons-at-the-bottom" of course ;-)

Comment 18

[[github robot]]

Commits pushed to persona-allauth at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/3e61140953b624b060a54b394d6a00441a17bdba
Fix Bug #1032058 - Translation Form Alignment

https://github.com/mozilla/kuma/commit/e5e77b75a5763f80932681c4369334f558a7c814
Merge pull request #2571 from stephaniehobson/BUG-1032058-translation-v-align