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.

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

Jump to bottom

[1.x] Better Support for RTL #327

Merged
merged 1 commit into from
Nov 1, 2023
Merged

[1.x] Better Support for RTL #327

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
4 changes: 2 additions & 2 deletions stubs/default/resources/views/auth/login.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<div class="block mt-4">
<label for="remember_me" class="inline-flex items-center">
<input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
<span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
</label>
</div>

Expand All @@ -39,7 +39,7 @@
</a>
@endif

<x-primary-button class="ml-3">
<x-primary-button class="ms-3">
{{ __('Log in') }}
</x-primary-button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion stubs/default/resources/views/auth/register.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
{{ __('Already registered?') }}
</a>

<x-primary-button class="ml-4">
<x-primary-button class="ms-4">
{{ __('Register') }}
</x-primary-button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion stubs/default/resources/views/components/dropdown-link.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
4 changes: 2 additions & 2 deletions stubs/default/resources/views/components/dropdown.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
@php
switch ($align) {
case 'left':
$alignmentClasses = 'origin-top-left left-0';
$alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
break;
case 'top':
$alignmentClasses = 'origin-top';
break;
case 'right':
default:
$alignmentClasses = 'origin-top-right right-0';
$alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
break;
}

Expand Down
4 changes: 2 additions & 2 deletions stubs/default/resources/views/components/responsive-nav-link.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

@php
$classes = ($active ?? false)
? 'block w-full pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-left text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
: 'block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-left text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out';
? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
: 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out';
@endphp

<a {{ $attributes->merge(['class' => $classes]) }}>
Expand Down
8 changes: 4 additions & 4 deletions stubs/default/resources/views/layouts/navigation.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@
</div>

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
</div>
</div>

<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
<div class="hidden sm:flex sm:items-center sm:ms-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
<div>{{ Auth::user()->name }}</div>

<div class="ml-1">
<div class="ms-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
Expand Down Expand Up @@ -53,7 +53,7 @@
</div>

<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<div class="-me-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
Expand Down
2 changes: 1 addition & 1 deletion stubs/default/resources/views/profile/partials/delete-user-form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ class="mt-1 block w-3/4"
{{ __('Cancel') }}
</x-secondary-button>

<x-danger-button class="ml-3">
<x-danger-button class="ms-3">
{{ __('Delete Account') }}
</x-danger-button>
</div>
Expand Down
6 changes: 3 additions & 3 deletions stubs/inertia-react-ts/resources/js/Components/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
let alignmentClasses = 'origin-top';

if (align === 'left') {
alignmentClasses = 'origin-top-left left-0';
alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
} else if (align === 'right') {
alignmentClasses = 'origin-top-right right-0';
alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
}

