aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--apps/Notes/components/Export.js4
-rw-r--r--apps/Notes/components/NoteView.js15
-rw-r--r--apps/Notes/styles/_import.scss5
-rw-r--r--apps/Notes/styles/_noteEdit.scss7
-rw-r--r--apps/Notes/styles/_noteView.scss9
-rw-r--r--apps/Player/styles/_player.scss10
-rw-r--r--apps/Youtube/styles/_results.scss23
-rw-r--r--components/Layout.js4
-rw-r--r--helpers/windowActions.js4
-rw-r--r--styles/global.scss39
-rw-r--r--styles/global/_window.scss50
-rw-r--r--styles/main/_header.scss1
-rw-r--r--styles/main/_layout.scss8
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;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 17:55:26 +0000