From 79bdb88a5fc099b5871a83d18eadf9b0448b41d1 Mon Sep 17 00:00:00 2001 From: piotrruss Date: Thu, 30 Sep 2021 22:48:13 +0200 Subject: added favicons & notes route for phone --- apps/Notes/components/Export.js | 58 ++-- apps/Notes/components/Import.js | 4 +- apps/Notes/components/List.js | 12 +- apps/Notes/helpers/import.js | 2 +- apps/Notes/styles/_export.scss | 14 + apps/Notes/styles/_import.scss | 1 - apps/Notes/styles/_noteView.scss | 3 +- apps/Notes/styles/_notesList.scss | 4 +- apps/Youtube/styles/_results.scss | 1 + components/Header.js | 13 +- components/Layout.js | 26 +- helpers/logout.js | 12 + next.config.js | 4 +- pages/Notes.js | 60 +++++ pages/api/notes/index.js | 1 + public/android-chrome-192x192.png | Bin 0 -> 2056 bytes public/android-chrome-512x512.png | Bin 0 -> 12262 bytes public/apple-touch-icon.png | Bin 0 -> 4867 bytes public/browserconfig.xml | 9 + public/favicon-16x16.png | Bin 0 -> 625 bytes public/favicon-32x32.png | Bin 0 -> 884 bytes public/favicon.ico | Bin 0 -> 15086 bytes public/mstile-144x144.png | Bin 0 -> 1543 bytes public/mstile-150x150.png | Bin 0 -> 4153 bytes public/mstile-310x150.png | Bin 0 -> 4607 bytes public/mstile-310x310.png | Bin 0 -> 8694 bytes public/mstile-70x70.png | Bin 0 -> 3015 bytes public/notes/android-chrome-192x192.png | Bin 0 -> 2056 bytes public/notes/android-chrome-512x512.png | Bin 0 -> 9572 bytes public/notes/apple-touch-icon.png | Bin 0 -> 3345 bytes public/notes/browserconfig.xml | 9 + public/notes/favicon-16x16.png | Bin 0 -> 654 bytes public/notes/favicon-32x32.png | Bin 0 -> 763 bytes public/notes/favicon.ico | Bin 0 -> 15086 bytes public/notes/mstile-144x144.png | Bin 0 -> 2027 bytes public/notes/mstile-150x150.png | Bin 0 -> 2201 bytes public/notes/mstile-310x150.png | Bin 0 -> 2384 bytes public/notes/mstile-310x310.png | Bin 0 -> 5995 bytes public/notes/mstile-70x70.png | Bin 0 -> 1632 bytes public/notes/safari-pinned-tab.svg | 19 ++ public/notes/site.webmanifest | 19 ++ public/safari-pinned-tab.svg | 452 ++++++++++++++++++++++++++++++++ public/site.webmanifest | 19 ++ styles/global.scss | 22 +- styles/global/_window.scss | 8 +- styles/main/_icon.scss | 6 +- styles/main/_layout.scss | 7 +- 47 files changed, 726 insertions(+), 59 deletions(-) create mode 100644 helpers/logout.js create mode 100644 pages/Notes.js create mode 100644 public/android-chrome-192x192.png create mode 100644 public/android-chrome-512x512.png create mode 100644 public/apple-touch-icon.png create mode 100644 public/browserconfig.xml create mode 100644 public/favicon-16x16.png create mode 100644 public/favicon-32x32.png create mode 100644 public/favicon.ico create mode 100644 public/mstile-144x144.png create mode 100644 public/mstile-150x150.png create mode 100644 public/mstile-310x150.png create mode 100644 public/mstile-310x310.png create mode 100644 public/mstile-70x70.png create mode 100644 public/notes/android-chrome-192x192.png create mode 100644 public/notes/android-chrome-512x512.png create mode 100644 public/notes/apple-touch-icon.png create mode 100644 public/notes/browserconfig.xml create mode 100644 public/notes/favicon-16x16.png create mode 100644 public/notes/favicon-32x32.png create mode 100644 public/notes/favicon.ico create mode 100644 public/notes/mstile-144x144.png create mode 100644 public/notes/mstile-150x150.png create mode 100644 public/notes/mstile-310x150.png create mode 100644 public/notes/mstile-310x310.png create mode 100644 public/notes/mstile-70x70.png create mode 100644 public/notes/safari-pinned-tab.svg create mode 100644 public/notes/site.webmanifest create mode 100644 public/safari-pinned-tab.svg create mode 100644 public/site.webmanifest diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js index 4ab1d64..516c0ec 100644 --- a/apps/Notes/components/Export.js +++ b/apps/Notes/components/Export.js @@ -3,6 +3,8 @@ import React, { useState } from 'react' import useSettings from 'hooks/useSettings' import useNotes from '../hooks/useNotes' import { handleSelect, handleSelectAll, handleExport } from '../helpers/export' +import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' const Export = ({ setAction }) => { const { notes } = useNotes() @@ -29,29 +31,43 @@ const Export = ({ setAction }) => { />

