fixed mobile ui and ux
This commit is contained in:
@@ -152,31 +152,6 @@ html, body {
|
||||
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 ── */
|
||||
.mx-sidebar {
|
||||
position: sticky;
|
||||
@@ -841,7 +816,7 @@ html, body {
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 960px) {
|
||||
.mx-mobile-nav { display: flex; }
|
||||
}
|
||||
|
||||
@@ -906,7 +881,7 @@ html, body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 960px) {
|
||||
.mx-compose-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -959,3 +934,34 @@ html, body {
|
||||
overflow-y: auto;
|
||||
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; }
|
||||
}
|
||||
|
||||
@@ -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 { createPortal } from "react-dom";
|
||||
import {
|
||||
@@ -53,6 +53,28 @@ type Tweet = {
|
||||
|
||||
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 ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function timeAgo(insertedAt?: string | null): string {
|
||||
@@ -1203,6 +1225,7 @@ function App() {
|
||||
const profileUserId = appEl.dataset.userId || null;
|
||||
|
||||
const [mobileCompose, setMobileCompose] = useState(false);
|
||||
const isDesktop = useIsDesktop();
|
||||
|
||||
const onFeedPage = page === "feed" || page === "tweet";
|
||||
const onUsersPage = page === "users" || page === "user-detail";
|
||||
@@ -1267,58 +1290,62 @@ function App() {
|
||||
<AuthCtx.Provider value={{ email, userId }}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<div className="mx-root">
|
||||
<aside className="mx-sidebar">
|
||||
<div className="mx-logo">
|
||||
<span className="mx-logo-icon">⬡</span>
|
||||
<span className="mx-logo-text">Mixer</span>
|
||||
</div>
|
||||
<nav className="mx-nav">
|
||||
<a className={`mx-nav-item${onFeedPage ? " mx-nav-active" : ""}`} href="/feed">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
||||
</svg>
|
||||
Feed
|
||||
</a>
|
||||
<a className={`mx-nav-item${onUsersPage ? " mx-nav-active" : ""}`} href="/users">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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>
|
||||
Users
|
||||
</a>
|
||||
</nav>
|
||||
<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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
</aside>
|
||||
{isDesktop && (
|
||||
<aside className="mx-sidebar">
|
||||
<div className="mx-logo">
|
||||
<span className="mx-logo-icon">⬡</span>
|
||||
<span className="mx-logo-text">Mixer</span>
|
||||
</div>
|
||||
<nav className="mx-nav">
|
||||
<a className={`mx-nav-item${onFeedPage ? " mx-nav-active" : ""}`} href="/feed">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
||||
</svg>
|
||||
Feed
|
||||
</a>
|
||||
<a className={`mx-nav-item${onUsersPage ? " mx-nav-active" : ""}`} href="/users">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<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>
|
||||
Users
|
||||
</a>
|
||||
</nav>
|
||||
<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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
</aside>
|
||||
)}
|
||||
|
||||
<main className="mx-main">
|
||||
{renderMain()}
|
||||
</main>
|
||||
|
||||
<div className="mx-rightbar">
|
||||
<div className="mx-info-card">
|
||||
<h3 className="mx-info-title">About Mixer</h3>
|
||||
<p className="mx-info-body">
|
||||
A minimal social feed built with Ash Framework, Phoenix, and React.
|
||||
</p>
|
||||
<div className="mx-stack">
|
||||
{["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => (
|
||||
<span key={s} className="mx-tag">{s}</span>
|
||||
))}
|
||||
{isDesktop && (
|
||||
<div className="mx-rightbar">
|
||||
<div className="mx-info-card">
|
||||
<h3 className="mx-info-title">About Mixer</h3>
|
||||
<p className="mx-info-body">
|
||||
A minimal social feed built with Ash Framework, Phoenix, and React.
|
||||
</p>
|
||||
<div className="mx-stack">
|
||||
{["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => (
|
||||
<span key={s} className="mx-tag">{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile-only bottom nav — hidden on desktop via CSS */}
|
||||
|
||||
Reference in New Issue
Block a user