From 1e14a1101933dcfec3f357c590a455649db375ff Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sat, 4 Sep 2021 21:55:21 +0200
Subject: add mobile styles

---
 apps/Notes/components/Export.js   |  4 ++-
 apps/Notes/components/List.js     | 70 +++++++++++++++++++++++----------------
 apps/Notes/components/ListItem.js | 10 ++++--
 apps/Notes/components/NoteView.js | 12 ++++---
 4 files changed, 59 insertions(+), 37 deletions(-)

(limited to 'apps/Notes/components')

diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index 11aed5b..eeeab8f 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -15,7 +15,9 @@ const Export = ({setAction}) => {
   return (
     <section>
       <div className='window__submenu'>
-        <div onClick={() => {setAction('')}}>{t('back')}</div>
+        <div>
+          <div onClick={() => {setAction('')}}>{t('back')}</div>
+        </div>
       </div>
       <div className={`window__scroll ${styles.export}`}>
         <h3>{t('notes_click_to_export')}</h3>
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 5039061..238e305 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -12,6 +12,7 @@ const List = () => {
   const [fetchedNote, setFetchedNote] = useState()
   const [action, setAction] = useState('')
   const [loading, setLoading] = useState(false)
+  const [showSort, setShowSort] = useState(false)
   const {notes, error} = useNotes()
   const [sortedBy, sortBy, sortFn] = useSort(3)
   const {t} = useSettings()
@@ -34,36 +35,47 @@ const List = () => {
     action === '' ? (
       <>
         <div className='window__submenu'>
-          <div onClick={() => setAction('addNote')}>{t('notes_new')}</div>
-          <div onClick={() => setAction('importNotes')}>{t('import')}</div>
-          <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
+          <div>
+            <div onClick={() => setAction('addNote')}>{t('notes_new')}</div>
+            <div className='mobile-only' onClick={() => {setShowSort(s => !s)}}>{t('sort')}</div>
+            <div onClick={() => setAction('importNotes')}>{t('import')}</div>
+            <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
+          </div>
+        </div>
+        <div className='window__scroll'>
+          <table className={styles.notesList}>
+            <thead className={showSort ? styles.mobileSort : 'desktop-only'}>
+              <tr className="mobile-only">
+                <th>{t('sort_by')}</th>
+              </tr>
+              <tr>
+                <th onClick={() => sortBy(1)}>{t('title')} {sortedBy(1)}</th>
+                <th onClick={() => sortBy(2)}>{t('created')} {sortedBy(2)}</th>
+                <th onClick={() => sortBy(3)}>{t('modified')} {sortedBy(3)}</th>
+              </tr>
+              <tr className='mobile-only'>
+                <td className='window__button' onClick={() => setShowSort(false)}>{t('close')}</td>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                notes.length > 0
+                  ? (notes.sort(sortFn).map(note => (
+                    <ListItem
+                      key={note._id}
+                      note={note}
+                      setAction={setAction}
+                      setFetchedNote={setFetchedNote}
+                      setLoading={setLoading}
+                    />
+                  ))) : (
+                    <tr>
+                      <td>{t('notes_list_empty')}</td>
+                    </tr>
+                  )}
+            </tbody>
+          </table>
         </div>
-        <table className={styles.notesList}>
-          <thead>
-            <tr>
-              <th onClick={() => sortBy(1)}>{t('title')} {sortedBy(1)}</th>
-              <th onClick={() => sortBy(2)}>{t('created')} {sortedBy(2)}</th>
-              <th onClick={() => sortBy(3)}>{t('modified')} {sortedBy(3)}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {
-              notes.length > 0
-                ? (notes.sort(sortFn).map(note => (
-                  <ListItem
-                    key={note._id}
-                    note={note}
-                    setAction={setAction}
-                    setFetchedNote={setFetchedNote}
-                    setLoading={setLoading}
-                  />
-                ))) : (
-                  <tr>
-                    <td>{t('notes_list_empty')}</td>
-                  </tr>
-                )}
-          </tbody>
-        </table>
       </>
     ) : (
       <Actions
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index 4abefd3..2b1e832 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -42,8 +42,14 @@ const ListItem = ({note, setAction, setFetchedNote, setLoading}) => {
           <FontAwesomeIcon icon={faTrash} />
         </span>
       </td>
-      <td>{datestring(note.created_at)}</td>
-      <td>{datestring(note.updated_at)}</td>
+      <td>
+        <span className='mobile-only'>{t('created')}:</span>
+        {datestring(note.created_at)}
+      </td>
+      <td>
+        <span className='mobile-only'>{t('modified')}:</span>
+        {datestring(note.updated_at)}
+      </td>
     </tr>
   )
 }
diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
index ccaf343..b92c7c7 100644
--- a/apps/Notes/components/NoteView.js
+++ b/apps/Notes/components/NoteView.js
@@ -23,11 +23,13 @@ const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
   return (
     <section className={styles.noteView}>
       <div className='window__submenu'>
-        <div onClick={() => {setFetchedNote(); setAction('')}}>{t('back')}</div>
-        <div onClick={() => copyToClipboard(content, t, setPopup)}>{t('copy')}</div>
-        <div onClick={() => {setAction('editNote')}}>{t('edit')}</div>
-        <div onClick={() => exportNote(fetchedNote)}>{t('export')}</div>
-        <div onClick={e => {removeNote(e, _id, mutateNotes, t, setPopup, setAction)}}>{t('remove')}</div>
+        <div>
+          <div onClick={() => {setFetchedNote(); setAction('')}}>{t('back')}</div>
+          <div onClick={() => copyToClipboard(content, t, setPopup)}>{t('copy')}</div>
+          <div onClick={() => {setAction('editNote')}}>{t('edit')}</div>
+          <div onClick={() => exportNote(fetchedNote)}>{t('export')}</div>
+          <div onClick={e => {removeNote(e, _id, mutateNotes, t, setPopup, setAction)}}>{t('remove')}</div>
+        </div>
       </div>
 
       <div className='window__scroll'>
-- 
cgit v1.2.3