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 ++++---
 apps/Notes/styles/_listItem.scss  | 34 ++++++++++++-------
 apps/Notes/styles/_noteView.scss  |  4 +--
 apps/Notes/styles/_notesList.scss | 71 +++++++++++++++++++++++++++++++++++++++
 7 files changed, 153 insertions(+), 52 deletions(-)

(limited to 'apps')

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'>
diff --git a/apps/Notes/styles/_listItem.scss b/apps/Notes/styles/_listItem.scss
index 5e7376f..fcee9aa 100644
--- a/apps/Notes/styles/_listItem.scss
+++ b/apps/Notes/styles/_listItem.scss
@@ -23,24 +23,34 @@
         opacity: 0;
         font-size: 80%;
         transition: .3s opacity linear .3s;
+
+        @media(max-width: 40em) {
+          display: none;
+        }
       }
     }
+
+    &:nth-of-type(n+2) span {
+      padding-right: .5em;
+    }
   }
 
-  &:hover {
-    background: var(--color-window-menu-alt);
-    border-radius: .5em;
-    // cursor: pointer;
+  @media(hover: hover) {
+    &:hover {
+      background: var(--color-window-menu-alt);
+      border-radius: .5em;
+      // cursor: pointer;
 
-    & > td:first-of-type > span:nth-child(n+2){
-      color: var(--color-window-buttons);
-      visibility: visible;
-      opacity: 1;
+      & > td:first-of-type > span:nth-child(n+2){
+        color: var(--color-window-buttons);
+        visibility: visible;
+        opacity: 1;
+      }
     }
-  }
 
-  & > td:first-of-type > span:nth-child(n+2):hover {
-    color: var(--color-text-alt);
-    background-color: var(--color-glass);
+    & > td:first-of-type > span:nth-child(n+2):hover {
+      color: var(--color-text-alt);
+      background-color: var(--color-glass);
+    }
   }
 }
diff --git a/apps/Notes/styles/_noteView.scss b/apps/Notes/styles/_noteView.scss
index cf6a080..63e3fa3 100644
--- a/apps/Notes/styles/_noteView.scss
+++ b/apps/Notes/styles/_noteView.scss
@@ -4,7 +4,6 @@
     to {opacity: 1;}
   }
 
-  padding: 1rem;
   position: absolute;
   top: 0;
   right: 0;
@@ -15,13 +14,12 @@
   h2 {
     font-size: 1.25em;
     font-weight: 600;
-    padding: 1rem;
     user-select: text;
   }
 
   p {
+    padding-top: 1em;
     line-height: 1.33;
-    padding: 0 1rem 1rem;
     white-space: pre-line;
     user-select: text;
   }
diff --git a/apps/Notes/styles/_notesList.scss b/apps/Notes/styles/_notesList.scss
index f55757f..4580d62 100644
--- a/apps/Notes/styles/_notesList.scss
+++ b/apps/Notes/styles/_notesList.scss
@@ -40,4 +40,75 @@
       animation: fade-in .3s;
     }
   }
+
+  @media(max-width: 40em) {
+    thead {
+      display: flex;
+
+      tr:first-of-type {
+        flex-shrink: 1;
+      }
+    }
+
+    tr {
+      flex-direction: column;
+    }
+
+    tbody {
+      tr {
+        padding-bottom: 1em;
+      }
+
+      td:first-of-type {
+        font-weight: 600;
+      }
+
+      td:nth-of-type(n+2) {
+        font-size: .8em;
+        padding-top: .5em;
+        color: var(--color-decor);
+      }
+    }
+  }
+}
+
+.mobileSort {
+  @media(max-width: 40em) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color-window-popup);
+    border-radius: .5em;
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
+    padding: 1.5em;
+    width: 15em;
+
+    tr:nth-of-type(1) > th {
+      font-weight: normal;
+    }
+
+    tr:nth-of-type(2) {
+      padding-left: 1.5em;
+
+      th {
+        padding: .75em;
+
+        svg {
+          margin-left: .5em;
+        }
+      }
+    }
+
+    tr:nth-of-type(3) {
+      text-align: center;
+
+      & > td {
+        display: inline-block;
+      }
+    }
+  }
 }
-- 
cgit v1.2.3