let widthClasses = '';
Expand Down Expand Up @@ -83,7 +83,7 @@ const DropdownLink = ({ className = '', children, ...props }: InertiaLinkProps)
<Link
{...props}
className={
'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
className
}
>
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-react-ts/resources/js/Components/ResponsiveNavLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function ResponsiveNavLink({ active = false, className = '', chil
return (
<Link
{...props}
className={`w-full flex items-start pl-3 pr-4 py-2 border-l-4 ${
className={`w-full flex items-start ps-3 pe-4 py-2 border-l-4 ${
active
? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300'
: 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600'
Expand Down
10 changes: 5 additions & 5 deletions stubs/inertia-react-ts/resources/js/Layouts/AuthenticatedLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ export default function Authenticated({ user, header, children }: PropsWithChild
</Link>
</div>

<div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<div className="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<NavLink href={route('dashboard')} active={route().current('dashboard')}>
Dashboard
</NavLink>
</div>
</div>

<div className="hidden sm:flex sm:items-center sm:ml-6">
<div className="ml-3 relative">
<div className="hidden sm:flex sm:items-center sm:ms-6">
<div className="ms-3 relative">
<Dropdown>
<Dropdown.Trigger>
<span className="inline-flex rounded-md">
Expand All @@ -40,7 +40,7 @@ export default function Authenticated({ user, header, children }: PropsWithChild
{user.name}

<svg
className="ml-2 -mr-0.5 h-4 w-4"
className="ms-2 -me-0.5 h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
Expand All @@ -65,7 +65,7 @@ export default function Authenticated({ user, header, children }: PropsWithChild
</div>
</div>

<div className="-mr-2 flex items-center sm:hidden">
<div className="-me-2 flex items-center sm:hidden">
<button
onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-react-ts/resources/js/Pages/Auth/ConfirmPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function ConfirmPassword() {
</div>

<div className="flex items-center justify-end mt-4">
<PrimaryButton className="ml-4" disabled={processing}>
<PrimaryButton className="ms-4" disabled={processing}>
Confirm
</PrimaryButton>
</div>
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-react-ts/resources/js/Pages/Auth/ForgotPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
<InputError message={errors.email} className="mt-2" />

<div className="flex items-center justify-end mt-4">
<PrimaryButton className="ml-4" disabled={processing}>
<PrimaryButton className="ms-4" disabled={processing}>
Email Password Reset Link
</PrimaryButton>
</div>
Expand Down
4 changes: 2 additions & 2 deletions stubs/inertia-react-ts/resources/js/Pages/Auth/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default function Login({ status, canResetPassword }: { status?: string, c
checked={data.remember}
onChange={(e) => setData('remember', e.target.checked)}
/>
<span className="ml-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
<span className="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
</label>
</div>

Expand All @@ -87,7 +87,7 @@ export default function Login({ status, canResetPassword }: { status?: string, c
</Link>
)}

<PrimaryButton className="ml-4" disabled={processing}>
<PrimaryButton className="ms-4" disabled={processing}>
Log in
</PrimaryButton>
</div>
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-react-ts/resources/js/Pages/Auth/Register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export default function Register() {
Already registered?
</Link>

<PrimaryButton className="ml-4" disabled={processing}>
<PrimaryButton className="ms-4" disabled={processing}>
Register
</PrimaryButton>
</div>
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-react-ts/resources/js/Pages/Auth/ResetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function ResetPassword({ token, email }: { token: string, email:
</div>

<div className="flex items-center justify-end mt-4">
<PrimaryButton className="ml-4" disabled={processing}>
<PrimaryButton className="ms-4" disabled={processing}>
Reset Password
</PrimaryButton>
</div>
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-react-ts/resources/js/Pages/Profile/Partials/DeleteUserForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default function DeleteUserForm({ className = '' }: { className?: string
<div className="mt-6 flex justify-end">
<SecondaryButton onClick={closeModal}>Cancel</SecondaryButton>

<DangerButton className="ml-3" disabled={processing}>
<DangerButton className="ms-3" disabled={processing}>
Delete Account
</DangerButton>
</div>
Expand Down
10 changes: 5 additions & 5 deletions stubs/inertia-react-ts/resources/js/Pages/Welcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
<>
<Head title="Welcome" />
<div className="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
<div className="sm:fixed sm:top-0 sm:right-0 p-6 text-right">
<div className="sm:fixed sm:top-0 sm:right-0 p-6 text-end">
{auth.user ? (
<Link
href={route('dashboard')}
Expand All @@ -25,7 +25,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<

<Link
href={route('register')}
className="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
className="ms-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"
>
Register
</Link>
Expand Down Expand Up @@ -292,7 +292,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
</div>

<div className="flex justify-center mt-16 px-6 sm:items-center sm:justify-between">
<div className="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-left">
<div className="text-center text-sm text-gray-500 dark:text-gray-400 sm:text-start">
<div className="flex items-center gap-4">
<a
href="https://github.com/sponsors/taylorotwell"
Expand All @@ -303,7 +303,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
className="-mt-px mr-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
className="-mt-px me-1 w-5 h-5 stroke-gray-400 dark:stroke-gray-600 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-400"
>
<path
strokeLinecap="round"
Expand All @@ -316,7 +316,7 @@ export default function Welcome({ auth, laravelVersion, phpVersion }: PageProps<
</div>
</div>

<div className="ml-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-right sm:ml-0">
<div className="ms-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:text-end sm:ms-0">
Laravel v{laravelVersion} (PHP v{phpVersion})
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions stubs/inertia-react/resources/js/Components/Dropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
let alignmentClasses = 'origin-top';

if (align === 'left') {
alignmentClasses = 'origin-top-left left-0';
alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
} else if (align === 'right') {
alignmentClasses = 'origin-top-right right-0';
alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
}

let widthClasses = '';
Expand Down Expand Up @@ -75,7 +75,7 @@ const DropdownLink = ({ className = '', children, ...props }) => {
<Link
{...props}
className={
'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
className
}
>
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia-react/resources/js/Components/ResponsiveNavLink.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function ResponsiveNavLink({ active = false, className = '', chil
return (
<Link
{...props}
className={`w-full flex items-start pl-3 pr-4 py-2 border-l-4 ${
className={`w-full flex items-start ps-3 pe-4 py-2 border-l-4 ${
active
? 'border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300'
: 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600'
Expand Down
Loading