aboutsummaryrefslogtreecommitdiffstats
path: root/apps/Notes
diff options
context:
space:
mode:
Diffstat (limited to 'apps/Notes')
-rw-r--r--apps/Notes/components/Export.js4
-rw-r--r--apps/Notes/components/List.js70
-rw-r--r--apps/Notes/components/ListItem.js10
-rw-r--r--apps/Notes/components/NoteView.js12
-rw-r--r--apps/Notes/styles/_listItem.scss34
-rw-r--r--apps/Notes/styles/_noteView.scss4
-rw-r--r--apps/Notes/styles/_notesList.scss71
7 files changed, 153 insertions, 52 deletions
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;
+ }
+ }
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 21:39:34 +0000