@Prtksxna Flagging this for you. If anything in here can change based on Pau's feedback, let's discuss it tomorrow.

I was wondering if the progress bar that runs on the top of the page should be part of this ticket too.

In T206712#4657069, @Niharika wrote:

@Prtksxna Flagging this for you. If anything in here can change based on Pau's feedback, let's discuss it tomorrow.

Thanks @Niharika! Yes, let's do that.

Is the progress bar part of OOUI?

In T206712#4657408, @Samwilson wrote:

Is the progress bar part of OOUI?

Yep, but I have messed with the styles a bit.

In T206712#4657316, @Prtksxna wrote:

I was wondering if the progress bar that runs on the top of the page should be part of this ticket too.

I will make that a part of another ticket. This one is kinda big already.

To be honest, I'm not a fan of the progress bar right now. Let's discuss it in our meeting.

@Samwilson I added a few comments.

We need to clarify whether or not we're including the File: in the page and window titles, and whether it gets translated.

Sorry, ignore that, I just realised we already had that discussion. :) Ditch the File.

I've extended the above patch to include everything in this ticket. It's ready for review. https://github.com/wikimedia/svgtranslate/pull/16

I commented on the PR. There seems to be something wrong with the asset loading. Possibly it's just me?

Wasn't just you. Was just me not using Docker! :) Fixed now.

I've updated the test site: https://tools.wmflabs.org/svgtranslate-test/

This is ready for QA.

I did a bit of QA review on this. Looking at https://tools.wmflabs.org/svgtranslate-test/File:Lake%20County%2050.svg -

• The From dropdown is wider than the To dropdown, causing the alignment to break -

• There is a lot of extra space between the input labels and the picture and the labels are too close to the left edge. For comparison -

Tool	Prototype

• The spacing between labels (vertically) is not as much as in the prototype (see above screenshots for comparison)
• The footer should not contain the tutorial. That's only meant to be on the main page.

Some more design related stuff:

Type sizes and weights

The translate page has different weights and sizes than the home page.

Tool	Design

Download is a link now, not a button

(sorry this change happened recently)

Tool	Design

Footer design

Significantly different from the prototype (sorry, I should've noticed it on the first page too)

Tool	Design

Differences in margins

Niharika already pointed some of these out but I wanted to highlight a few more:

• Remove gray margins on the side
• Add padding on the sides inside the white container
• Increase top padding a bit

Tool	Design

I just remembered that @Mooeypoo had shared that the tool becomes useless on large screens. I think we should limit the interface width to 1400px (CSS, not device pixels… retina 👀).

In T206712#4767161, @Prtksxna wrote:

I just remembered that @Mooeypoo had shared that the tool becomes useless on large screens. I think we should limit the interface width to 1400px (CSS, not device pixels… retina 👀).

We're currently using @width-breakpoint-desktop-extrawide, which is 2000px; is this okay? The next smaller pre-defined one is @width-breakpoint-desktop-wide which is 1200px.

I guess 2000 should be fine, we can ask @Mooeypoo to test once this is done and adjust later if we feel the need 💻

The From dropdown is wider than the To dropdown, causing the alignment to break

This is due to the fact that the From widget is a dropdown, and the To one is a button. On my setup the first is 363.1 wide and the second is 362.6, so I think probably just a difference in border calculation or something. As for alignment, I'm not sure what's breaking; are you still seeing the problem with the current dropdown-and-button configuration?

There is a lot of extra space between the input labels and the picture and the labels are too close to the left edge.

The space between the form inputs and the image happens when the image isn't as wide or wider than that space (and so it isn't scaled). I'm not quite sure what the desired appearance is here: do we want the image right-aligned under the upload button, or left aligned to keep a standard gutter between the form and the image? Or something else? The patch below adds the actual image in, so it's easier to test with differently-sized and proportioned images.

The left-margin for the form is fixed, with a max of 2000 px for the whole form (from @width-breakpoint-desktop-extrawide).

The spacing between labels (vertically) is not as much as in the prototype

Fixed. Added margin-bottom: 1.5rem, is that about right?

The footer should not contain the tutorial. That's only meant to be on the main page.

Fixed.

The translate page has different weights and sizes than the home page.

I'm not seeing any difference. They're not defined separately in the LESS files. It might be that the H1 is jumping down a bit on the translate page, due to the extra link above it. I've updated it to maintain that space above it even when there's no backlink; is this okay?:

Download is a link now, not a button

Is this a hard requirement? The download button is currently a form-submission button, because the current set of translations has to be POSTed to the server for the SVG to be built. We can replicate this behaviour in JS, but if it can stay as a button then we don't have to.

Footer design
Significantly different from the prototype

Yeah, sorry, I sort of mangled this didn't I? :) There are a few issues:

1. the toolforge logo has English text in it, which can't be translated, so I switched it out for actual text. I've updated it to be grey and small-caps:
   
