From 3e6b377bb29c661b36329de5f18f69cb3ee6e01a Mon Sep 17 00:00:00 2001 From: piotrruss Date: Sat, 2 Oct 2021 21:27:08 +0200 Subject: styling refactor, player audio mode --- apps/Notes/components/Export.js | 4 ++-- apps/Notes/components/NoteView.js | 15 ++++++------ apps/Notes/styles/_import.scss | 5 ---- apps/Notes/styles/_noteEdit.scss | 7 ++---- apps/Notes/styles/_noteView.scss | 9 ++----- apps/Player/styles/_player.scss | 10 +++++--- apps/Youtube/styles/_results.scss | 23 +++++++++--------- components/Layout.js | 4 +--- helpers/windowActions.js | 4 ++-- styles/global.scss | 39 +++++++++++++----------------- styles/global/_window.scss | 50 +++++++++++++++++++-------------------- styles/main/_header.scss | 1 + styles/main/_layout.scss | 8 +++---- 13 files changed, 82 insertions(+), 97 deletions(-) diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js index 516c0ec..ccfb69a 100644 --- a/apps/Notes/components/Export.js +++ b/apps/Notes/components/Export.js @@ -37,7 +37,7 @@ const Export = ({ setAction }) => { name='selectAll' onChange={e => handleSelectAll(e, notes, setIds)} checked={notes.length === ids.length} - className='hidden' + className='hide' /> @@ -58,7 +58,7 @@ const Export = ({ setAction }) => { value={note.noteId} checked={ids.includes(note.noteId)} onChange={() => handleSelect(note.noteId, ids, setIds)} - className='hidden' + className='hide' /> diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js index c6afe1f..19352c3 100644 --- a/apps/Notes/components/NoteView.js +++ b/apps/Notes/components/NoteView.js @@ -21,7 +21,7 @@ const NoteView = ({ fetchedNote, setFetchedNote, setAction }) => { const { _id, content, title } = fetchedNote return ( -
+ <>
{ setFetchedNote(); setAction('') }}>{t('back')}
@@ -31,12 +31,13 @@ const NoteView = ({ fetchedNote, setFetchedNote, setAction }) => {
{ removeNote(e, _id, mutateNotes, t, setPopup, setAction) }}>{t('remove')}
- -
-

{title}

-

{content}

-
-
+
+
+

{title}

+

{content}

+
+
+ ) } diff --git a/apps/Notes/styles/_import.scss b/apps/Notes/styles/_import.scss index efdd047..bab0655 100644 --- a/apps/Notes/styles/_import.scss +++ b/apps/Notes/styles/_import.scss @@ -4,11 +4,6 @@ to {opacity: 1;} } - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; animation: fade-in .3s; form { diff --git a/apps/Notes/styles/_noteEdit.scss b/apps/Notes/styles/_noteEdit.scss index 43191fe..29facbd 100644 --- a/apps/Notes/styles/_noteEdit.scss +++ b/apps/Notes/styles/_noteEdit.scss @@ -1,4 +1,6 @@ .noteEdit { + height: 100%; + @keyframes fade-in { from {opacity: 0;} to {opacity: 1;} @@ -6,11 +8,6 @@ display: flex; flex-direction: column; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; padding: 1em 1em 2em; animation: fade-in .3s; diff --git a/apps/Notes/styles/_noteView.scss b/apps/Notes/styles/_noteView.scss index 51e7edd..37db6aa 100644 --- a/apps/Notes/styles/_noteView.scss +++ b/apps/Notes/styles/_noteView.scss @@ -4,22 +4,17 @@ to {opacity: 1;} } - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; animation: fade-in .3s; h2 { - padding: .75em; + padding: 1rem; font-size: 1.25em; font-weight: 600; user-select: text; } p { - padding: .75em; + padding: .5rem 1rem 1rem; line-height: 1.33; white-space: pre-line; user-select: text; diff --git a/apps/Player/styles/_player.scss b/apps/Player/styles/_player.scss index abc6582..7c74775 100644 --- a/apps/Player/styles/_player.scss +++ b/apps/Player/styles/_player.scss @@ -17,9 +17,13 @@ & > div:nth-of-type(2) { - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; - -webkit-overflow-scrolling: touch; + + @media (pointer: coarse) { + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + } } & > div:nth-of-type(2), @@ -27,7 +31,7 @@ width: 48%; position: absolute; top: 0; - bottom: 2em; + bottom: 0; background-color: var(--color-glass); transition: .3s transform; diff --git a/apps/Youtube/styles/_results.scss b/apps/Youtube/styles/_results.scss index 9aba047..48437a2 100644 --- a/apps/Youtube/styles/_results.scss +++ b/apps/Youtube/styles/_results.scss @@ -1,15 +1,22 @@ .results { + display: flex; + flex-direction: column; + + & > div { + flex-grow: 1; + } + form { padding: .5em; justify-content: center; align-items: center; display: flex; - height: 4.5em; + height: 4em; input[type=text] { background-color: var(--color-window-content); color: var(--color-text-alt); - margin: 1em .5em 0; + margin: .5em .5em 0; height: 2.5rem; border: none; border-radius: .5em; @@ -24,15 +31,10 @@ font: inherit; } } - } - & > div { - position: fixed; - top: 9.5em; - left: 0; - right: 0; - bottom: 0; - height: auto; + & > input { + margin-top: .5em; + } } ul { @@ -64,7 +66,6 @@ margin-left: 1em; display: flex; flex-direction: column; - // justify-content: space-between; & > p:nth-of-type(2) { margin: .25em 0 .5em; diff --git a/components/Layout.js b/components/Layout.js index 8c48dd5..e9393a1 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -24,10 +24,8 @@ const Layout = ({
-
-
{children}
-
+
{children}
diff --git a/helpers/windowActions.js b/helpers/windowActions.js index 7cc09be..be60986 100644 --- a/helpers/windowActions.js +++ b/helpers/windowActions.js @@ -53,10 +53,10 @@ export const move = (app, winRef, setApps) => { function moveAt (pageX, pageY) { const x = pageX - shiftX - const y = pageY - shiftY - 32 + const y = pageY - shiftY setApps(apps => ([...apps.map(a => a && a.name === app.name - ? { ...a, pos: [x + 'px', y < 0 ? 0 : y + 'px'] } + ? { ...a, pos: [x + 'px', y < '32' ? '32px' : y + 'px'] } : a )])) } diff --git a/styles/global.scss b/styles/global.scss index 7fcdb41..0b63e98 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -2,31 +2,18 @@ @import "global/themes"; @import "global/window"; -main { +html, +body { position: fixed; - top: 2em; - left: 0; - bottom: 0; + top: 0; right: 0; - - &.noHeader { - top: 0; - } -} - -html { - position: fixed; - height: 100vh; - width: 100vw; + bottom: 0; + left: 0; + overflow: hidden; + overscroll-behavior-y: none; } body { - 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', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -39,23 +26,31 @@ textarea, input { } .container { + height: 100%; + width: 100%; + flex-grow: 1; margin: 1.5rem auto; padding-left: 1rem; padding-right: 1rem; + overflow: hidden; } .fixed { - position: fixed; + position: absolute; top: 0; right: 0; bottom: 0; left: 0; } -.hidden { +.hide { display: none; } +.noHeader { + height: 100%; +} + .mobile-only { display: none!important; diff --git a/styles/global/_window.scss b/styles/global/_window.scss index d05ff7c..5594ba5 100644 --- a/styles/global/_window.scss +++ b/styles/global/_window.scss @@ -35,11 +35,7 @@ } &__title { - position: absolute; background-color: var(--color-glass); - top: 0; - left: 0; - right: 0; height: 2em; text-align: center; padding: .5em; @@ -65,6 +61,7 @@ &__title-buttons { position: absolute; + transition: .3s top; top: .5em; right: .5em; // cursor: pointer; @@ -88,20 +85,15 @@ } &__content { - position: absolute; + display: flex; + flex-direction: column; overflow: hidden; background-color: var(--color-window-content); - top: 2em; - right: 0; - bottom: 0; - left: 0; + height: calc(100% - 2em); - & > div:nth-of-type(2) { - top: 5em; - left: 0; - bottom: 0; - right: 0; - position: fixed; + & > *:nth-child(2) { + flex-grow: 1; + height: calc(100% - 2em); } } @@ -154,24 +146,27 @@ } @media(max-width: 40em) { - height: 3em; - overflow-x: scroll; + height: 2.5em; + overflow-x: auto; & > div { display: flex; } & > div > div { - padding: 1em; + padding: .75em 1em; } } } &__scroll { - height: 100%; - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; - -webkit-overflow-scrolling: touch; + + @media (pointer: coarse) { + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + } } &__buttons--popup { @@ -220,23 +215,28 @@ opacity: 0; visibility: hidden; transform: translateY(-100vh); - z-index: -1; } &.maximized { - top:0!important; + top:2em!important; right: 0!important; bottom: 0!important; left: 0!important; width: 100%!important; height: 100%!important; + .window__title-buttons { + top: 2.5em; + } + & > .window__content { top: 0; } - .window__submenu > div { - @media(min-width: 40em) { + @media(min-width: 40em) { + top:0!important; + + .window__submenu > div { &:last-of-type { margin-right: 5.5em; } diff --git a/styles/main/_header.scss b/styles/main/_header.scss index ea75f5e..903b0cc 100644 --- a/styles/main/_header.scss +++ b/styles/main/_header.scss @@ -2,6 +2,7 @@ height: 2em; background-color: var(--color-glass); border-bottom: 1px solid var(--color-window-border-bottom); + z-index: 2; nav { display: flex; diff --git a/styles/main/_layout.scss b/styles/main/_layout.scss index abdd845..6bde0f1 100644 --- a/styles/main/_layout.scss +++ b/styles/main/_layout.scss @@ -1,12 +1,10 @@ .layout { + display: flex; + flex-direction: column; color: var(--color-text); height: 100vh; + width: 100%; background: var(--color-bg); background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%); - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; overflow: hidden; } -- cgit v1.2.3