Skip to content
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.

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

Frontend: RTL alignment fixes #1220

Merged
merged 2 commits into from Apr 30, 2021
Merged

Frontend: RTL alignment fixes #1220

merged 2 commits into from Apr 30, 2021

Conversation

haimkastner
Copy link
Contributor

  • Navigation sub-menu item margin
  • Notifier RTL text support
  • Media list view headers direction
  • Edit photo details view
  • Share content view
  • Upload media RTL text support

Copy link
Contributor

@StephenBrown2 StephenBrown2 left a comment

Choose a reason for hiding this comment

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

Looks like a couple !rtls got copy-pasted...

@@ -10,7 +10,7 @@
<translate key="Upload">Upload</translate>
</v-toolbar-title>
</v-toolbar>
<v-container grid-list-xs text-xs-left fluid>
<v-container grid-list-xs :text-xs-left="!rtl" :text-xs-right="!rtl" fluid>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<v-container grid-list-xs :text-xs-left="!rtl" :text-xs-right="!rtl" fluid>
<v-container grid-list-xs :text-xs-left="!rtl" :text-xs-right="rtl" fluid>

@@ -100,7 +100,7 @@
</v-expansion-panel-content>
</v-expansion-panel>

<v-container fluid text-xs-left class="pb-0 pt-3 pr-0 pl-0 caption">
<v-container fluid :text-xs-left="!rtl" :text-xs-right="!rtl" class="pb-0 pt-3 pr-0 pl-0 caption">
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like this got copy-pasted...

Suggested change
<v-container fluid :text-xs-left="!rtl" :text-xs-right="!rtl" class="pb-0 pt-3 pr-0 pl-0 caption">
<v-container fluid :text-xs-left="!rtl" :text-xs-right="rtl" class="pb-0 pt-3 pr-0 pl-0 caption">

frontend/src/component/navigation.vue Outdated Show resolved Hide resolved
Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com>
@haimkastner
Copy link
Contributor Author

haimkastner commented Apr 23, 2021

Hi @StephenBrown2,

Yes, you're right about the "copy-paste".

Most of the "vuetifyjs" components support RTL out-of-the-box.

But some of the styles are not supported RTL natively the and I didn't found a better way to implement it other than a high-risk CSS styles override.

Do you know a better way to do that?

By the way, I already set the first RTL supported using this ugly way see #801

@StephenBrown2
Copy link
Contributor

But some of the styles are not supported RTL natively the and I didn't found a better way to implement it other than a high-risk CSS styles override.

Ah, good to know. I'm not familiar with RTL or really Vuetify yet, so your guess is as good as mine.

@lastzero
Copy link
Member

Is this good to merge?

@lastzero lastzero changed the title RTL alignment fixes Frontend: RTL alignment fixes Apr 26, 2021
@lastzero lastzero self-assigned this Apr 26, 2021
@graciousgrey
Copy link
Member

Any update on this?

@haimkastner
Copy link
Contributor Author

Hi @graciousgrey,
To the best of my knowledge, the current implementation is the best way to add RTL support without a risk to break something even that it's contained a few copy-pastes.

@graciousgrey graciousgrey merged commit 11503be into photoprism:develop Apr 30, 2021
@lastzero lastzero added the released Available in the stable release label Oct 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Available in the stable release
Projects
Status: Released 🌈
Development

Successfully merging this pull request may close these issues.

None yet

4 participants