2. The other link differences are due to not wanting to have multiple i18n messages to define each link and for them to be dependent on each other (e.g. View on [Github] instead of [View on Github] makes it easier for translators).
3. And text changes were because we can re-use these same phrases from Event Metrics and so reduce the work for translators, and have more consistence between tools.

Differences in margins
Remove gray margins on the side
Add padding on the sides inside the white container
Increase top padding a bit

All done. The white area padding is all 2rem.

PR for all the above is ready for review at https://github.com/wikimedia/svgtranslate/pull/29

In T206712#4776748, @Samwilson wrote:

The From dropdown is wider than the To dropdown, causing the alignment to break

This is due to the fact that the From widget is a dropdown, and the To one is a button. On my setup the first is 363.1 wide and the second is 362.6, so I think probably just a difference in border calculation or something. As for alignment, I'm not sure what's breaking; are you still seeing the problem with the current dropdown-and-button configuration?

I'm seeing a bigger difference in widths - 298 vs 285. The dropdown is wide enough to extend above the input labels which shouldn't happen - see screenshots above by me and Prateek.

There is a lot of extra space between the input labels and the picture and the labels are too close to the left edge.

The space between the form inputs and the image happens when the image isn't as wide or wider than that space (and so it isn't scaled). I'm not quite sure what the desired appearance is here: do we want the image right-aligned under the upload button, or left aligned to keep a standard gutter between the form and the image? Or something else? The patch below adds the actual image in, so it's easier to test with differently-sized and proportioned images.

I think the patch to add the actual image isn't merged yet. It would be extremely helpful to test with it once it's in. @Prtksxna correct me if you disagree but I think keeping the image left aligned with a standard gutter between the form and image is probably what's desired.

The left-margin for the form is fixed, with a max of 2000 px for the whole form (from @width-breakpoint-desktop-extrawide).

The left margin/padding is bigger in the prototype, per Prateek's comment above - can we increase that a bit?

The spacing between labels (vertically) is not as much as in the prototype

Fixed. Added margin-bottom: 1.5rem, is that about right?

Yup, seems good now!

The footer should not contain the tutorial. That's only meant to be on the main page.

Fixed.

Thanks!

Download is a link now, not a button

Is this a hard requirement? The download button is currently a form-submission button, because the current set of translations has to be POSTed to the server for the SVG to be built. We can replicate this behaviour in JS, but if it can stay as a button then we don't have to.

@Prtksxna how about we make this into a gray-er button so it's less eye-catchy?

Differences in margins
Remove gray margins on the side
Add padding on the sides inside the white container
Increase top padding a bit

All done. The white area padding is all 2rem.

Is this up on the site? I don't see the padding on the left of the text labels.

I'm seeing a bigger difference in widths - 298 vs 285. The dropdown is wide enough to extend above the input labels which shouldn't happen - see screenshots above by me and Prateek.

My mistake, I wasn't looking properly. How about a 30%/20%/50% spacing like this?:

I think the patch to add the actual image isn't merged yet. It would be extremely helpful to test with it once it's in.

Sorry, I meant that I've made that change in PR29 along with these other fixes. It's a minor thing, and makes this easier to test.

@Prtksxna correct me if you disagree but I think keeping the image left aligned with a standard gutter between the form and image is probably what's desired.

The buttons hang over the right side then:

The left margin/padding is bigger in the prototype, per Prateek's comment above - can we increase that a bit?

Done.

Is this up on the site? I don't see the padding on the left of the text labels.

No, sorry I did switch the staging site to it, but then changed it back again for something else. And anyway, if we're moving to this merge-before-QA workflow, then I should probably just keep adding screenshots here and we should aim to merge PR29 before more iterations of design.

In T206712#4784035, @Samwilson wrote:

I'm seeing a bigger difference in widths - 298 vs 285. The dropdown is wide enough to extend above the input labels which shouldn't happen - see screenshots above by me and Prateek.

My mistake, I wasn't looking properly. How about a 30%/20%/50% spacing like this?:

That way the 'to' is centred above the edge of the input fields.

Much better, thanks! Is there a way to equalize the widths of the two? The To looks much wider than From.

@Prtksxna correct me if you disagree but I think keeping the image left aligned with a standard gutter between the form and image is probably what's desired.

The buttons hang over the right side then:

But either left, centre, or right alignment is fine; it's scaling that we probably want to avoid.

Hmm, yeah, that looks odd. I'll let Prateek call on this one.

Much better, thanks! Is there a way to equalize the widths of the two? The To looks much wider than From.

Where should the "to" go if the dropdowns are the same size? Same place, or centered between the dropdowns?

Centred it is.

So now I think we're just left with two questions:

• the alignment of the image, and
• the download button style.

Over to you @Prtksxna :)

All done and merged. Staging site updated: https://tools.wmflabs.org/svgtranslate-test

In T206712#4812172, @Niharika wrote:

Looks good to me! @Prtksxna take a look and we can open follow up tickets for any more design fixes we want.

Looks good. Noted some minor changes in T212293: Change font stack and letter spacing and T212294: Align image to translate with the first text box.