tomas.mirchev/med-notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better design edit page

Browse Source
This commit is contained in:
Tomas Mirchev 2025-06-30 17:06:21 +00:00
parent 4e0df6c740
commit 2e4549ebd7
1 changed files with 23 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
reader/src/ResourcePage.jsx
View File

@ -33,7 +33,7 @@ function SelectResource({ topics, selectedTopic, selectedResource, onChange, dis
return (
<div>
{/* File Selector */}
<div className="bg-white border-b border-gray-200 p-2 flex space-x-6">
<div className="bg-white border-b border-b-2 border-gray-200 p-2 flex space-x-6">
<div className="flex items-center">
<label htmlFor="topicSelect" className="block mr-2 text-sm font-medium text-gray-700 ">
Избери тема:
@ -262,7 +262,7 @@ const ResourcePage = ({ topics }) => {
// Main content screen
return (
<div className="min-h-screen bg-gray-50 flex flex-col">
<div className="h-dvh flex flex-col">
<SelectResource
topics={topics}
selectedTopic={selectedTopic}
@ -275,37 +275,36 @@ const ResourcePage = ({ topics }) => {
/>
{message.status === "error" && (
<div className="text-lg p-12 text-red-600 bg-gray-200">
<div className="text-lg p-12 text-red-600 bg-gray-200 border-b border-gray-200 ">
<pre>{message.text}</pre>
</div>
)}
{/* Content Editor */}
<div className="flex-1 bg-white p-2 flex flex-col">
<div className="flex-1 h-full flex space-x-2">
<div className="flex-1 flex flex-col">
<textarea
id="content"
disabled={isLoading || isSavingLoading}
value={content || ""}
onChange={(e) => setContent(e.target.value)}
className="w-full h-full min-h-full flex-1 items-stretch resize-none px-3 py-2 bg-gray-100 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm"
placeholder="Въведете вашето Markdown съдържание тук..."
/>
</div>
<div className="flex-1 w-full min-h-full overflow-hidden px-3 py-2 border border-gray-300 rounded-md">
<iframe
srcDoc={htmlContent}
title="MD Content"
className="w-full h-full border-0"
allow="fullscreen"
/>
</div>
<div className="flex-1 overflow-scroll">
<div className="min-h-full flex">
<div
contentEditable={!isLoading && !isSavingLoading}
suppressContentEditableWarning={true}
onInput={(e) => setContent(e.currentTarget.textContent || "")}
className="flex-1 min-h-full px-3 py-2 bg-gray-100 border-r border-gray-300 outline-none font-mono text-sm whitespace-pre-wrap"
ref={(el) => {
if (el && el.textContent !== content) {
el.textContent = content || "";
}
}}
/>
<iframe
srcDoc={htmlContent}
title="MD Content"
className="flex-1 min-h-full"
allow="fullscreen"
/>
</div>
</div>
{/* Bottom Actions */}
<div className="bg-white border-t border-gray-200 p-2 flex justify-between">
<div className="border-t border-t-2 border-gray-200 p-2 flex justify-between">
<div className="flex flex-wrap gap-3">
<button
onClick={handleCopyContent}