commit
482a64cfac
|
@ -39,7 +39,7 @@
|
|||
property="og:description"
|
||||
content="Minimalistic opinionated Mastodon web client"
|
||||
/>
|
||||
<meta property="og:image" content="%VITE_WEBSITE%/og-image-2.png" />
|
||||
<meta property="og:image" content="%VITE_WEBSITE%/og-image-2.jpg" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
74
package-lock.json
generated
74
package-lock.json
generated
|
@ -9,7 +9,7 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@formatjs/intl-localematcher": "~0.4.0",
|
||||
"@github/text-expander-element": "~2.3.0",
|
||||
"@github/text-expander-element": "~2.5.0",
|
||||
"@iconify-icons/mingcute": "~1.2.5",
|
||||
"@justinribeiro/lite-youtube": "~1.5.0",
|
||||
"@szhsin/react-menu": "~4.0.0",
|
||||
|
@ -43,7 +43,7 @@
|
|||
"@trivago/prettier-plugin-sort-imports": "~4.1.1",
|
||||
"postcss": "~8.4.24",
|
||||
"postcss-dark-theme-class": "~0.7.3",
|
||||
"postcss-preset-env": "~8.4.2",
|
||||
"postcss-preset-env": "~8.5.0",
|
||||
"twitter-text": "~3.1.0",
|
||||
"vite": "~4.3.9",
|
||||
"vite-plugin-generate-file": "~0.0.4",
|
||||
|
@ -2366,9 +2366,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@csstools/postcss-relative-color-syntax": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.1.tgz",
|
||||
"integrity": "sha512-IskxdQqAkx/pyyOEW3Lhn3nvOu5zlaZ8wQljFl5zc3ABl+gEFf2G42yWK3+wX+J0F4jm7OikOigXo9fAISFEmg==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz",
|
||||
"integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
@ -2879,9 +2879,9 @@
|
|||
"integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
|
||||
},
|
||||
"node_modules/@github/text-expander-element": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz",
|
||||
"integrity": "sha512-E1KCxTOA/7Y4dP5g7vXbfRDFU6/SjU0TuJxx6JMwvxzI/NlBrXyXsx/fjFskD2T/un6i6CNKnXu1ZwExDLjcqw==",
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.5.0.tgz",
|
||||
"integrity": "sha512-BjCxTshkUCgNXo/8iXUSK1sJ7kMJqhVsw6LAzIFtgaYrm4q2068WnPKjngfR+/QPhxN1nSvgd7CozblEIYjUZA==",
|
||||
"dependencies": {
|
||||
"@github/combobox-nav": "^2.0.2"
|
||||
}
|
||||
|
@ -5911,10 +5911,20 @@
|
|||
}
|
||||
},
|
||||
"node_modules/postcss-nesting": {
|
||||
"version": "11.2.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.2.2.tgz",
|
||||
"integrity": "sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==",
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz",
|
||||
"integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/csstools"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/csstools"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"@csstools/selector-specificity": "^2.0.0",
|
||||
"postcss-selector-parser": "^6.0.10"
|
||||
|
@ -5922,10 +5932,6 @@
|
|||
"engines": {
|
||||
"node": "^14 || ^16 || >=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/csstools"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.4"
|
||||
}
|
||||
|
@ -6000,9 +6006,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/postcss-preset-env": {
|
||||
"version": "8.4.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.4.2.tgz",
|
||||
"integrity": "sha512-Bihxo+FsyVNjsRADiYYnj9Ez0WBSWSSHAe8WvxoMlqrw8H8m6gK9E0MkDd7P6ForoikRIF3I8grGg/pFM6ECRQ==",
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.0.tgz",
|
||||
"integrity": "sha512-aqAbT5dXqYX5ZvicGKQpaW/eDEZFRfnhV6Hn1Jn2bCKEB9L2MgsTdnIsXsZyFUQflIV2wIs9HTEQgkH5duMCNg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
@ -6032,7 +6038,7 @@
|
|||
"@csstools/postcss-normalize-display-values": "^2.0.1",
|
||||
"@csstools/postcss-oklab-function": "^2.2.3",
|
||||
"@csstools/postcss-progressive-custom-properties": "^2.3.0",
|
||||
"@csstools/postcss-relative-color-syntax": "^1.0.1",
|
||||
"@csstools/postcss-relative-color-syntax": "^1.0.2",
|
||||
"@csstools/postcss-scope-pseudo-class": "^2.0.2",
|
||||
"@csstools/postcss-stepped-value-functions": "^2.1.1",
|
||||
"@csstools/postcss-text-decoration-shorthand": "^2.2.4",
|
||||
|
@ -6062,7 +6068,7 @@
|
|||
"postcss-initial": "^4.0.1",
|
||||
"postcss-lab-function": "^5.2.3",
|
||||
"postcss-logical": "^6.2.0",
|
||||
"postcss-nesting": "^11.2.1",
|
||||
"postcss-nesting": "^11.3.0",
|
||||
"postcss-opacity-percentage": "^2.0.0",
|
||||
"postcss-overflow-shorthand": "^4.0.1",
|
||||
"postcss-page-break": "^3.0.4",
|
||||
|
@ -9188,9 +9194,9 @@
|
|||
}
|
||||
},
|
||||
"@csstools/postcss-relative-color-syntax": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.1.tgz",
|
||||
"integrity": "sha512-IskxdQqAkx/pyyOEW3Lhn3nvOu5zlaZ8wQljFl5zc3ABl+gEFf2G42yWK3+wX+J0F4jm7OikOigXo9fAISFEmg==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz",
|
||||
"integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@csstools/css-color-parser": "^1.2.0",
|
||||
|
@ -9422,9 +9428,9 @@
|
|||
"integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
|
||||
},
|
||||
"@github/text-expander-element": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz",
|
||||
"integrity": "sha512-E1KCxTOA/7Y4dP5g7vXbfRDFU6/SjU0TuJxx6JMwvxzI/NlBrXyXsx/fjFskD2T/un6i6CNKnXu1ZwExDLjcqw==",
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.5.0.tgz",
|
||||
"integrity": "sha512-BjCxTshkUCgNXo/8iXUSK1sJ7kMJqhVsw6LAzIFtgaYrm4q2068WnPKjngfR+/QPhxN1nSvgd7CozblEIYjUZA==",
|
||||
"requires": {
|
||||
"@github/combobox-nav": "^2.0.2"
|
||||
}
|
||||
|
@ -11581,9 +11587,9 @@
|
|||
}
|
||||
},
|
||||
"postcss-nesting": {
|
||||
"version": "11.2.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.2.2.tgz",
|
||||
"integrity": "sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==",
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz",
|
||||
"integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@csstools/selector-specificity": "^2.0.0",
|
||||
|
@ -11623,9 +11629,9 @@
|
|||
}
|
||||
},
|
||||
"postcss-preset-env": {
|
||||
"version": "8.4.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.4.2.tgz",
|
||||
"integrity": "sha512-Bihxo+FsyVNjsRADiYYnj9Ez0WBSWSSHAe8WvxoMlqrw8H8m6gK9E0MkDd7P6ForoikRIF3I8grGg/pFM6ECRQ==",
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.0.tgz",
|
||||
"integrity": "sha512-aqAbT5dXqYX5ZvicGKQpaW/eDEZFRfnhV6Hn1Jn2bCKEB9L2MgsTdnIsXsZyFUQflIV2wIs9HTEQgkH5duMCNg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@csstools/postcss-cascade-layers": "^3.0.1",
|
||||
|
@ -11645,7 +11651,7 @@
|
|||
"@csstools/postcss-normalize-display-values": "^2.0.1",
|
||||
"@csstools/postcss-oklab-function": "^2.2.3",
|
||||
"@csstools/postcss-progressive-custom-properties": "^2.3.0",
|
||||
"@csstools/postcss-relative-color-syntax": "^1.0.1",
|
||||
"@csstools/postcss-relative-color-syntax": "^1.0.2",
|
||||
"@csstools/postcss-scope-pseudo-class": "^2.0.2",
|
||||
"@csstools/postcss-stepped-value-functions": "^2.1.1",
|
||||
"@csstools/postcss-text-decoration-shorthand": "^2.2.4",
|
||||
|
@ -11675,7 +11681,7 @@
|
|||
"postcss-initial": "^4.0.1",
|
||||
"postcss-lab-function": "^5.2.3",
|
||||
"postcss-logical": "^6.2.0",
|
||||
"postcss-nesting": "^11.2.1",
|
||||
"postcss-nesting": "^11.3.0",
|
||||
"postcss-opacity-percentage": "^2.0.0",
|
||||
"postcss-overflow-shorthand": "^4.0.1",
|
||||
"postcss-page-break": "^3.0.4",
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@formatjs/intl-localematcher": "~0.4.0",
|
||||
"@github/text-expander-element": "~2.3.0",
|
||||
"@github/text-expander-element": "~2.5.0",
|
||||
"@iconify-icons/mingcute": "~1.2.5",
|
||||
"@justinribeiro/lite-youtube": "~1.5.0",
|
||||
"@szhsin/react-menu": "~4.0.0",
|
||||
|
@ -45,7 +45,7 @@
|
|||
"@trivago/prettier-plugin-sort-imports": "~4.1.1",
|
||||
"postcss": "~8.4.24",
|
||||
"postcss-dark-theme-class": "~0.7.3",
|
||||
"postcss-preset-env": "~8.4.2",
|
||||
"postcss-preset-env": "~8.5.0",
|
||||
"twitter-text": "~3.1.0",
|
||||
"vite": "~4.3.9",
|
||||
"vite-plugin-generate-file": "~0.0.4",
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
@media (min-width: 23em) {
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
min-width: 22em;
|
||||
width: 22em;
|
||||
}
|
||||
.nav-menu section {
|
||||
padding: 8px 0;
|
||||
|
|
|
@ -6,6 +6,7 @@ import { useLongPress } from 'use-long-press';
|
|||
import { useSnapshot } from 'valtio';
|
||||
|
||||
import { api } from '../utils/api';
|
||||
import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
|
||||
import states from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
|
||||
|
@ -52,6 +53,13 @@ function NavMenu(props) {
|
|||
const buttonRef = useRef();
|
||||
const [menuState, setMenuState] = useState(undefined);
|
||||
|
||||
const boundingBoxPadding = safeBoundingBoxPadding([
|
||||
0,
|
||||
0,
|
||||
snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0,
|
||||
0,
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
|
@ -104,7 +112,7 @@ function NavMenu(props) {
|
|||
viewScroll="close"
|
||||
position="anchor"
|
||||
align="center"
|
||||
boundingBoxPadding="8 8 8 8"
|
||||
boundingBoxPadding={boundingBoxPadding}
|
||||
unmountOnClose
|
||||
>
|
||||
<section>
|
||||
|
|
|
@ -693,9 +693,13 @@ function Status({
|
|||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
const bindLongPress = useLongPress(
|
||||
const bindLongPressContext = useLongPress(
|
||||
(e) => {
|
||||
const { clientX, clientY } = e.touches?.[0] || e;
|
||||
// link detection copied from onContextMenu because here it works
|
||||
const link = e.target.closest('a');
|
||||
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
|
||||
e.preventDefault();
|
||||
setContextMenuAnchorPoint({
|
||||
x: clientX,
|
||||
y: clientY,
|
||||
|
@ -706,7 +710,7 @@ function Status({
|
|||
threshold: 600,
|
||||
captureEvent: true,
|
||||
detect: 'touch',
|
||||
cancelOnMovement: true,
|
||||
cancelOnMovement: 4, // true allows movement of up to 25 pixels
|
||||
},
|
||||
);
|
||||
|
||||
|
@ -727,6 +731,7 @@ function Status({
|
|||
} ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''}`}
|
||||
onMouseEnter={debugHover}
|
||||
onContextMenu={(e) => {
|
||||
// FIXME: this code isn't getting called on Chrome at all?
|
||||
if (!showContextMenu) return;
|
||||
if (e.metaKey) return;
|
||||
// console.log('context menu', e);
|
||||
|
@ -739,7 +744,7 @@ function Status({
|
|||
});
|
||||
setIsContextMenuOpen(true);
|
||||
}}
|
||||
{...(showContextMenu ? bindLongPress() : {})}
|
||||
{...(showContextMenu ? bindLongPressContext() : {})}
|
||||
>
|
||||
{showContextMenu && (
|
||||
<ControlledMenu
|
||||
|
@ -1839,7 +1844,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
|
|||
const statusPeekText = statusPeek(status.reblog || status);
|
||||
|
||||
const [showPeek, setShowPeek] = useState(false);
|
||||
const bindLongPress = useLongPress(
|
||||
const bindLongPressPeek = useLongPress(
|
||||
() => {
|
||||
setShowPeek(true);
|
||||
},
|
||||
|
@ -1847,7 +1852,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
|
|||
threshold: 600,
|
||||
captureEvent: true,
|
||||
detect: 'touch',
|
||||
cancelOnMovement: true,
|
||||
cancelOnMovement: 4, // true allows movement of up to 25 pixels
|
||||
},
|
||||
);
|
||||
|
||||
|
@ -1860,7 +1865,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
|
|||
e.preventDefault();
|
||||
setShowPeek(true);
|
||||
}}
|
||||
{...bindLongPress()}
|
||||
{...bindLongPressPeek()}
|
||||
>
|
||||
<article class="status filtered" tabindex="-1">
|
||||
<b
|
||||
|
|
|
@ -3,7 +3,8 @@ import mem from 'mem';
|
|||
const root = document.documentElement;
|
||||
const style = getComputedStyle(root);
|
||||
const defaultBoundingBoxPadding = 8;
|
||||
function _safeBoundingBoxPadding() {
|
||||
function _safeBoundingBoxPadding(paddings = []) {
|
||||
// paddings = [top, right, bottom, left]
|
||||
// Get safe area inset variables from root
|
||||
const safeAreaInsetTop = style.getPropertyValue('--sai-top');
|
||||
const safeAreaInsetRight = style.getPropertyValue('--sai-right');
|
||||
|
@ -15,7 +16,10 @@ function _safeBoundingBoxPadding() {
|
|||
safeAreaInsetBottom,
|
||||
safeAreaInsetLeft,
|
||||
]
|
||||
.map((v) => parseInt(v, 10) || defaultBoundingBoxPadding)
|
||||
.map(
|
||||
(v, i) =>
|
||||
(parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
|
||||
)
|
||||
.join(' ');
|
||||
// console.log(str);
|
||||
return str;
|
Loading…
Reference in a new issue