0
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-11 02:59:07 +08:00
discourse/app/assets/stylesheets/common/components/post-translations.scss
Natalie Tay cb739f7f2d
UX: Allow user to set post and topic title language when manually creating post translations in modal (#41734)
Related:
https://meta.discourse.org/t/manual-localization-doesnt-seem-to-be-working/407319

Users have gotten tripped over and over again when manually inserting
translations for posts, not knowing they need to set the post language
first before the translation is shown (explained
[here](https://meta.discourse.org/t/manual-localization-doesnt-seem-to-be-working/407319/7?u=nat)).

This PR adds the ability to allow the user to set the post language in
the modal when they are working with translations, highlighting the fact
that they need to set the post language before translations can be shown
2026-07-16 10:43:39 +08:00

82 lines
1.6 KiB
SCSS
Vendored

@use "lib/viewport";
.post-translations-modal {
table {
width: 100%;
}
&__language-settings {
display: grid;
gap: var(--space-3);
margin-block-end: var(--space-4);
}
&__language-control {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-2);
align-items: end;
@include viewport.until(sm) {
display: contents;
}
}
&__language-actions {
display: flex;
gap: var(--space-1);
@include viewport.until(sm) {
order: 1;
}
&.is-hidden {
visibility: hidden;
pointer-events: none;
@include viewport.until(sm) {
display: none;
}
}
}
}
.fk-d-menu.post-language-selector-content {
z-index: z("composer", "dropdown");
// eventho mobile composer shouldnt be used in conjuction with fk-d-menu (floating version), on tablets the possibility unfortunately exists
.discourse-touch & {
z-index: z("mobile-composer");
}
}
.fk-d-tooltip__content[data-identifier="post-language"]
.fk-d-tooltip__inner-content {
flex-direction: column;
align-items: flex-start;
.post-language__original-language {
appearance: none;
border: 0;
background: transparent;
color: inherit;
font: inherit;
padding: 0;
text-align: start;
}
.post-language__disclaimer {
color: var(--primary-medium);
font-size: var(--font-down-2);
margin-top: var(--space-1);
}
}
.post-language-selector-trigger {
.toolbar-popup-menu-options__trigger-label {
margin-left: var(--space-1);
font-size: var(--font-down-2);
text-transform: uppercase;
color: var(--primary-high);
}
}