@Sarai-WMDE Do you have a simple copy/mockup for this? Then we could mark is as a good first task.

Designs/copy to improve this scenario need to be defined. I'll think of options and look for any potential previous approaches and share them here, so we make a joined decision.

Heads-up that this is the non-js message displayed by Wikidata Query builder at the moment:

We might want to update/improve this too.

Mock-up:

Attachment: Wikidata logo

Open question: should we use Codex styles and CSS-only components (message)?

I think it should be possible to load codex tokens using Blade's assets syntax, as codex tokens may be used as css custom properties.

Task Breakdown Notes:

• We can install codex using regular npm, and include it in our project using mix. See the following docs:
  • Codex: https://doc.wikimedia.org/codex/main/using-codex/about.html
  • Larvel: https://laravel.com/docs/8.x/mix
• The php view templates are at:
  • https://github.com/wmde/wikidata-mismatch-finder/tree/development/resources/views
  • We can extend the app.blade.php to include a noscript tag

Potential Plan of Action

1. Add codex tokens and css to project
2. Extend app.blade.php and implement the required design inside it (or in a separate template file that is included within)

@Sarai-WMDE I have 2 questions regarding the final design:
1 . How should it look like between breakpoints? I mean, with 550px width, should it look like tablet design or mobile design?

2. How should it look like at breakpoints? For example; at exactly 320px width should it look like tablet design or mobile design?

In T343344#9194407, @HasanAkgun_WMDE wrote:

@Sarai-WMDE I have 2 questions regarding the final design:
1 . How should it look like between breakpoints? I mean, with 550px width, should it look like tablet design or mobile design?

2. How should it look like at breakpoints? For example; at exactly 320px width should it look like tablet design or mobile design?

Hey @HasanAkgun_WMDE! Thanks for the questions. I tried to reflect that on the specs, but this is always tricky to communicate. We're working with 3 breakpoints:

$min-width-breakpoint-mobile (320px): Where the horizontal margins of the page should be 24px.
$min-width-breakpoint-tablet (640px): Where the horizontal margins become a minimum of 32px. At some point between this breakpoint and the desktop one (precisely at 744px), the content will reach its max-width: 680px. Beyond that, the horizontal margins will increase in size, but the content's width won't change.
$min-width-breakpoint-desktop (1120px): Same as above, so the breakpoint might not need to be specified? The content keeps its max width and the margins grow in width to take over the rest of the viewport.

For all breakpoints, the top margin (space above the logo) should be 10vw (let's see how that feels once implemented, this spaccing might need some adjustment).

Please let me know if anything is still unclear or missing 🙏

@HasanAkgun_WMDE I cannot peer review if I don't know what is to be reviewed :)

In T343344#9205608, @noarave wrote:

@HasanAkgun_WMDE I cannot peer review if I don't know what is to be reviewed :)

@noarave It would be great to have a general review of the code and check if it applies designs on Figma for all screen sizes.

@HasanAkgun_WMDE gladly, but you need to link the code in the task for us to be able to do that

In T343344#9205949, @noarave wrote:

@HasanAkgun_WMDE gladly, but you need to link the code in the task for us to be able to do that

Haha so sorry! Here it is.

@Sarai-WMDE this should be available on staging now https://mismatch-finder-staging.toolforge.org/

Design review done. Verification was done on Chrome 117, Safari 17 and Firefox 11. Everything appears to follow the specs to the millimeter 👍🏻 Funny enough, the only thing that needs fixing is an extra period at the end of the first sentence of the message. It should just be deleted:

This looks good to me once the typo that Sarai pointed out is resolved :)

Thanks so much!

We have added the fix to the most recent code, but it's not on staging right now. Should we proceed anyways? @Arian_Bozorg