{t('notes_to_export')}

- handleSelectAll(e, notes, setIds)} - checked={notes.length === ids.length} - /> - +
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js index 5827310..fa1fa48 100644 --- a/apps/Notes/components/Import.js +++ b/apps/Notes/components/Import.js @@ -13,7 +13,9 @@ const Import = ({ setAction }) => { return (
-
{ setAction('') }}>{t('back')}
+
+
{ setAction('') }}>{t('back')}
+
handleImport(e, files, mutateNotes, setDone)}> diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js index 0e6c8fa..7d88c8d 100644 --- a/apps/Notes/components/List.js +++ b/apps/Notes/components/List.js @@ -1,4 +1,5 @@ import styles from '../styles/Notes.module.scss' +import { useRouter } from 'next/router' import React, { useState, useEffect } from 'react' import useUser from 'hooks/useUser' import useSettings from 'hooks/useSettings' @@ -7,8 +8,9 @@ import useSort from '../hooks/useSort' import ListItem from './ListItem' import Actions from './Actions' import { Splash } from 'components' +import handleLogout from 'helpers/logout' -const List = () => { +const List = ({ logout }) => { const [fetchedNote, setFetchedNote] = useState() const [action, setAction] = useState('') const [loading, setLoading] = useState(false) @@ -16,7 +18,8 @@ const List = () => { const { notes, error } = useNotes() const [sortedBy, sortBy, sortFn] = useSort(3) const { t } = useSettings() - const { user } = useUser({ + const router = useRouter() + const { user, mutateUser } = useUser({ redirectToLogin: true, redirectToVerify: true }) @@ -41,6 +44,11 @@ const List = () => {
{ setShowSort(s => !s) }}>{t('sort')}
setAction('importNotes')}>{t('import')}
setAction('exportNotes')}>{t('export')}
+ {logout && ( +
handleLogout(e, router, mutateUser)}> + {t('logout')} +
+ )}
diff --git a/apps/Notes/helpers/import.js b/apps/Notes/helpers/import.js index bbdceaa..01ad00e 100644 --- a/apps/Notes/helpers/import.js +++ b/apps/Notes/helpers/import.js @@ -24,7 +24,7 @@ export const handleImport = async (e, files, mutateNotes, setDone) => { try { const notes = await fetchJson('/api/notes', { method: 'POST', - headers: { 'Content-Type': 'application/json' }, + headers: { 'Content-Type': 'plain/text; charset=utf-8' }, body: JSON.stringify({ title, content }) }) if (i === files.length - 1) await mutateNotes(notes) diff --git a/apps/Notes/styles/_export.scss b/apps/Notes/styles/_export.scss index d5951f3..40aae89 100644 --- a/apps/Notes/styles/_export.scss +++ b/apps/Notes/styles/_export.scss @@ -6,6 +6,20 @@ padding-bottom: 1em; } + label { + padding-top: .125em; + display: flex; + line-height: 1.25; + + span { + flex-shrink: 0; + display: inline-block; + width: 1.5em; + margin-right: .5em; + text-align: center; + } + } + &__select { display: inline-block; border-bottom: 1px dashed var(--color-decor); diff --git a/apps/Notes/styles/_import.scss b/apps/Notes/styles/_import.scss index 5d167a8..efdd047 100644 --- a/apps/Notes/styles/_import.scss +++ b/apps/Notes/styles/_import.scss @@ -4,7 +4,6 @@ to {opacity: 1;} } - padding: 1rem; position: absolute; top: 0; right: 0; diff --git a/apps/Notes/styles/_noteView.scss b/apps/Notes/styles/_noteView.scss index 63e3fa3..51e7edd 100644 --- a/apps/Notes/styles/_noteView.scss +++ b/apps/Notes/styles/_noteView.scss @@ -12,13 +12,14 @@ animation: fade-in .3s; h2 { + padding: .75em; font-size: 1.25em; font-weight: 600; user-select: text; } p { - padding-top: 1em; + padding: .75em; line-height: 1.33; white-space: pre-line; user-select: text; diff --git a/apps/Notes/styles/_notesList.scss b/apps/Notes/styles/_notesList.scss index 4580d62..57c606a 100644 --- a/apps/Notes/styles/_notesList.scss +++ b/apps/Notes/styles/_notesList.scss @@ -5,13 +5,11 @@ } display: block; - overflow: auto; width: 100%; table-layout: fixed; word-wrap: break-word; height: 100%; - margin-top: -1em; - padding-top: 1em; + padding: .5em; & > tbody, & > thead { diff --git a/apps/Youtube/styles/_results.scss b/apps/Youtube/styles/_results.scss index 854d1e5..b7d8e9e 100644 --- a/apps/Youtube/styles/_results.scss +++ b/apps/Youtube/styles/_results.scss @@ -19,6 +19,7 @@ border: 1px dashed var(--color-window-buttons); flex-shrink: 1; flex-grow: 1; + width: 1em; &:placeholder { font: inherit; diff --git a/components/Header.js b/components/Header.js index 5e4ff12..2db8178 100644 --- a/components/Header.js +++ b/components/Header.js @@ -3,11 +3,11 @@ import React, { useState } from 'react' import { useRouter } from 'next/router' import Link from 'next/link' import useUser from 'hooks/useUser' -import fetchJson from 'helpers/fetchJson' import { focus, toggleMin, open, close } from 'helpers/windowActions' import appList from 'configs/appList' import useSettings from 'hooks/useSettings' import useApps from 'hooks/useApps' +import handleLogout from 'helpers/logout' import { faArrowUp, faTimes } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' @@ -19,15 +19,6 @@ const Header = () => { const { t } = useSettings() const router = useRouter() - const handleLogout = async (e) => { - e.preventDefault() - mutateUser( - await fetchJson('/api/logout', { method: 'POST' }), - false - ) - router.push('/login') - } - const handleClick = (app, setApps) => { if (app.min) { toggleMin(app.name, apps, setApps) @@ -118,7 +109,7 @@ const Header = () => { )}
  • - + handleLogout(e, router, mutateUser)}> {t('logout')}
    • diff --git a/components/Layout.js b/components/Layout.js index 7caa5a5..8c48dd5 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -1,4 +1,5 @@ import styles from 'styles/Main.module.scss' +import Head from 'next/head' import React from 'react' import { Header, Popup } from 'components' import useSettings from 'hooks/useSettings' @@ -12,13 +13,24 @@ const Layout = ({ if (!settings || !settings.theme || !settings.language) return null return ( -
    -
    -
    {children}
    -
    -
    - -
    + <> + + + + + + + + + +
    +
    +
    {children}
    +
    +
    + +
    + ) } diff --git a/helpers/logout.js b/helpers/logout.js new file mode 100644 index 0000000..f530e8c --- /dev/null +++ b/helpers/logout.js @@ -0,0 +1,12 @@ +import fetchJson from 'helpers/fetchJson' + +const handleLogout = async (e, router, mutateUser) => { + e.preventDefault() + mutateUser( + await fetchJson('/api/logout', { method: 'POST' }), + false + ) + router.push('/login') +} + +export default handleLogout diff --git a/next.config.js b/next.config.js index c7bf3a8..4bee3af 100644 --- a/next.config.js +++ b/next.config.js @@ -1,5 +1,5 @@ module.exports = { eslint: { - dirs: ['apps', 'components', 'pages', 'configs', 'helpers', 'hocs', 'hooks'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build) - }, + dirs: ['apps', 'components', 'pages', 'configs', 'helpers', 'hocs', 'hooks'] + } } diff --git a/pages/Notes.js b/pages/Notes.js new file mode 100644 index 0000000..5ed91cf --- /dev/null +++ b/pages/Notes.js @@ -0,0 +1,60 @@ +import styles from 'styles/Main.module.scss' +import React, { useMemo, Suspense, useEffect } from 'react' +import Head from 'next/head' +import useApps from 'hooks/useApps' +import useSettings from 'hooks/useSettings' +import useUser from 'hooks/useUser' +import { Splash, Popup } from 'components' + +const NotesApp = () => { + const { user } = useUser({ + redirectToLogin: true, + redirectToVerify: true + }) + const app = { name: 'Notes', min: false, max: true, height: '48em', width: '64em', pos: [], buttons: [], props: {} } + const { apps, setApps } = useApps([app]) + const { settings } = useSettings() + + useEffect(() => setApps([app]), []) + + if (!user || !apps || apps.length < 1 || !settings || !settings.theme || !settings.language) return null + + return ( + <> + + My Notes + + + + + + + + + + +
    +
    + +
    + +
    + + ) +} + +const NotesContainer = () => { + const Notes = React.lazy(() => import('apps/Notes')) + + const Component = useMemo(() => ( + }> + + + ), []) + + return Notes + ? Component + : null +} + +export default NotesApp diff --git a/pages/api/notes/index.js b/pages/api/notes/index.js index 2c53909..8530c53 100644 --- a/pages/api/notes/index.js +++ b/pages/api/notes/index.js @@ -40,6 +40,7 @@ export default withSession(async (req, res) => { res.status(200).json(notes) }) } catch (error) { + console.log(error) res.status(400).json([]) } break diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..ddd0620 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..8278472 Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..bfccc03 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml new file mode 100644 index 0000000..b3930d0 --- /dev/null +++ b/public/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #da532c + + + diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..fc497b6 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..6b79276 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..4bee8dd Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/mstile-144x144.png b/public/mstile-144x144.png new file mode 100644 index 0000000..530f936 Binary files /dev/null and b/public/mstile-144x144.png differ diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png new file mode 100644 index 0000000..6a13717 Binary files /dev/null and b/public/mstile-150x150.png differ diff --git a/public/mstile-310x150.png b/public/mstile-310x150.png new file mode 100644 index 0000000..c21dbe2 Binary files /dev/null and b/public/mstile-310x150.png differ diff --git a/public/mstile-310x310.png b/public/mstile-310x310.png new file mode 100644 index 0000000..b762537 Binary files /dev/null and b/public/mstile-310x310.png differ diff --git a/public/mstile-70x70.png b/public/mstile-70x70.png new file mode 100644 index 0000000..d82a35c Binary files /dev/null and b/public/mstile-70x70.png differ diff --git a/public/notes/android-chrome-192x192.png b/public/notes/android-chrome-192x192.png new file mode 100644 index 0000000..e685cdb Binary files /dev/null and b/public/notes/android-chrome-192x192.png differ diff --git a/public/notes/android-chrome-512x512.png b/public/notes/android-chrome-512x512.png new file mode 100644 index 0000000..8e926a6 Binary files /dev/null and b/public/notes/android-chrome-512x512.png differ diff --git a/public/notes/apple-touch-icon.png b/public/notes/apple-touch-icon.png new file mode 100644 index 0000000..8665828 Binary files /dev/null and b/public/notes/apple-touch-icon.png differ diff --git a/public/notes/browserconfig.xml b/public/notes/browserconfig.xml new file mode 100644 index 0000000..17e4e5a --- /dev/null +++ b/public/notes/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #ffc40d + + + diff --git a/public/notes/favicon-16x16.png b/public/notes/favicon-16x16.png new file mode 100644 index 0000000..1114f0f Binary files /dev/null and b/public/notes/favicon-16x16.png differ diff --git a/public/notes/favicon-32x32.png b/public/notes/favicon-32x32.png new file mode 100644 index 0000000..3ca0128 Binary files /dev/null and b/public/notes/favicon-32x32.png differ diff --git a/public/notes/favicon.ico b/public/notes/favicon.ico new file mode 100644 index 0000000..7623944 Binary files /dev/null and b/public/notes/favicon.ico differ diff --git a/public/notes/mstile-144x144.png b/public/notes/mstile-144x144.png new file mode 100644 index 0000000..e5f480d Binary files /dev/null and b/public/notes/mstile-144x144.png differ diff --git a/public/notes/mstile-150x150.png b/public/notes/mstile-150x150.png new file mode 100644 index 0000000..7b1ce37 Binary files /dev/null and b/public/notes/mstile-150x150.png differ diff --git a/public/notes/mstile-310x150.png b/public/notes/mstile-310x150.png new file mode 100644 index 0000000..07fe91a Binary files /dev/null and b/public/notes/mstile-310x150.png differ diff --git a/public/notes/mstile-310x310.png b/public/notes/mstile-310x310.png new file mode 100644 index 0000000..6574d40 Binary files /dev/null and b/public/notes/mstile-310x310.png differ diff --git a/public/notes/mstile-70x70.png b/public/notes/mstile-70x70.png new file mode 100644 index 0000000..2de179c Binary files /dev/null and b/public/notes/mstile-70x70.png differ diff --git a/public/notes/safari-pinned-tab.svg b/public/notes/safari-pinned-tab.svg new file mode 100644 index 0000000..8bd8c5e --- /dev/null +++ b/public/notes/safari-pinned-tab.svg @@ -0,0 +1,19 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + diff --git a/public/notes/site.webmanifest b/public/notes/site.webmanifest new file mode 100644 index 0000000..4b8f6fb --- /dev/null +++ b/public/notes/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "Notes", + "short_name": "Notes", + "icons": [ + { + "src": "/notes/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/notes/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg new file mode 100644 index 0000000..7b1112e --- /dev/null +++ b/public/safari-pinned-tab.svg @@ -0,0 +1,452 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..febbf4e --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "My Apps", + "short_name": "My Apps", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/styles/global.scss b/styles/global.scss index ad4a51a..7fcdb41 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -8,12 +8,24 @@ main { left: 0; bottom: 0; right: 0; + + &.noHeader { + top: 0; + } +} + +html { + position: fixed; + height: 100vh; + width: 100vw; } body { - margin: 0; + position: fixed; height: 100vh; + width: 100vw; overflow: hidden; + margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji', @@ -28,8 +40,8 @@ textarea, input { .container { margin: 1.5rem auto; - padding-left: 2rem; - padding-right: 2rem; + padding-left: 1rem; + padding-right: 1rem; } .fixed { @@ -40,6 +52,10 @@ textarea, input { left: 0; } +.hidden { + display: none; +} + .mobile-only { display: none!important; diff --git a/styles/global/_window.scss b/styles/global/_window.scss index 9f224a9..7b1c07b 100644 --- a/styles/global/_window.scss +++ b/styles/global/_window.scss @@ -90,6 +90,9 @@ right: 0; bottom: 0; left: 0; + } + + &.window__content { border-bottom-left-radius: .5em; border-bottom-right-radius: .5em; } @@ -100,7 +103,7 @@ } } - .window__submenu { + &__submenu { display: block; height: 2em; width: 100%; @@ -152,9 +155,8 @@ } &__scroll { - height: 100%; + height: calc(100% - 2em); overflow: auto; - padding: 1em; } &__buttons--popup { diff --git a/styles/main/_icon.scss b/styles/main/_icon.scss index efa2ee0..9f9eae6 100644 --- a/styles/main/_icon.scss +++ b/styles/main/_icon.scss @@ -1,17 +1,19 @@ .icon { text-decoration: none; display: inline-block; - padding: 1em; text-align: center; outline: none; + width: 6em; + height: 7em; img { width: 3em; + margin: .5em; } p { margin-top: .25em; - padding: .25em; + padding: .25em 0; transition: .2s background; border-radius: .5em; } diff --git a/styles/main/_layout.scss b/styles/main/_layout.scss index 48374a5..abdd845 100644 --- a/styles/main/_layout.scss +++ b/styles/main/_layout.scss @@ -3,5 +3,10 @@ height: 100vh; background: var(--color-bg); background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%); - position: relative; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; } -- cgit v1.2.3