rtl layout updates

This commit is contained in:
Henry Dollman
2024-10-31 22:15:21 -04:00
parent b9fda9dd0b
commit 856683610a
13 changed files with 35 additions and 244 deletions

View File

@@ -10,8 +10,8 @@ export default function ChartTimeSelect({ className }: { className?: string }) {
return (
<Select defaultValue="1h" value={chartTime} onValueChange={(value: ChartTimes) => $chartTime.set(value)}>
<SelectTrigger className={cn(className, "relative pl-10 pr-5")}>
<HistoryIcon className="h-4 w-4 absolute left-4 top-1/2 -translate-y-1/2 opacity-85" />
<SelectTrigger className={cn(className, "relative ps-10 pe-5")}>
<HistoryIcon className="h-4 w-4 absolute start-4 top-1/2 -translate-y-1/2 opacity-85" />
<SelectValue />
</SelectTrigger>
<SelectContent>

View File

@@ -143,7 +143,7 @@ export function UserAuthForm({
autoComplete="username"
autoCorrect="off"
disabled={isLoading || isOauthLoading}
className="pl-9"
className="ps-9"
/>
{errors?.username && <p className="px-1 text-xs text-red-600">{errors.username}</p>}
</div>
@@ -163,7 +163,7 @@ export function UserAuthForm({
autoComplete="email"
autoCorrect="off"
disabled={isLoading || isOauthLoading}
className="pl-9"
className="ps-9"
/>
{errors?.email && <p className="px-1 text-xs text-red-600">{errors.email}</p>}
</div>
@@ -180,7 +180,7 @@ export function UserAuthForm({
type="password"
autoComplete="current-password"
disabled={isLoading || isOauthLoading}
className="pl-9"
className="ps-9"
/>
{errors?.password && <p className="px-1 text-xs text-red-600">{errors.password}</p>}
</div>
@@ -198,7 +198,7 @@ export function UserAuthForm({
type="password"
autoComplete="current-password"
disabled={isLoading || isOauthLoading}
className="pl-9"
className="ps-9"
/>
{errors?.passwordConfirm && <p className="px-1 text-xs text-red-600">{errors.passwordConfirm}</p>}
</div>
@@ -210,9 +210,9 @@ export function UserAuthForm({
</div>
<button className={cn(buttonVariants())} disabled={isLoading}>
{isLoading ? (
<LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
<LoaderCircle className="me-2 h-4 w-4 animate-spin" />
) : (
<LogInIcon className="mr-2 h-4 w-4" />
<LogInIcon className="me-2 h-4 w-4" />
)}
{isFirstRun ? t("auth.create_account") : t("auth.sign_in")}
</button>
@@ -276,10 +276,10 @@ export function UserAuthForm({
disabled={isLoading || isOauthLoading}
>
{isOauthLoading ? (
<LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
<LoaderCircle className="me-2 h-4 w-4 animate-spin" />
) : (
<img
className="mr-2 h-4 w-4 dark:invert"
className="me-2 h-4 w-4 dark:invert"
src={`/static/${provider.name}.svg`}
alt=""
onError={(e) => {
@@ -298,7 +298,7 @@ export function UserAuthForm({
<Dialog>
<DialogTrigger asChild>
<button type="button" className={cn(buttonVariants({ variant: "outline" }))}>
<img className="mr-2 h-4 w-4 dark:invert" src="/static/github.svg" alt="" />
<img className="me-2 h-4 w-4 dark:invert" src="/static/github.svg" alt="" />
<span className="translate-y-[1px]">GitHub</span>
</button>
</DialogTrigger>

View File

@@ -65,14 +65,14 @@ export default function ForgotPassword() {
autoComplete="email"
autoCorrect="off"
disabled={isLoading}
className="pl-9"
className="ps-9"
/>
</div>
<button className={cn(buttonVariants())} disabled={isLoading}>
{isLoading ? (
<LoaderCircle className="mr-2 h-4 w-4 animate-spin" />
<LoaderCircle className="me-2 h-4 w-4 animate-spin" />
) : (
<SendHorizonalIcon className="mr-2 h-4 w-4" />
<SendHorizonalIcon className="me-2 h-4 w-4" />
)}
{t("auth.reset_password")}
</button>
@@ -90,7 +90,7 @@ export default function ForgotPassword() {
</DialogHeader>
<p className="text-primary/70 text-[0.95em] leading-relaxed">{t("auth.command_1")}</p>
<p className="text-primary/70 text-[0.95em] leading-relaxed">{t("auth.command_2")}</p>
<code className="bg-muted rounded-sm py-0.5 px-2.5 mr-auto text-sm">
<code className="bg-muted rounded-sm py-0.5 px-2.5 me-auto text-sm">
beszel admin update youremail@example.com newpassword
</code>
</DialogContent>

View File

@@ -37,8 +37,8 @@ const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
export default function Navbar() {
const { t } = useTranslation()
return (
<div className="flex items-center h-14 md:h-16 bg-card px-4 pr-3 sm:px-6 border bt-0 rounded-md my-4">
<Link href="/" aria-label="Home" className="p-2 pl-0 me-3">
<div className="flex items-center h-14 md:h-16 bg-card px-4 pe-3 sm:px-6 border bt-0 rounded-md my-4">
<Link href="/" aria-label="Home" className="p-2 ps-0 me-3">
<Logo className="h-[1.1rem] md:h-5 fill-foreground" />
</Link>
<SearchButton t={t} />

View File

@@ -54,7 +54,7 @@ export default function ConfigYaml() {
{t("settings.yaml_config.des_2")}
</p>
<p className="text-sm text-muted-foreground leading-relaxed">{t("settings.yaml_config.des_3")}</p>
<Alert className="my-4 border-destructive text-destructive w-auto table md:pr-6">
<Alert className="my-4 border-destructive text-destructive w-auto table md:pe-6">
<AlertCircleIcon className="h-4 w-4 stroke-destructive" />
<AlertTitle>{t("settings.yaml_config.alert.title")}</AlertTitle>
<AlertDescription>
@@ -77,7 +77,7 @@ export default function ConfigYaml() {
</div>
<Separator className="my-5" />
<Button type="button" className="mt-2 flex items-center gap-1" onClick={fetchConfig} disabled={isLoading}>
<ButtonIcon className={clsx("h-4 w-4 mr-0.5", isLoading && "animate-spin")} />
<ButtonIcon className={clsx("h-4 w-4 me-0.5", isLoading && "animate-spin")} />
{t("settings.export_configuration")}
</Button>
</div>

View File

@@ -165,7 +165,7 @@ export default function SystemsTable({ filter }: { filter?: string }) {
cell: (info) => {
const val = info.getValue() as number
return (
<span className="tabular-nums whitespace-nowrap pl-1">{decimalString(val, val >= 100 ? 1 : 2)} MB/s</span>
<span className="tabular-nums whitespace-nowrap ps-1">{decimalString(val, val >= 100 ? 1 : 2)} MB/s</span>
)
},
},

View File

@@ -4,7 +4,7 @@ import * as React from "react"
import { cn } from "@/lib/utils"
// const alertVariants = cva(
// "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
// "relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
// {
// variants: {
// variant: {
@@ -29,7 +29,7 @@ const Alert = React.forwardRef<
ref={ref}
role="alert"
className={cn(
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground bg-background text-foreground",
"relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground bg-background text-foreground",
className
)}
{...props}

View File

@@ -26,13 +26,13 @@ const DropdownMenuSubTrigger = React.forwardRef<
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
inset && "ps-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
<ChevronRight className="ms-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
inset && "ps-8",
className
)}
{...props}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
@@ -141,7 +141,7 @@ const DropdownMenuLabel = React.forwardRef<
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn("px-2.5 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
className={cn("px-2.5 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
{...props}
/>
))
@@ -156,7 +156,7 @@ const DropdownMenuSeparator = React.forwardRef<
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
return <span className={cn("ms-auto text-xs tracking-widest opacity-60", className)} {...props} />
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

View File

@@ -43,7 +43,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
<Button
variant="ghost"
size="icon"
className="ml-2 h-3 w-3"
className="ms-2 h-3 w-3"
onClick={() => {
onChange(value.filter((i) => i !== item))
}}

View File

@@ -94,7 +94,7 @@ const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
<SelectPrimitive.Label ref={ref} className={cn("py-1.5 ps-8 pe-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
@@ -105,7 +105,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}

View File

@@ -46,7 +46,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
<th
ref={ref}
className={cn(
"h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
"h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0",
className
)}
{...props}
@@ -57,7 +57,7 @@ TableHead.displayName = "TableHead"
const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
({ className, ...props }, ref) => (
<td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
<td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pe-0", className)} {...props} />
)
)
TableCell.displayName = "TableCell"

View File

@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {

View File

@@ -1,209 +0,0 @@
{
"add": "Add",
"add_system": {
"add_new_system": "Add New System",
"add_system": "Add system",
"binary": "Binary",
"click_to_copy": "Click to copy",
"command": "command",
"dialog_des_1": "The agent must be running on the system to connect. Copy the",
"dialog_des_2": "for the agent below.",
"host_ip": "Host / IP",
"key": "Public Key",
"name": "Name",
"port": "Port"
},
"alerts": {
"average_exceeds": "Average exceeds",
"for": "For",
"info": {
"bandwidth": "Bandwidth",
"bandwidth_des": "Triggers when combined up/down exceeds a threshold.",
"cpu_usage": "CPU Usage",
"cpu_usage_des": "Triggers when CPU usage exceeds a threshold.",
"disk_usage": "Disk Usage",
"disk_usage_des": "Triggers when usage of any disk exceeds a threshold.",
"memory_usage": "Memory Usage",
"memory_usage_des": "Triggers when memory usage exceeds a threshold.",
"status": "Status",
"status_des": "Triggers when status switches between up and down.",
"temperature": "Temperature",
"temperature_des": "Triggers when any sensor exceeds a threshold."
},
"notification_settings": "notification settings",
"overwrite_existing_alerts": "Overwrite existing alerts",
"subtitle_1": "See",
"subtitle_2": "to configure how you receive alerts.",
"title": "Alerts"
},
"all_systems": "All Systems",
"auth": {
"command_1": "If you've lost the password to your admin account, you may reset it using the following command.",
"command_2": "Then log into the backend and reset your user account password in the users table.",
"command_line_instructions": "Command line instructions",
"create": "Please create an admin account",
"create_account": "Create account",
"for_instructions": "for instructions.",
"forgot_password": "Forgot password?",
"login": "Please sign in to your account",
"openid_des": "Beszel supports OpenID Connect and many OAuth2 authentication providers.",
"please_view_the": "Please view the",
"reset": "Enter email address to reset password",
"reset_password": "Reset Password",
"sign_in": "Sign in"
},
"cancel": "Cancel",
"clipboard": {
"copied": "Copied to clipboard",
"des": "Automatic copy requires a secure context.",
"title": "Copy text"
},
"command": {
"SMTP_settings": "SMTP settings",
"admin": "Admin",
"dashboard": "Dashboard",
"documentation": "Documentation",
"page": "Page",
"pages_settings": "Pages / Settings",
"search": "Search for systems or settings..."
},
"continue": "Continue",
"copy": "Copy",
"days_other": "{{count}} days",
"filter": "Filter...",
"home": {
"active_alerts": "Active Alerts",
"active_des": "Exceeds {{value}}{{unit}} in last ",
"subtitle": "Updated in real time. Click on a system to view information."
},
"hours_one": "{{count}} hour",
"hours_other": "{{count}} hours",
"minutes_one": "{{count}} minute",
"minutes_other": "{{count}} minutes",
"monitor": {
"average": "Average",
"bandwidth": "Bandwidth",
"bandwidth_des": "Network traffic of public interfaces",
"cache_buffers": "Cache / Buffers",
"cpu_des": "system-wide CPU utilization",
"disk_des": "Usage of root partition",
"disk_io": "Disk I/O",
"disk_io_des": "Throughput of root filesystem",
"disk_space": "Disk Space",
"disk_usage_of": "Disk usage of",
"docker_cpu_des": "Average CPU utilization of containers",
"docker_cpu_usage": "Docker CPU Usage",
"docker_memory_des": "Memory usage of docker containers",
"docker_memory_usage": "Docker Memory Usage",
"docker_network_io": "Docker Network I/O",
"docker_network_io_des": "Network traffic of docker containers",
"max_1_min": "Max 1 min ",
"memory_des": "Precise utilization at the recorded time",
"read": "Read",
"received": "Received",
"sent": "Sent",
"swap_des": "Swap space used by the system",
"swap_usage": "Swap Usage",
"temperature": "Temperature",
"temperature_des": "Temperatures of system sensors",
"throughput_of": "Throughput of",
"toggle_grid": "Toggle grid",
"total_cpu_usage": "Total CPU Usage",
"total_memory_usage": "Total Memory Usage",
"usage": "Usage",
"used": "Used",
"waiting_for": "Waiting for enough records to display",
"write": "Write"
},
"search": "Search",
"settings": {
"export_configuration": "Export configuration",
"general": {
"chart_options": {
"default_time_period": "Default time period",
"default_time_period_des": "Sets the default time range for charts when a system is viewed.",
"subtitle": "Adjust display options for charts.",
"title": "Chart options"
},
"language": {
"preferred_language": "Preferred Language",
"subtitle_1": "Want to help us make our translations even better? Check out",
"subtitle_2": "for more details.",
"title": "Language"
},
"subtitle": "Change general application options.",
"title": "General"
},
"language": "Language",
"notifications": {
"email": {
"configure_an_SMTP_server": "configure an SMTP server",
"des": "Save address using enter key or comma. Leave blank to disable email notifications.",
"enter_email_address": "Enter email address...",
"please": "Please",
"title": "Email notifications",
"to_email_s": "To email(s)",
"to_ensure_alerts_are_delivered": "to ensure alerts are delivered."
},
"subtitle_1": "Configure how you receive alert notifications.",
"subtitle_2": "Looking instead for where to create alerts? Click the bell",
"subtitle_3": "icons in the systems table.",
"title": "Notifications",
"webhook_push": {
"add_url": "Add URL",
"des_1": "Beszel uses",
"des_2": "to integrate with popular notification services.",
"title": "Webhook / Push notifications"
}
},
"save_settings": "Save Settings",
"settings": "Settings",
"subtitle": "Manage display and notification preferences.",
"yaml_config": {
"alert": {
"des_1": "Existing systems not defined in",
"des_2": "will be deleted. Please make regular backups.",
"title": "Caution - potential data loss"
},
"des_1": "Systems may be managed in a",
"des_2": "file inside your data directory.",
"des_3": "On each restart, systems in the database will be updated to match the systems defined in the file.",
"short_title": "YAML Config",
"subtitle": "Export your current systems configuration.",
"title": "YAML Configuration"
}
},
"system": "System",
"systems": "Systems",
"systems_table": {
"agent": "Agent",
"copy_host": "Copy host",
"cpu": "CPU",
"delete": "Delete",
"delete_confirm": "Are you sure you want to delete {{name}}?",
"delete_confirm_des_1": "This action cannot be undone. This will permanently delete all current records for",
"delete_confirm_des_2": "from the database.",
"disk": "Disk",
"memory": "Memory",
"net": "Net",
"no_systems_found": "No systems found.",
"open_menu": "Open menu",
"pause": "Pause",
"resume": "Resume",
"system": "System"
},
"themes": {
"dark": "Dark",
"light": "Light",
"system": "System",
"toggle_theme": "Toggle theme"
},
"user_dm": {
"auth_providers": "Auth Providers",
"backups": "Backups",
"log_out": "Log Out",
"logs": "Logs",
"users": "Users"
},
"weeks_one": "{{count}} week"
}