popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust more the UI - final

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/_app.tsx
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 }>) { export default function App({ Component, pageProps: { session, ...pageProps }, }: AppProps<{ session: Session }>) {
console.log(pageProps); // console.log(pageProps);
const router = useRouter(); const router = useRouter();
const [messages, setMessages] = useState({}); const [messages, setMessages] = useState({});

17
pages/cart/translations/index.tsx
View File

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