adjust more the UI - final

This commit is contained in:
Dobromir Popov
2024-04-29 02:29:26 +03:00
parent 0afae26869
commit e67c78b6a3
2 changed files with 9 additions and 10 deletions

View File

@ -26,7 +26,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
export default function App({ Component, pageProps: { session, ...pageProps }, }: AppProps<{ session: Session }>) {
console.log(pageProps);
// console.log(pageProps);
const router = useRouter();
const [messages, setMessages] = useState({});

View File

@ -40,7 +40,7 @@ const AdminTranslations = () => {
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="mx-auto px-4 sm:px-6 lg:px-8">
<div className="sticky top-0 z-10 bg-white shadow-md py-4 px-4">
<div className="flex justify-between items-center">
<h1 className="text-xl font-semibold leading-tight text-gray-800">Edit Translations</h1>
@ -70,24 +70,23 @@ const AdminTranslations = () => {
<table className="w-full text-sm text-left text-gray-500">
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
<th scope="col" className="py-3 px-6">Key</th>
<th scope="col" className="py-3 px-6">Base Translation</th>
<th scope="col" className="py-3 px-6">Translation</th>
<th scope="col" className="py-3 px-6 w-2/12">Key</th> {/* Adjusted width */}
<th scope="col" className="py-3 px-6 w-3/12">Base Translation</th> {/* Adjusted width */}
<th scope="col" className="py-3 px-6 w-7/12">Translation</th> {/* Adjusted width */}
</tr>
</thead>
<tbody>
{Object.entries(baseTranslations).map(([key, baseValue]) => (
<tr key={key} className="bg-white border-b hover:bg-gray-50">
<td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap">{key}</td>
<td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap text-ellipsis">{key}</td>
<td className="py-4 px-6">{baseValue}</td>
<td className="py-4 px-6">
<input
type="text"
<textarea
value={translations[key] || ''}
placeholder='Въведи превод...'
onChange={e => handleChange(key, e.target.value)}
className="block w-full text-base px-2 py-1 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded placeholder-gray-400"
style={{ transition: 'box-shadow .3s', boxShadow: translations[key] ? '0 0 0px 1px rgba(59, 130, 246, 0.5)' : 'none' }}
className="block w-60hv text-base px-2 py-1 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 rounded placeholder-gray-400"
style={{ width: '100%', resize: 'both', transition: 'box-shadow .3s', boxShadow: translations[key] ? '0 0 0px 1px rgba(59, 130, 246, 0.5)' : 'none' }}
/>
</td>