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/List.js | 70 +++++++++++++++++++++++++------------------
 1 file changed, 41 insertions(+), 29 deletions(-)

(limited to 'apps/Notes/components/List.js')

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
-- 
cgit v1.2.3