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

21
components/publisher/SearchReplacement.js
View File

@ -85,19 +85,20 @@ 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 <input id="subscribedPublishersCheckbox"
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')}
/> />
<span className="text-sm font-medium">Абонирани:</span> <label htmlFor="subscribedPublishersCheckbox" className="text-sm font-medium">Абонирани:</label>
</div> </div>
<div className="overflow-y-auto max-h-64">
<label className="block mb-2">
<div className="flex flex-wrap"> <div className="flex flex-wrap">
{subscribedPublishers.map(pub => ( {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> <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>
@ -105,17 +106,18 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, subscribedPublishers, a
</div> </div>
</label> </label>
</div> </div>
<div className="mb-4">
<label className="block mb-2">
<div className="flex items-center mb-2"> <div className="flex items-center mb-2">
<input <input id="availablePublishersCheckbox"
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')}
/> />
<span className="text-sm font-medium">На разположение :</span> <label htmlFor="availablePublishersCheckbox" className="text-sm font-medium">На разположение :</label>
</div> </div>
<div className="overflow-y-auto max-h-64">
<label className="block mb-2">
<div className="flex flex-wrap"> <div className="flex flex-wrap">
{availablePublishers.map(pub => ( {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> <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>
@ -123,6 +125,7 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, subscribedPublishers, a
</div> </div>
</label> </label>
</div> </div>
</div>
<div className="text-right"> <div className="text-right">
<button <button
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 mr-2" className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 mr-2"