Skip to content

Fix textarea design errors #831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
guergana merged 1 commit into from
Jan 16, 2024
Merged

Fix textarea design errors #831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions resources/js/Components/ItemIdSearchTextarea.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
:status="validationError ? validationError.type : 'default'"
v-model="textareaInputValue"
/>
<template #label>
{{$i18n('item-form-id-input-label')}}
Copy link
Contributor

@chukarave chukarave Jan 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a merge blocker, but the label automatically gets a font-weight of 700 (on Firefox for me) which appears bolder than the Figma illustration shows. I still think this can go ahead since we will be revamping the styles we missed once tokens are on development anyway

Copy link
Contributor Author

@guergana guergana Jan 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah ok. yes, this isn't inside any div, will merge and yeah we need to check this later as you say.

</template>
</cdx-field>
</template>

Expand Down Expand Up @@ -92,6 +95,7 @@ defineExpose({validate, serializeInput, validationError});
</script>

<style lang="scss">
@import '~@wmde/wikit-tokens/dist/_variables.scss';

.cdx-field__control {
position: relative;
Expand All @@ -105,6 +109,10 @@ defineExpose({validate, serializeInput, validationError});
.cdx-progress-bar {
width: 50%;
margin: auto;

@media (max-width: $width-breakpoint-tablet) {
width: 80%;
Copy link
Contributor

@chukarave chukarave Jan 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

works nicely, i got a cute little progress bar on mobile.
In this case too we will have to redo this style once tokens are in place

}
}
}
}
Expand Down
16 changes: 0 additions & 16 deletions resources/js/Pages/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,21 +197,5 @@ function showRandom(): void{
.form-buttons {
text-align: end;
}

.cdx-field__control {
Copy link
Contributor Author

@guergana guergana Jan 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this from Home.vue because it was duplicated. This code belongs in [ItemIdSearchTextarea.vue](https://github.com/wmde/wikidata-mismatch-finder/pull/831/files#diff-ee8902c55d2443db0d269e1a35909457d37b48d775e00e61fbc631dec2b8a759) and has already been added there.

position: relative;
width: 100%;

.progress-bar-wrapper {
position: absolute;
top: 50%;
width: 100%;

.cdx-progress-bar {
width: 50%;
margin: auto;
}
}
}
}
</style>