ui: responsive font size for book notes (#415)

apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx

@@ -105,14 +105,14 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
   });
 
   return (
-    <div className='note-editor-container bg-base-100 mt-2 rounded-md p-2'>
+    <div className='content note-editor-container bg-base-100 mt-2 rounded-md p-2'>
       <div className='flex w-full justify-between space-x-2'>
-        <div className='settings-content relative w-full'>
+        <div className='relative w-full'>
           <textarea
             className={clsx(
               'note-editor textarea textarea-ghost min-h-[1em] resize-none !outline-none',
-              'inset-0 w-full rounded-none border-0 bg-transparent p-0 leading-normal',
-              'text-sm',
+              'inset-0 w-full rounded-none border-0 bg-transparent p-0',
+              'content font-size-sm',
             )}
             ref={editorRef}
             value={note}
@@ -123,23 +123,25 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
             placeholder={_('Add your notes here...')}
           ></textarea>
         </div>
+      </div>
+      <div className='flex items-start pt-2'>
+        <div className='mr-2 min-h-full self-stretch border-l-2 border-gray-300'></div>
+        <div className='content font-size-sm line-clamp-3 py-2'>
+          <span className='content font-size-xs inline text-gray-500'>{getAnnotationText()}</span>
+        </div>
+      </div>
+      <div className='flex justify-end p-2'>
         <button
           className={clsx(
-            'btn btn-ghost settings-content hover:bg-transparent',
+            'content btn btn-ghost font-size-sm hover:bg-transparent',
             'flex h-[1.3em] min-h-[1.3em] items-end p-0',
             editorRef.current && editorRef.current.value ? '' : 'btn-disabled !bg-opacity-0',
           )}
           onClick={handleSaveNote}
         >
-          <div className='pr-1 align-bottom text-xs text-blue-400'>{_('Save')}</div>
+          <div className='font-size-sm pr-1 align-bottom text-blue-500'>{_('Save')}</div>
         </button>
       </div>
-      <div className='flex items-start pt-2'>
-        <div className='mr-2 min-h-full self-stretch border-l-2 border-gray-300'></div>
-        <div className='note-citation settings-content line-clamp-3 text-sm'>
-          {getAnnotationText()}
-        </div>
-      </div>
     </div>
   );
 };

apps/readest-app/src/app/reader/components/notebook/Notebook.tsx

