This commit is contained in:
Michael Zhang 2024-05-27 20:38:18 -05:00
parent 81dc41bf4c
commit 4f503ac1a3
4 changed files with 32 additions and 9 deletions

View file

@ -24,4 +24,10 @@
flex-grow: 1;
flex-basis: auto;
overflow-x: scroll;
// Cribbed from https://www.magicpattern.design/tools/css-backgrounds
background-color: #e5e5f7;
opacity: 0.8;
background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
background-size: 10px 10px;
}

View file

@ -13,6 +13,10 @@
flex-direction: column;
resize: horizontal;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.header {

View file

@ -4,7 +4,14 @@
flex-direction: column;
}
.title {
.titleContainer,
.titleEditorForm {
display: flex;
}
.title,
.titleEditor {
flex-grow: 1;
padding: 12px;
border: none;
border-bottom: 1px solid lightgray;

View file

@ -33,7 +33,6 @@ export default function JournalPage({ id, data }: JournalPageProps) {
useEffect(() => {
if (changed) {
// console.log("OLD", previous, "NEW", valueToSave);
(async () => {
console.log("Saving...");
const resp = await fetch(`http://localhost:5195/node/${id}`, {
@ -72,28 +71,35 @@ export default function JournalPage({ id, data }: JournalPageProps) {
<>
{isEditingTitle ? (
<form
className={styles.titleEditorForm}
onSubmit={(evt) => {
evt.preventDefault();
saveChangedTitle();
}}
>
<input
className={styles.title}
className={styles.titleEditor}
type="text"
value={title}
onChange={(evt) => setTitle(evt.target.value)}
onChange={(evt) => {
let newTitle = evt.target.value;
if (newTitle.trim().length === 0) newTitle = null;
setTitle(newTitle);
}}
onBlur={() => saveChangedTitle()}
// biome-ignore lint/a11y/noAutofocus: <explanation>
autoFocus
/>
</form>
) : (
<div className={styles.titleContainer}>
<div
className={styles.title}
onDoubleClick={() => setIsEditingTitle(true)}
>
{title ?? <span className={styles.untitled}>(untitled)</span>}
</div>
</div>
)}
<div data-color-mode="light" className={styles.container}>
{day && <DayIndicator day={day} />}