Skip to content

Commit

Permalink
Replacing left/right classes with start/end to support RTL (#1392)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbdullahObaid
AbdullahObaid committed Oct 27, 2023
1 parent 23e51c6 commit 23a4ce8
Show file tree
Hide file tree
Showing 52 changed files with 147 additions and 147 deletions.
6 changes: 3 additions & 3 deletions stubs/inertia/resources/js/Components/Banner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@ watchEffect(async () => {
</svg>
</span>
<p class="ml-3 font-medium text-sm text-white truncate">
<p class="ms-3 font-medium text-sm text-white truncate">
{{ message }}
</p>
</div>
<div class="shrink-0 sm:ml-3">
<div class="shrink-0 sm:ms-3">
<button
type="button"
class="-mr-1 flex p-2 rounded-md focus:outline-none sm:-mr-2 transition"
class="-me-1 flex p-2 rounded-md focus:outline-none sm:-me-2 transition"
:class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }"
aria-label="Dismiss"
@click.prevent="show = false"
Expand Down
4 changes: 2 additions & 2 deletions stubs/inertia/resources/js/Components/ConfirmationModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const close = () => {
</svg>
</div>

<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<div class="mt-3 text-center sm:mt-0 sm:ms-4 sm:text-start">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
<slot name="title" />
</h3>
Expand All @@ -50,7 +50,7 @@ const close = () => {
</div>
</div>

<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-right">
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-end">
<slot name="footer" />
</div>
</Modal>
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia/resources/js/Components/ConfirmsPassword.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const closeModal = () => {
</SecondaryButton>

<PrimaryButton
class="ml-3"
class="ms-3"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
@click="confirmPassword"
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia/resources/js/Components/DialogModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const close = () => {
</div>
</div>

<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-right">
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-end">
<slot name="footer" />
</div>
</Modal>
Expand Down
4 changes: 2 additions & 2 deletions stubs/inertia/resources/js/Components/Dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ const widthClass = computed(() => {
const alignmentClasses = computed(() => {
if (props.align === 'left') {
return 'origin-top-left left-0';
return 'ltr:origin-top-left rtl:origin-top-right start-0';
}
if (props.align === 'right') {
return 'origin-top-right right-0';
return 'ltr:origin-top-right rtl:origin-top-left end-0';
}
return 'origin-top';
Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia/resources/js/Components/DropdownLink.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ defineProps({

<template>
<div>
<button v-if="as == 'button'" type="submit" 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">
<button v-if="as == 'button'" type="submit" 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 />
</button>

Expand Down
2 changes: 1 addition & 1 deletion stubs/inertia/resources/js/Components/FormSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
</div>
</div>

<div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
<div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
<slot name="actions" />
</div>
</form>
Expand Down
6 changes: 3 additions & 3 deletions stubs/inertia/resources/js/Components/ResponsiveNavLink.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ const props = defineProps({
const classes = computed(() => {
return props.active
? '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';
});
</script>

<template>
<div>
<button v-if="as == 'button'" :class="classes" class="w-full text-left">
<button v-if="as == 'button'" :class="classes" class="w-full text-start">
<slot />
</button>

Expand Down
12 changes: 6 additions & 6 deletions stubs/inertia/resources/js/Components/Welcome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
<svg xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
</svg>
<h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">
<h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
<a href="https://laravel.com/docs">Documentation</a>
</h2>
</div>
Expand All @@ -38,7 +38,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
<a href="https://laravel.com/docs" class="inline-flex items-center font-semibold text-indigo-700 dark:text-indigo-300">
Explore the documentation

<svg xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ml-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
<svg xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
<path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
</svg>
</a>
Expand All @@ -50,7 +50,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
<svg xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
<path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
</svg>
<h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">
<h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
<a href="https://laracasts.com">Laracasts</a>
</h2>
</div>
Expand All @@ -63,7 +63,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
<a href="https://laracasts.com" class="inline-flex items-center font-semibold text-indigo-700 dark:text-indigo-300">
Start watching Laracasts

<svg xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ml-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
<svg xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
<path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
</svg>
</a>
Expand All @@ -75,7 +75,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
<svg xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>
<h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">
<h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
<a href="https://tailwindcss.com/">Tailwind</a>
</h2>
</div>
Expand All @@ -90,7 +90,7 @@ import ApplicationLogo from '@/Components/ApplicationLogo.vue';
<svg xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
<h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">
<h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
Authentication
</h2>
</div>
Expand Down
20 changes: 10 additions & 10 deletions stubs/inertia/resources/js/Layouts/AppLayout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,23 +47,23 @@ const logout = () => {
</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">
<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</NavLink>
</div>
</div>

<div class="hidden sm:flex sm:items-center sm:ml-6">
<div class="ml-3 relative">
<div class="hidden sm:flex sm:items-center sm:ms-6">
<div class="ms-3 relative">
<!-- Teams Dropdown -->
<Dropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
<template #trigger>
<span class="inline-flex rounded-md">
<button type="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 focus:bg-gray-50 dark:focus:bg-gray-700 active:bg-gray-50 dark:active:bg-gray-700 transition ease-in-out duration-150">
{{ $page.props.auth.user.current_team.name }}

<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<svg class="ms-2 -me-0.5 h-4 w-4" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
</svg>
</button>
Expand Down Expand Up @@ -98,7 +98,7 @@ const logout = () => {
<form @submit.prevent="switchToTeam(team)">
<DropdownLink as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.auth.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<svg v-if="team.id == $page.props.auth.user.current_team_id" class="me-2 h-5 w-5 text-green-400" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

Expand All @@ -114,7 +114,7 @@ const logout = () => {
</div>

<!-- Settings Dropdown -->
<div class="ml-3 relative">
<div class="ms-3 relative">
<Dropdown align="right" width="48">
<template #trigger>
<button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
Expand All @@ -125,7 +125,7 @@ const logout = () => {
<button type="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 focus:bg-gray-50 dark:focus:bg-gray-700 active:bg-gray-50 dark:active:bg-gray-700 transition ease-in-out duration-150">
{{ $page.props.auth.user.name }}

<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<svg class="ms-2 -me-0.5 h-4 w-4" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
Expand Down Expand Up @@ -160,7 +160,7 @@ const logout = () => {
</div>

<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<div class="-me-2 flex items-center sm:hidden">
<button 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" @click="showingNavigationDropdown = ! showingNavigationDropdown">
<svg
class="h-6 w-6"
Expand Down Expand Up @@ -199,7 +199,7 @@ const logout = () => {
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
<div class="flex items-center px-4">
<div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 mr-3">
<div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 me-3">
<img class="h-10 w-10 rounded-full object-cover" :src="$page.props.auth.user.profile_photo_url" :alt="$page.props.auth.user.name">
</div>

Expand Down Expand Up @@ -258,7 +258,7 @@ const logout = () => {
<form @submit.prevent="switchToTeam(team)">
<ResponsiveNavLink as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.auth.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<svg v-if="team.id == $page.props.auth.user.current_team_id" class="me-2 h-5 w-5 text-green-400" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>{{ team.name }}</div>
Expand Down
Loading

0 comments on commit 23a4ce8

Please sign in to comment.