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

fix searchreplacemet UI on small screens

Browse Source
This commit is contained in:
Dobromir Popov
2024-05-04 00:51:31 +03:00
parent 43a4f93bb3
commit 9249281785
1 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
components/publisher/SearchReplacement.js
View File

@ -85,43 +85,46 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, subscribedPublishers, a
return ( return (
<div className="fixed inset-0 flex items-center justify-center z-50"> <div className="fixed inset-0 flex items-center justify-center z-50">
<div className="absolute inset-0 bg-black opacity-50" onClick={onClose}></div> <div className="absolute inset-0 bg-black opacity-50" onClick={onClose}></div>
<div className="bg-white p-6 rounded-lg shadow-lg z-10"> <div className="bg-white p-6 rounded-lg shadow-lg z-10 max-h-screen overflow-y-auto">
<h2 className="text-lg font-semibold mb-4">Можете да изпратите заявка за заместник до следните групи:</h2> <h2 className="text-lg font-semibold mb-4">Можете да изпратите заявка за заместник до следните групи:</h2>
<div className="mb-4"> <div className="space-y-1">
<label className="block mb-2"> <div className="flex items-center mb-2">
<div className="flex items-center mb-2"> <input id="subscribedPublishersCheckbox"
<input type="checkbox"
type="checkbox" className="mr-2 leading-tight"
className="mr-2 leading-tight" checked={selectedGroups.includes('subscribedPublishers')}
checked={selectedGroups.includes('subscribedPublishers')} onChange={() => handleToggleGroup('subscribedPublishers')}
onChange={() => handleToggleGroup('subscribedPublishers')} />
/> <label htmlFor="subscribedPublishersCheckbox" className="text-sm font-medium">Абонирани:</label>
<span className="text-sm font-medium">Абонирани:</span> </div>
</div> <div className="overflow-y-auto max-h-64">
<div className="flex flex-wrap"> <label className="block mb-2">
{subscribedPublishers.map(pub => ( <div className="flex flex-wrap">
<span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span> {subscribedPublishers.map(pub => (
))} <span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
</div> ))}
</label> </div>
</div> </label>
<div className="mb-4"> </div>
<label className="block mb-2"> <div className="flex items-center mb-2">
<div className="flex items-center mb-2"> <input id="availablePublishersCheckbox"
<input type="checkbox"
type="checkbox" className="mr-2 leading-tight"
className="mr-2 leading-tight" checked={selectedGroups.includes('availablePublishers')}
checked={selectedGroups.includes('availablePublishers')} onChange={() => handleToggleGroup('availablePublishers')}
onChange={() => handleToggleGroup('availablePublishers')} />
/> <label htmlFor="availablePublishersCheckbox" className="text-sm font-medium">На разположение :</label>
<span className="text-sm font-medium">На разположение :</span> </div>
</div> <div className="overflow-y-auto max-h-64">
<div className="flex flex-wrap"> <label className="block mb-2">
{availablePublishers.map(pub => (
<span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span> <div className="flex flex-wrap">
))} {availablePublishers.map(pub => (
</div> <span key={pub.id} className="bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{pub.name}</span>
</label> ))}
</div>
</label>
</div>
</div> </div>
<div className="text-right"> <div className="text-right">
<button <button