styling refactor, player audio mode

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'
             />
             <span style={{ color: notes.length === ids.length ? 'green' : 'brown' }}>
               <FontAwesomeIcon icon={notes.length === ids.length ? faCheck : faTimes} />
@@ -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'
                   />
                   <span style={{ color: checked ? 'green' : 'brown' }}>
                     <FontAwesomeIcon icon={checked ? faCheck : faTimes} />
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 (
-    <section className={styles.noteView}>
+    <>
       <div className='window__submenu'>
         <div>
           <div onClick={() => { setFetchedNote(); setAction('') }}>{t('back')}</div>
@@ -31,12 +31,13 @@ const NoteView = ({ fetchedNote, setFetchedNote, setAction }) => {
           <div onClick={e => { removeNote(e, _id, mutateNotes, t, setPopup, setAction) }}>{t('remove')}</div>
         </div>
       </div>
-
-      <div className='window__scroll'>
-        <h2>{title}</h2>
-        <p>{content}</p>
-      </div>
-    </section>
+      <section className={`${styles.noteView} window__scroll`}>
+        <div>
+          <h2>{title}</h2>
+          <p>{content}</p>
+        </div>
+      </section>
+    </>
   )
 }
 
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 = ({
         <meta name='theme-color' content='#ffffff' />
       </Head>
       <section className={styles.layout + ' ' + settings.theme}>
-        <main>
-          <div className='container'>{children}</div>
-        </main>
         <Header />
+        <div className='container'>{children}</div>
         <Popup />
       </section>
     </>
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;
 }