@@ -153,6 +153,7 @@ const Notebook: React.FC = ({}) => {
       <div
         className={clsx(
           'notebook-container bg-base-200 right-0 z-20 min-w-60 select-none',
+          'font-sans text-base font-normal sm:text-sm',
           appService?.isIOSApp ? 'h-[100vh]' : 'h-full',
           appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
           appService?.hasRoundedWindow && 'rounded-window-top-right rounded-window-bottom-right',
@@ -182,7 +183,11 @@ const Notebook: React.FC = ({}) => {
           handleTogglePin={handleTogglePin}
         />
         <div className='max-h-[calc(100vh-44px)] overflow-y-auto px-3'>
-          <div>{excerptNotes.length > 0 && <p className='pt-1 text-sm'>{_('Excerpts')}</p>}</div>
+          <div>
+            {excerptNotes.length > 0 && (
+              <p className='content font-size-base pt-1'>{_('Excerpts')}</p>
+            )}
+          </div>
           <ul className=''>
             {excerptNotes.map((item, index) => (
               <li key={`${index}-${item.id}`} className='my-2'>
@@ -191,7 +196,7 @@ const Notebook: React.FC = ({}) => {
                   className='collapse-arrow border-base-300 bg-base-100 collapse border'
                 >
                   <div
-                    className='collapse-title h-9 min-h-9 p-2 pr-8 text-sm font-medium'
+                    className='collapse-title font-size-sm h-9 min-h-9 p-2 pr-8 font-medium'
                     style={
                       {
                         '--top-override': '1.2rem',
@@ -201,11 +206,11 @@ const Notebook: React.FC = ({}) => {
                   >
                     <p className='line-clamp-1'>{item.text || `Excerpt ${index + 1}`}</p>
                   </div>
-                  <div className='collapse-content select-text px-3 pb-0 text-xs'>
+                  <div className='collapse-content font-size-xs select-text px-3 pb-0'>
                     <p className='hyphens-auto text-justify'>{item.text}</p>
                     <div className='flex justify-end'>
                       <div
-                        className='cursor-pointer align-bottom text-xs text-red-400'
+                        className='font-size-xs cursor-pointer align-bottom text-red-500 hover:text-red-600'
                         onClick={handleEditNote.bind(null, item, true)}
                       >
                         {_('Delete')}
@@ -218,13 +223,13 @@ const Notebook: React.FC = ({}) => {
           </ul>
           <div>
             {(notebookNewAnnotation || annotationNotes.length > 0) && (
-              <p className='pt-1 text-sm'>{_('Notes')}</p>
+              <p className='content font-size-base pt-1'>{_('Notes')}</p>
             )}
           </div>
           {(notebookNewAnnotation || notebookEditAnnotation) && (
             <NoteEditor onSave={handleSaveNote} onEdit={(item) => handleEditNote(item, false)} />
           )}
-          <ul className=''>
+          <ul>
             {annotationNotes.map((item, index) => (
               <BooknoteItem key={`${index}-${item.cfi}`} bookKey={sideBarBookKey} item={item} />
             ))}

apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx

@@ -65,7 +65,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
     <li
       ref={viewRef}
       className={clsx(
-        'border-base-300 group relative my-2 cursor-pointer rounded-lg p-2 text-sm',
+        'border-base-300 content group relative my-2 cursor-pointer rounded-lg p-2',
         isCurrent ? 'bg-base-300/85 hover:bg-base-300' : 'hover:bg-base-300/55 bg-base-100',
         'transition-all duration-300 ease-in-out',
       )}
@@ -81,16 +81,16 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
           } as React.CSSProperties
         }
       >
-        {item.note && <span className='font-normal'>{item.note}</span>}
+        {item.note && <span className='content font-size-sm font-normal'>{item.note}</span>}
         <div className='flex items-start'>
           {item.note && (
             <div className='my-1 mr-2 min-h-full self-stretch border-l-2 border-gray-300'></div>
           )}
-          <div className='line-clamp-3'>
+          <div className={clsx('content font-size-sm line-clamp-3', item.note && 'py-2')}>
             <span
               className={clsx(
                 'inline',
-                item.note && 'text-xs text-gray-500',
+                item.note && 'content font-size-xs text-gray-500',
                 (item.style === 'underline' || item.style === 'squiggly') &&
                   'underline decoration-2',
                 item.style === 'highlight' && `bg-${item.color}-500 bg-opacity-40`,
@@ -120,15 +120,16 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
           {item.note && (
             <button
               className={clsx(
-                'btn btn-ghost settings-content hover:bg-transparent',
+                'btn btn-ghost content settings-content hover:bg-transparent',
                 'flex h-4 min-h-4 items-end p-0',
               )}
               onClick={editNote.bind(null, item)}
             >
               <div
                 className={clsx(
-                  'align-bottom text-blue-400',
+                  'align-bottom text-blue-500',
                   'transition duration-300 ease-in-out',
+                  'content font-size-sm',
                   'opacity-0 group-hover:opacity-100',
                   'hover:text-blue-600',
                 )}
@@ -139,15 +140,16 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
           )}
           <button
             className={clsx(
-              'btn btn-ghost settings-content hover:bg-transparent',
+              'btn btn-ghost content settings-content hover:bg-transparent',
               'flex h-4 min-h-4 items-end p-0',
             )}
             onClick={deleteNote.bind(null, item)}
           >
             <div
               className={clsx(
-                'align-bottom text-red-400',
+                'align-bottom text-red-500',
                 'transition duration-300 ease-in-out',
+                'content font-size-sm',
                 'opacity-0 group-hover:opacity-100',
                 'hover:text-red-600',
               )}

apps/readest-app/src/app/reader/components/sidebar/BooknoteView.tsx

@@ -51,7 +51,7 @@ const BooknoteView: React.FC<{
       <ul role='tree' className='px-2'>
         {sortedGroups.map((group) => (
           <li key={group.href} className='p-2'>
-            <h3 className='line-clamp-1 font-normal'>{group.label}</h3>
+            <h3 className='content font-size-base line-clamp-1 font-normal'>{group.label}</h3>
             <ul>
               {group.booknotes.map((item, index) => (
                 <BooknoteItem key={`${index}-${item.cfi}`} bookKey={bookKey} item={item} />

apps/readest-app/src/styles/globals.css

@@ -28,22 +28,6 @@ html[data-page='reader'] {
   background: theme('colors.base-100');
 }
 
-html {
-  font-size: 16px;
-}
-
-@media (max-width: 480px) {
-  html {
-    font-size: 20px;
-  }
-}
-
-@media (min-width: 481px) and (max-width: 1024px) {
-  html {
-    font-size: 18.4px;
-  }
-}
-
 body {
   color: var(--foreground);
   background: var(--background);
@@ -246,3 +230,34 @@ foliate-view {
 .pull-indicator.flip svg {
   transform: rotate(180deg);
 }
+
+.content {
+  font-size: 16px;
+}
+
+@media (max-width: 480px) {
+  .content {
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  .content {
+    font-size: 18.4px;
+  }
+}
+
+.content.font-size-base {
+  font-size: 1em !important;
+  line-height: 1.5em !important;
+}
+
+.content.font-size-sm {
+  font-size: 0.875em !important;
+  line-height: 1.25em !important;
+}
+
+.content.font-size-xs {
+  font-size: 0.75em !important;
+  line-height: 1em !important;
+}