JimWeaver/Mixer
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed mobile ui and ux

Browse Source
This commit is contained in:
qdust41
2026-04-04 13:02:10 -04:00
parent 193ff815a1
commit 33c83e188e
2 changed files with 106 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
assets/css/app.css
View File

@@ -152,31 +152,6 @@ html, body {
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 960px) {
.mx-root { grid-template-columns: 64px 1fr; }
.mx-rightbar { display: none; }
}
@media (max-width: 640px) {
.mx-root { grid-template-columns: 1fr; }
.mx-sidebar { display: none; }
/* space for fixed bottom nav */
.mx-main { padding-bottom: 72px; }
/* hide inline compose on mobile — the overlay handles it */
.mx-compose-wrapper { display: none; }
/* tighten card spacing */
.mx-feed { padding: 0.625rem 0.625rem; gap: 0.5rem; }
.mx-tweet { padding: 0.875rem 0.875rem; }
/* truncate long email addresses */
.mx-tweet-handle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}
.mx-header { padding: 0.75rem 1rem; }
.mx-detail { padding: 0.875rem 1rem; }
}
/* ── Sidebar ── */ /* ── Sidebar ── */
.mx-sidebar { .mx-sidebar {
position: sticky; position: sticky;
@@ -841,7 +816,7 @@ html, body {
padding-bottom: env(safe-area-inset-bottom, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
} }
@media (max-width: 640px) { @media (max-width: 960px) {
.mx-mobile-nav { display: flex; } .mx-mobile-nav { display: flex; }
} }
@@ -906,7 +881,7 @@ html, body {
display: none; display: none;
} }
@media (max-width: 640px) { @media (max-width: 960px) {
.mx-compose-overlay { .mx-compose-overlay {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -959,3 +934,34 @@ html, body {
overflow-y: auto; overflow-y: auto;
padding: 1.25rem; padding: 1.25rem;
} }
/* ───────────────────────────────────────────────────────────────────────────────
Responsive layout overrides
IMPORTANT: these rules must live AFTER all component base rules so that
the cascade works correctly (later rule of equal specificity wins).
─────────────────────────────────────────────────────────────────────────────── */
/* Tablet + mobile (≤ 960 px): single column, no side panels, bottom nav */
@media (max-width: 960px) {
.mx-root { grid-template-columns: 1fr; }
.mx-sidebar { display: none; }
.mx-rightbar { display: none; }
/* room for fixed bottom nav */
.mx-main { padding-bottom: 72px; }
/* hide inline compose — the overlay FAB handles it */
.mx-compose-wrapper { display: none; }
}
/* Narrow phones (≤ 640 px): tighten spacing */
@media (max-width: 640px) {
.mx-feed { padding: 0.625rem; gap: 0.5rem; }
.mx-tweet { padding: 0.875rem; }
.mx-tweet-handle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}
.mx-header { padding: 0.75rem 1rem; }
.mx-detail { padding: 0.875rem 1rem; }
}

119
assets/js/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { createContext, useContext, useState, useRef, useEffect } from "react"; import React, { createContext, useContext, useState, useRef, useEffect, useSyncExternalStore } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { import {
@@ -53,6 +53,28 @@ type Tweet = {
const AuthCtx = createContext({ email: "", userId: "" }); const AuthCtx = createContext({ email: "", userId: "" });
// ── Responsive helper ─────────────────────────────────────────────────────────
// Returns true when the viewport is wider than 960 px (desktop layout).
// Uses useSyncExternalStore so it re-renders on resize without a manual
// useEffect + useState dance.
const DESKTOP_MQ = typeof window !== "undefined"
? window.matchMedia("(min-width: 961px)")
: null;
function subscribe(cb: () => void) {
DESKTOP_MQ?.addEventListener("change", cb);
return () => DESKTOP_MQ?.removeEventListener("change", cb);
}
function useIsDesktop(): boolean {
return useSyncExternalStore(
subscribe,
() => DESKTOP_MQ?.matches ?? true,
() => true, // SSR snapshot (never actually used here)
);
}
// ── Helpers ──────────────────────────────────────────────────────────────────── // ── Helpers ────────────────────────────────────────────────────────────────────
function timeAgo(insertedAt?: string | null): string { function timeAgo(insertedAt?: string | null): string {
@@ -1203,6 +1225,7 @@ function App() {
const profileUserId = appEl.dataset.userId || null; const profileUserId = appEl.dataset.userId || null;
const [mobileCompose, setMobileCompose] = useState(false); const [mobileCompose, setMobileCompose] = useState(false);
const isDesktop = useIsDesktop();
const onFeedPage = page === "feed" || page === "tweet"; const onFeedPage = page === "feed" || page === "tweet";
const onUsersPage = page === "users" || page === "user-detail"; const onUsersPage = page === "users" || page === "user-detail";
@@ -1267,58 +1290,62 @@ function App() {
<AuthCtx.Provider value={{ email, userId }}> <AuthCtx.Provider value={{ email, userId }}>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<div className="mx-root"> <div className="mx-root">
<aside className="mx-sidebar"> {isDesktop && (
<div className="mx-logo"> <aside className="mx-sidebar">
<span className="mx-logo-icon">⬡</span> <div className="mx-logo">
<span className="mx-logo-text">Mixer</span> <span className="mx-logo-icon">⬡</span>
</div> <span className="mx-logo-text">Mixer</span>
<nav className="mx-nav"> </div>
<a className={`mx-nav-item${onFeedPage ? " mx-nav-active" : ""}`} href="/feed"> <nav className="mx-nav">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <a className={`mx-nav-item${onFeedPage ? " mx-nav-active" : ""}`} href="/feed">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
</svg> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
Feed </svg>
</a> Feed
<a className={`mx-nav-item${onUsersPage ? " mx-nav-active" : ""}`} href="/users"> </a>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> <a className={`mx-nav-item${onUsersPage ? " mx-nav-active" : ""}`} href="/users">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" /> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
</svg> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
Users </svg>
</a> Users
</nav> </a>
<div className="mx-sidebar-footer"> </nav>
{email ? ( <div className="mx-sidebar-footer">
<> {email ? (
<span className="mx-version" style={{ color: "var(--mx-fg2)" }}>{email}</span> <>
<a className="mx-auth-link" href="/sign-out">Sign out</a> <span className="mx-version" style={{ color: "var(--mx-fg2)" }}>{email}</span>
</> <a className="mx-auth-link" href="/sign-out">Sign out</a>
) : ( </>
<> ) : (
<a className="mx-auth-link" href="/register">Create account</a> <>
<a className="mx-auth-link" href="/sign-in">Sign in</a> <a className="mx-auth-link" href="/register">Create account</a>
</> <a className="mx-auth-link" href="/sign-in">Sign in</a>
)} </>
<span className="mx-version">v0.1.0</span> )}
</div> <span className="mx-version">v0.1.0</span>
</aside> </div>
</aside>
)}
<main className="mx-main"> <main className="mx-main">
{renderMain()} {renderMain()}
</main> </main>
<div className="mx-rightbar"> {isDesktop && (
<div className="mx-info-card"> <div className="mx-rightbar">
<h3 className="mx-info-title">About Mixer</h3> <div className="mx-info-card">
<p className="mx-info-body"> <h3 className="mx-info-title">About Mixer</h3>
A minimal social feed built with Ash Framework, Phoenix, and React. <p className="mx-info-body">
</p> A minimal social feed built with Ash Framework, Phoenix, and React.
<div className="mx-stack"> </p>
{["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => ( <div className="mx-stack">
<span key={s} className="mx-tag">{s}</span> {["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => (
))} <span key={s} className="mx-tag">{s}</span>
))}
</div>
</div> </div>
</div> </div>
</div> )}
</div> </div>
{/* Mobile-only bottom nav — hidden on desktop via CSS */} {/* Mobile-only bottom nav — hidden on desktop via CSS */}