forked from NotNet/gluestick
hacky emergency mobile support
This commit is contained in:
parent
fbe2222d1b
commit
850f4ba9ab
|
@ -1,5 +1,5 @@
|
|||
.content {
|
||||
width: min-content;
|
||||
width: min(100vw, min-content);
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
|
@ -7,6 +7,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
column-gap: 2rem;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.profileTower *:first-child {
|
||||
|
@ -71,3 +72,19 @@
|
|||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* stack if we're out of space */
|
||||
@media (max-width: 800px) {
|
||||
.profileGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.profileGrid > * {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.rightGrid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -41,7 +41,7 @@ export default function AvatarChanger({
|
|||
alt="Your avatar"
|
||||
/>
|
||||
) : (
|
||||
<UserIcon />
|
||||
<UserIcon className={styles.currentAvatar} />
|
||||
)}
|
||||
|
||||
<button
|
||||
|
|
|
@ -32,12 +32,12 @@ export default function Connection({
|
|||
}
|
||||
};
|
||||
|
||||
const mouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
const down = (e: React.MouseEvent | React.TouchEvent) => {
|
||||
e.preventDefault();
|
||||
interval.current = setTimeout(execute, holdTime);
|
||||
};
|
||||
|
||||
const mouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
const up = (e: React.MouseEvent | React.TouchEvent) => {
|
||||
e.preventDefault();
|
||||
if (interval.current) clearTimeout(interval.current);
|
||||
};
|
||||
|
@ -51,8 +51,10 @@ export default function Connection({
|
|||
!authState?.connected ? styles.disconnected : styles.progress
|
||||
)}
|
||||
disabled={unavailable}
|
||||
onMouseDown={mouseDown}
|
||||
onMouseUp={mouseUp}
|
||||
onMouseDown={down}
|
||||
onMouseUp={up}
|
||||
onTouchStart={down}
|
||||
onTouchEnd={up}
|
||||
>
|
||||
<div className={styles.iconContainer}>
|
||||
{icon ? icon() : <span className={styles.dot}></span>}
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import React from "react";
|
||||
|
||||
export default function UserIcon() {
|
||||
export default function UserIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 128 128"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
{...props}
|
||||
>
|
||||
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
||||
<circle fill="currentColor" cx="64" cy="48" r="32"></circle>
|
||||
|
|
Loading…
Reference in New Issue