1
0
Fork 0

hacky emergency mobile support

This commit is contained in:
Julian 2023-05-02 12:14:25 -04:00
parent fbe2222d1b
commit 850f4ba9ab
Signed by untrusted user: NotNite
GPG Key ID: BD91A5402CCEB08A
4 changed files with 27 additions and 7 deletions

View File

@ -1,5 +1,5 @@
.content { .content {
width: min-content; width: min(100vw, min-content);
margin: 2rem auto; margin: 2rem auto;
} }
@ -7,6 +7,7 @@
display: grid; display: grid;
grid-template-columns: 300px 1fr; grid-template-columns: 300px 1fr;
column-gap: 2rem; column-gap: 2rem;
max-width: 100vw;
} }
.profileTower *:first-child { .profileTower *:first-child {
@ -71,3 +72,19 @@
width: 100%; width: 100%;
margin: 1rem 0; 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;
}
}

View File

@ -41,7 +41,7 @@ export default function AvatarChanger({
alt="Your avatar" alt="Your avatar"
/> />
) : ( ) : (
<UserIcon /> <UserIcon className={styles.currentAvatar} />
)} )}
<button <button

View File

@ -32,12 +32,12 @@ export default function Connection({
} }
}; };
const mouseDown = (e: React.MouseEvent<HTMLButtonElement>) => { const down = (e: React.MouseEvent | React.TouchEvent) => {
e.preventDefault(); e.preventDefault();
interval.current = setTimeout(execute, holdTime); interval.current = setTimeout(execute, holdTime);
}; };
const mouseUp = (e: React.MouseEvent<HTMLButtonElement>) => { const up = (e: React.MouseEvent | React.TouchEvent) => {
e.preventDefault(); e.preventDefault();
if (interval.current) clearTimeout(interval.current); if (interval.current) clearTimeout(interval.current);
}; };
@ -51,8 +51,10 @@ export default function Connection({
!authState?.connected ? styles.disconnected : styles.progress !authState?.connected ? styles.disconnected : styles.progress
)} )}
disabled={unavailable} disabled={unavailable}
onMouseDown={mouseDown} onMouseDown={down}
onMouseUp={mouseUp} onMouseUp={up}
onTouchStart={down}
onTouchEnd={up}
> >
<div className={styles.iconContainer}> <div className={styles.iconContainer}>
{icon ? icon() : <span className={styles.dot}></span>} {icon ? icon() : <span className={styles.dot}></span>}

View File

@ -1,12 +1,13 @@
import React from "react"; import React from "react";
export default function UserIcon() { export default function UserIcon(props: React.SVGProps<SVGSVGElement>) {
return ( return (
<svg <svg
viewBox="0 0 128 128" viewBox="0 0 128 128"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
> >
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"> <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<circle fill="currentColor" cx="64" cy="48" r="32"></circle> <circle fill="currentColor" cx="64" cy="48" r="32"></circle>