aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-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
-rw-r--r--components/App.js81
-rw-r--r--components/Header.js62
-rw-r--r--configs/translations.js14
-rw-r--r--helpers/windowActions.js10
-rw-r--r--pages/index.js8
-rw-r--r--styles/global.scss13
-rw-r--r--styles/global/_themes.scss4
-rw-r--r--styles/global/_window.scss64
-rw-r--r--styles/main/_header.scss74
16 files changed, 378 insertions, 157 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;
+ }
+ }
+ }
}
diff --git a/components/App.js b/components/App.js
index b24aead..c539e72 100644
--- a/components/App.js
+++ b/components/App.js
@@ -1,7 +1,7 @@
import React, {useEffect, useRef} from 'react'
import useSettings from 'hooks/useSettings'
import useMediaQuery from 'hooks/useMediaQuery'
-import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
+import {close, toggleMin, toggleMax, move, focus} from 'helpers/windowActions'
import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
@@ -11,50 +11,49 @@ const App = ({children, app, setApps}) => {
const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`);
useEffect(() => {
- move(app.name, winRef, setApps)
+ move(app, winRef, setApps)
}, [])
return (
- <>
- <div
- ref={winRef}
- className={
- 'window'
- + (app.min ? ' hidden' : '')
- + (app.max || forceMax ? ' maximized' : '')
- }
- style={{
- height: app.height,
- width: app.width,
- ...app.pos.length
- ? {top: app.pos[1], left: app.pos[0]}
- : {
- top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
- left: `calc(( 100vw - ${app.width} ) / 2)`,
- }
- }}
- >
- <h2 className='window__title'>{t(app.name)}</h2>
- <div className='window__content'>{children}</div>
- <div className='window__title-buttons'>
- { app.buttons.includes('min') && (
- <span onClick={() => toggleMin(app.name, setApps)}>
- <FontAwesomeIcon icon={faArrowUp} />
- </span>
- )}
- { app.buttons.includes('max') && !forceMax && (
- <span onClick={() => toggleMax(app.name, setApps)}>
- <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
- </span>
- )}
- { app.buttons.includes('close') && (
- <span onClick={() => close(app.name, setApps)}>
- <FontAwesomeIcon icon={faTimes} />
- </span>
- )}
- </div>
+ <div
+ ref={winRef}
+ onClick={() => {focus(app.name, setApps)}}
+ className={
+ 'window'
+ + (app.min ? ' hidden' : '')
+ + (app.max || forceMax ? ' maximized' : '')
+ }
+ style={{
+ height: app.height,
+ width: app.width,
+ ...app.pos.length
+ ? {top: app.pos[1], left: app.pos[0]}
+ : {
+ top: `calc((( 100vh - ${app.height} ) / 2) + 2em)`,
+ left: `calc(( 100vw - ${app.width} ) / 2)`,
+ }
+ }}
+ >
+ <h2 className='window__title'>{t(app.name)}</h2>
+ <div className='window__content'>{children}</div>
+ <div className='window__title-buttons'>
+ { app.buttons.includes('min') && (
+ <span onClick={() => toggleMin(app.name, setApps)}>
+ <FontAwesomeIcon icon={faArrowUp} />
+ </span>
+ )}
+ { app.buttons.includes('max') && !forceMax && (
+ <span onClick={() => toggleMax(app.name, setApps)}>
+ <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
+ </span>
+ )}
+ { app.buttons.includes('close') && (
+ <span onClick={() => close(app.name, setApps)}>
+ <FontAwesomeIcon icon={faTimes} />
+ </span>
+ )}
</div>
- </>
+ </div>
)
}
diff --git a/components/Header.js b/components/Header.js
index 9ff3d75..83f0ff9 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -5,12 +5,15 @@ import Link from 'next/link'
import useUser from 'hooks/useUser'
import fetchJson from 'helpers/fetchJson'
import {focus, toggleMin} from 'helpers/windowActions'
-import {open} from 'helpers/windowActions'
+import {open, close} from 'helpers/windowActions'
import appList from 'configs/appList'
import useSettings from 'hooks/useSettings'
+import {faTimes} from '@fortawesome/free-solid-svg-icons'
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
const Header = ({apps, setApps}) => {
- const [userMenu, setUserMenu] = useState(false);
+ const [userMenu, setUserMenu] = useState(false)
+ const [showApps, setShowApps] = useState(false)
const {user, mutateUser} = useUser()
const {t} = useSettings()
const router = useRouter()
@@ -24,7 +27,6 @@ const Header = ({apps, setApps}) => {
router.push('/login')
}
-
const handleClick = (app, setApps) => {
if (app.min) {
toggleMin(app.name, setApps)
@@ -35,25 +37,41 @@ const Header = ({apps, setApps}) => {
return (
<header className={styles.header}>
<nav>
- <ul>
- {
- apps && [...apps].sort((a,b) => a.name > b.name).map(app => (
- <li
- key={app.name}
- onClick={() => handleClick(app, setApps)}
- >
- <span
- style={{
- ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {},
- ...app.min ? {color: '#888'} : {}
- }}
- >
- {t(app.name)}
- </span>
- </li>
- ))
- }
- </ul>
+ <div>
+ <span onClick={() => setShowApps(s => !s)} className='mobile-only'>
+ {apps && apps.length > 0 && apps[apps.length-1]?.name}
+ {apps && apps.length > 1 ? (' (' + (apps.length) + ')') : ''}
+ </span>
+ <ul className={showApps ? styles.showMobileAppList : 'desktop-only'}>
+ <li className="mobile-only">{t('open_apps')}</li>
+ {
+ apps && [...apps].sort((a,b) => a.name > b.name ? 1 : -1).map(app => {
+ if (!app) return null
+ return (
+ <li
+ key={app.name}
+ onClick={() => handleClick(app, setApps)}
+ >
+ <span
+ style={{
+ ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? {fontWeight: 600} : {},
+ ...app.min ? {color: '#888'} : {}
+ }}
+ >
+ {t(app.name)}
+ <span className='mobile-only' onClick={() => close(app.name, setApps)}>
+ <FontAwesomeIcon icon={faTimes} />
+ </span>
+ </span>
+ </li>
+ )
+ })
+ }
+ <li className="mobile-only">
+ <span onClick={() => setShowApps(false)} className='window__button'>{t('close')}</span>
+ </li>
+ </ul>
+ </div>
<ul>
{!user?.isLoggedIn && (
<li>
diff --git a/configs/translations.js b/configs/translations.js
index 4d204ea..a11c291 100644
--- a/configs/translations.js
+++ b/configs/translations.js
@@ -17,9 +17,12 @@ const translations = {
save: 'Save',
back: 'Back',
cancel: 'Cancel',
+ close: 'Close',
select_all: 'Select all',
import: 'Import',
export: 'Export',
+ sort: 'Sort',
+ sort_by: 'Sort by:',
choose_files: 'Choose files',
import_finished: 'Import finished.',
no_connection: 'No connection',
@@ -28,6 +31,7 @@ const translations = {
title: 'Title',
created: 'Created',
modified: 'Modified',
+ open_apps: 'Open apps:',
Notes: 'Notes',
Settings: 'Settings',
mail_ver_subject: 'Verification of your new My Apps account',
@@ -86,9 +90,12 @@ const translations = {
save: 'Zapisz',
back: 'Powrót',
cancel: 'Anuluj',
+ close: 'Zamknij',
select_all: 'Wybierz wszystkie',
import: 'Wyślij',
export: 'Pobierz',
+ sort: 'Sortuj',
+ sort_by: 'Sortuj wg:',
choose_files: 'Wybierz pliki',
import_finished: 'Wysyłanie zakończone.',
no_connection: 'Brak połączenia',
@@ -97,6 +104,7 @@ const translations = {
title: 'Tytuł',
created: 'Utworzono',
modified: 'Zmodyfikowano',
+ open_apps: 'Otwarte aplikacje:',
Notes: 'Notatki',
Settings: 'Ustawienia',
mail_ver_subject: 'Weryfikacja Twojego nowego konta w aplikacji My Apps.',
@@ -155,9 +163,12 @@ const translations = {
save: 'Ahorrar',
back: 'Regreso',
cancel: 'Cancelar',
+ close: 'Cerrar',
select_all: 'Elegir todos',
import: 'Enviar',
export: 'Descargar',
+ sort: 'Ordenar',
+ sort_by: 'Ordenar por:',
choose_files: 'Seleccione archivos',
import_finished: 'Envío completo.',
no_connection: 'Sin conexión',
@@ -224,9 +235,12 @@ const translations = {
save: 'Speichern',
back: 'Zurückkehren',
cancel: 'Abbrechen',
+ close: 'Schließen',
select_all: 'Alles auswählen',
import: 'Senden',
export: 'Herunterladen',
+ sort: 'Sortieren',
+ sort_by: 'Sortieren nach:',
choose_files: 'Dateien auswählen',
import_finished: 'Senden abgeschlossen.',
no_connection: 'Keine Verbindung',
diff --git a/helpers/windowActions.js b/helpers/windowActions.js
index 8ff361b..b6d86b6 100644
--- a/helpers/windowActions.js
+++ b/helpers/windowActions.js
@@ -1,4 +1,4 @@
-export const close = (appName, setApps) => {setApps(apps => apps.filter(a => a.name !== appName))}
+export const close = (appName, setApps) => {setApps(apps => apps.filter(a => a && a.name !== appName))}
export const open = ({appName, buttons, height, width}, setApps) => {
setApps(apps => (
@@ -38,19 +38,19 @@ export const toggleMax = (appName, setApps) => setApps(apps => ([
]))
-export const move = (appName, winRef, setApps) => {
+export const move = (app, winRef, setApps) => {
winRef.current.onmousedown = (event) => {
- if (event.target.classList && event.target.classList.contains('window__title')) {
+ if (!app.max && event.target.classList && event.target.classList.contains('window__title')) {
const shiftX = event.clientX - winRef.current.getBoundingClientRect().left
const shiftY = event.clientY - winRef.current.getBoundingClientRect().top
winRef.current.classList.add('moving')
- focus(appName, setApps)
+ focus(app.name, setApps)
function moveAt(pageX, pageY) {
const x = pageX - shiftX
const y = pageY - shiftY - 32
- setApps(apps => ([...apps.map(a => a.name === appName
+ setApps(apps => ([...apps.map(a => a.name === app.name
? {...a, pos: [x + 'px', y < 0 ? 0 : y + 'px']}
: a
)]))
diff --git a/pages/index.js b/pages/index.js
index b441362..72f99f4 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,6 +3,7 @@ import React from 'react'
import useUser from 'hooks/useUser'
import useSettings from 'hooks/useSettings'
import useApps from 'hooks/useApps'
+import useMediaQuery from 'hooks/useMediaQuery'
import {Layout, App, Splash} from 'components'
import {open} from 'helpers/windowActions'
import appList from 'configs/appList'
@@ -10,6 +11,7 @@ import appList from 'configs/appList'
const Home = () => {
const {t} = useSettings()
const {apps, setApps} = useApps()
+ const touchDevice = useMediaQuery('(pointer: coarse)');
const {user} = useUser({
redirectToLogin: true,
redirectToVerify: true,
@@ -23,7 +25,7 @@ const Home = () => {
const handleClick = (e, appProps) => {
switch (e.detail) {
case 1:
- e.currentTarget.focus()
+ touchDevice ? open(appProps, setApps) : e.currentTarget.focus()
break;
case 2:
open(appProps, setApps)
@@ -55,7 +57,9 @@ const Home = () => {
</div>
))
}
- {apps && apps.map(app => {
+ {apps && apps.length > 0 && apps.map(app => {
+ if (!app) return null
+
const AppComponent = appList[app.name].component
return (
diff --git a/styles/global.scss b/styles/global.scss
index 0a542a9..04473b8 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -32,3 +32,16 @@ textarea, input {
padding-right: 2rem;
}
+.mobile-only {
+ display: none!important;
+
+ @media(max-width: 40em) {
+ display: inline-block!important;
+ }
+}
+
+.desktop-only {
+ @media(max-width: 40em) {
+ display: none!important;
+ }
+}
diff --git a/styles/global/_themes.scss b/styles/global/_themes.scss
index 9319fa5..e0b146f 100644
--- a/styles/global/_themes.scss
+++ b/styles/global/_themes.scss
@@ -13,7 +13,7 @@
--color-window-border-top: rgba(255,255,255,.7);
--color-window-border-bottom: #ccc;
--color-window-content: #fff;
- --color-window-popup: #fff;
+ --color-window-popup: #eee;
--color-window-buttons: #666;
--color-window-buttons-alt: #222;
--color-window-menu: #eee;
@@ -42,7 +42,7 @@
--color-window-border-top: rgba(255,255,255,.7);
--color-window-border-bottom: #ccc;
--color-window-content: #fff;
- --color-window-popup: #fff;
+ --color-window-popup: #eee;
--color-window-buttons: #666;
--color-window-buttons-alt: #222;
--color-window-menu: #eee;
diff --git a/styles/global/_window.scss b/styles/global/_window.scss
index 08ddfaf..c489796 100644
--- a/styles/global/_window.scss
+++ b/styles/global/_window.scss
@@ -1,11 +1,14 @@
.window {
position: absolute;
- transition-property: opacity, visibility, transform, width, height, top, left;
- transition-duration: .3s;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: .5em;
color: var(--color-text);
+ @media(min-width: 40em) {
+ transition-property: opacity, visibility, transform, width, height, top, left;
+ transition-duration: .3s;
+ }
+
&.moving {
transition: none
}
@@ -29,19 +32,6 @@
height: 100%;
width: 100%;
}
- // top: 50%;
- // left: 50%;
-
- // @media (min-width: 80em) {
- // width: 64em;
- // left: calc((100vw - 64em) / 2)
- // }
-
- // @media (min-height: 80em) {
- // width: 64em;
- // left: calc((100vh - 64em) / 2)
- // }
- // }
&__title {
position: absolute;
@@ -86,6 +76,10 @@
color: var(--color-window-buttons-alt);
}
}
+
+ @media(max-width: 40em) {
+ display: none;
+ }
}
&__content {
@@ -96,7 +90,6 @@
right: 0;
bottom: 0;
left: 0;
- padding: 1em;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
@@ -109,18 +102,35 @@
.window__submenu {
display: block;
- margin: -1em -1em 1em;
height: 2em;
+ width: 100%;
background: var(--color-window-menu);
- & > div {
+ & > div > div {
// cursor: pointer;
display: inline-block;
padding: .5em;
transition: .3s background;
+ white-space: nowrap;
- &:hover {
- background-color: var(--color-window-menu-alt);
+ @media(hover: hover) {
+ &:hover {
+ background-color: var(--color-window-menu-alt);
+ }
+ }
+ }
+
+
+ @media(max-width: 40em) {
+ height: 3em;
+ overflow: auto;
+
+ & > div {
+ display: flex;
+ }
+
+ & > div > div {
+ padding: 1em;
}
}
}
@@ -128,7 +138,7 @@
&__scroll {
height: 100%;
overflow: auto;
- margin: -1em -1em 0;
+ padding: 1em;
}
&__buttons--popup {
@@ -150,8 +160,10 @@
// cursor: pointer;
transition: .3s background-color;
- &:hover {
- background-color: var(--color-button-alt);
+ @media(hover: hover) {
+ &:hover {
+ background-color: var(--color-button-alt);
+ }
}
}
@@ -163,8 +175,10 @@
border-top: 1px solid var(--color-popup-error-border);
border-bottom: 1px solid var(--color-popup-error-border);
- &:hover {
- background-color: var(--color-popup-error-button-alt);
+ @media(hover: hover) {
+ &:hover {
+ background-color: var(--color-popup-error-button-alt);
+ }
}
}
}
diff --git a/styles/main/_header.scss b/styles/main/_header.scss
index 9fab16b..e6ac70f 100644
--- a/styles/main/_header.scss
+++ b/styles/main/_header.scss
@@ -6,34 +6,92 @@
nav {
display: flex;
- & > ul:first-of-type {
+ & > div {
flex-grow: 1;
- overflow: auto;
+ overflow-y: auto;
+
+ & > span {
+ padding-left: .5em;
+ line-height: 2em;
+ font-weight: 600;
+ }
+
+ & > ul {
+ display: flex;
+ }
}
- & > ul {
+ & > ul,
+ & > div > ul {
display: block;
& > li {
display: inline-block;
+ & > span > span {
+ padding: .75em;
+ display: inline-block;
+ margin-left: .5em;
+ color: var(--color-error);
+ }
+
& > span,
& > a {
display: inline-block;
color: var(--color-text);
text-decoration: none;
align-items: center;
- padding: .25em .5em;
- margin: .25em;
border-radius: .5em;
transition: .3s background, .3s color;
+ white-space: nowrap;
+ padding: .25em .5em;
+ margin: .25em;
- &:hover {
- background-color: var(--color-selected);
- color: var(--color-text-alt);
+ @media(hover: hover) {
+ &:hover {
+ background-color: var(--color-selected);
+ color: var(--color-text-alt);
+ }
}
}
}
}
}
}
+
+.showMobileAppList {
+ @media(max-width: 40em) {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: var(--color-window-popup);
+ border-bottom: 1px solid var(--color-window-border-bottom);
+ border-top: 1px solid var(--color-window-border-top);
+ border-radius: .5em;
+ padding: 1em;
+ min-width: 13em;
+
+ li {
+ width: 100%;
+ padding: 0;
+ margin: -.25em 0;
+ }
+
+ & > li:first-of-type {
+ padding: .5em .5em 1em;
+ white-space: nowrap;
+ }
+
+ & > li:last-of-type {
+ width: 100%;
+ padding-top: 1em;
+ text-align: center;
+
+ span {
+ height: 2.1em;
+ padding: .5em .75em;
+ }
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 17:56:03 +0000