Skip to content

feat: responsive UI for phones (#1) #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrinoff merged 1 commit into from
Aug 17, 2025
Merged

feat: responsive UI for phones (#1) #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/app/graphs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export default function DesmosGraphPage(): React.JSX.Element {
{functions.map((func, index) => (
<div
key={func.id}
className="function-input-container"
style={{
display: "flex",
alignItems: "center",
Expand All @@ -139,6 +140,7 @@ export default function DesmosGraphPage(): React.JSX.Element {
color: PLOT_COLORS[index % PLOT_COLORS.length],
fontWeight: "bold",
fontSize: "1.2rem",
minWidth: "fit-content",
}}
>
ƒ<sub>{func.id}</sub>(x)=
Expand All @@ -155,6 +157,7 @@ export default function DesmosGraphPage(): React.JSX.Element {
fontSize: "1rem",
border: `1px solid #ccc`,
borderRadius: "4px",
minWidth: "120px",
}}
/>
<button
Expand All @@ -175,6 +178,7 @@ export default function DesmosGraphPage(): React.JSX.Element {
color: "white",
borderRadius: "4px",
cursor: "pointer",
fontSize: "0.9rem",
}}
>
+ Add Function
Expand Down
11 changes: 9 additions & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import "../styles/app.scss";
import "../styles/tailwind.css";
import DockElement from "../components/DockElement";
import GitHubStars from "../components/GitHubStars";
import MainWrapper from "../components/MainWrapper";

export const metadata: Metadata = {
title: {
Expand Down Expand Up @@ -98,8 +99,14 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={` bg-gray-900`}>
<main className="pt-4">{children}</main>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
Copy link

Copilot AI Aug 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting maximum-scale=1.0 and user-scalable=no prevents users from zooming, which violates WCAG accessibility guidelines. Users with visual impairments rely on zoom functionality. Remove these properties to allow zooming while maintaining responsive design.

Suggested change
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
content="width=device-width, initial-scale=1.0"

Copilot uses AI. Check for mistakes.
/>
</head>
<body className="bg-gray-900 overflow-x-hidden">
<MainWrapper>{children}</MainWrapper>
Copy link

Copilot AI Aug 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overflow-x-hidden on the body element can interfere with accessibility features like horizontal scrolling for users with disabilities. Consider applying this property more selectively to specific containers that need it.

Suggested change
<MainWrapper>{children}</MainWrapper>
<body className="bg-gray-900">
<MainWrapper className="overflow-x-hidden">{children}</MainWrapper>

Copilot uses AI. Check for mistakes.
<DockElement />
<GitHubStars />
</body>
Expand Down
3 changes: 2 additions & 1 deletion src/app/notebook/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,12 +77,13 @@ export default function NotebookPage() {
const renderedContent = useMemo(() => parseContent(content), [content]);

return (
<div className="notebook-container page">
<div className="notebook-container">
<div className="editor-pane">
<textarea
value={content}
onChange={(e) => setContent(e.target.value)}
className="editor-textarea"
placeholder="Start typing your markdown here..."
/>
</div>
<div
Expand Down
77 changes: 44 additions & 33 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export const metadata: Metadata = {

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-8 page relative">
{/* Background stars */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<main className="flex min-h-screen flex-col items-center justify-center p-4 sm:p-6 lg:p-8 relative pb-24">
{/* Background stars - hidden on mobile, visible on larger screens */}
<div className="absolute inset-0 overflow-hidden pointer-events-none hidden sm:block">
<div className="absolute top-20 left-10 text-yellow-300 animate-pulse">
✦
</div>
Expand Down Expand Up @@ -55,50 +55,61 @@ export default function Home() {
</div>
</div>

<div className="text-center mb-12 z-10 relative">
<h1 className="text-5xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
<div className="text-center mb-8 sm:mb-12 z-10 relative px-4">
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
Docerium
</h1>
<p className="text-lg text-gray-400">
<p className="text-base sm:text-lg text-gray-400 max-w-md mx-auto">
An all-in-one web application for teaching and learning.
</p>
</div>

<div className="grid md:grid-cols-3 gap-8 text-center z-10 relative">
<PixelCard variant="blue">
<div className="absolute inset-0 flex flex-col items-center justify-center p-6">
<Link href="/whiteboard">
<div className="flex items-center justify-center mb-3">
<ProjectIcon size={32} className="mr-3" />
<h2 className="text-2xl font-semibold">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 text-center z-10 relative w-full max-w-6xl px-4">
<PixelCard variant="blue" className="mx-auto">
<div className="absolute inset-0 flex flex-col items-center justify-center p-4 sm:p-6">
<Link href="/whiteboard" className="text-center">
<div className="flex flex-col sm:flex-row items-center justify-center mb-3">
<ProjectIcon size={24} className="sm:mr-3 mb-2 sm:mb-0" />
<h2 className="text-lg sm:text-xl lg:text-2xl font-semibold">
Interactive Whiteboard
</h2>
</div>
<p>Sketch ideas, draw diagrams, and collaborate in real-time.</p>
<p className="text-sm sm:text-base">
Sketch ideas, draw diagrams, and collaborate in real-time.
</p>
</Link>
</div>
</PixelCard>

<PixelCard variant="blue">
<div className="absolute inset-0 flex flex-col items-center justify-center p-6">
<Link href="/graphs">
<div className="flex items-center justify-center mb-3">
<GraphIcon size={32} className="mr-3" />
<h2 className="text-2xl font-semibold">Graphing Calculator</h2>
<PixelCard variant="blue" className="mx-auto">
<div className="absolute inset-0 flex flex-col items-center justify-center p-4 sm:p-6">
<Link href="/graphs" className="text-center">
<div className="flex flex-col sm:flex-row items-center justify-center mb-3">
<GraphIcon size={24} className="sm:mr-3 mb-2 sm:mb-0" />
<h2 className="text-lg sm:text-xl lg:text-2xl font-semibold">
Graphing Calculator
</h2>
</div>
<p>Plot functions, zoom, and analyze mathematical expressions.</p>
<p className="text-sm sm:text-base">
Plot functions, zoom, and analyze mathematical expressions.
</p>
</Link>
</div>
</PixelCard>

<PixelCard variant="blue">
<div className="absolute inset-0 flex flex-col items-center justify-center p-6">
<Link href="/notebook">
<div className="flex items-center justify-center mb-3">
<FileIcon size={32} className="mr-3" />
<h2 className="text-2xl font-semibold">Live Notebook</h2>
<PixelCard
variant="blue"
className="mx-auto md:col-span-2 lg:col-span-1"
>
<div className="absolute inset-0 flex flex-col items-center justify-center p-4 sm:p-6">
<Link href="/notebook" className="text-center">
<div className="flex flex-col sm:flex-row items-center justify-center mb-3">
<FileIcon size={24} className="sm:mr-3 mb-2 sm:mb-0" />
<h2 className="text-lg sm:text-xl lg:text-2xl font-semibold">
Live Notebook
</h2>
</div>
<p>
<p className="text-sm sm:text-base">
A split-screen markdown editor that renders LaTeX as you type.
</p>
</Link>
Expand All @@ -107,15 +118,15 @@ export default function Home() {
</div>

{/* Bottom section with additional info and stars */}
<div className="mt-16 mb-20 text-center z-10 relative">
<div className="mt-12 sm:mt-16 mb-20 sm:mb-24 text-center z-10 relative px-4">
<div className="flex items-center justify-center space-x-2 mb-4">
<span className="text-yellow-300">✦</span>
<p className="text-gray-500 text-sm">
<span className="text-yellow-300 hidden sm:inline">✦</span>
<p className="text-gray-500 text-xs sm:text-sm">
Built for educators, students, and creative minds
</p>
<span className="text-blue-300">✧</span>
<span className="text-blue-300 hidden sm:inline">✧</span>
</div>
<div className="flex items-center justify-center space-x-6 text-xs text-gray-600">
<div className="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-6 text-xs text-gray-600">
<span className="flex items-center space-x-1">
<span className="text-green-400">●</span>
<span>Real-time collaboration</span>
Expand Down
13 changes: 12 additions & 1 deletion src/components/DockElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,16 @@ const items = [
];

export default function DockElement() {
return <Dock items={items} panelHeight={68} baseItemSize={50} />;
return (
<>
{/* Mobile dock - smaller and simpler */}
<div className="block sm:hidden">
<Dock items={items} panelHeight={56} baseItemSize={40} />
</div>
{/* Desktop dock - original size */}
<div className="hidden sm:block">
<Dock items={items} panelHeight={68} baseItemSize={50} />
</div>
</>
);
}
16 changes: 8 additions & 8 deletions src/components/GitHubStars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,26 +28,26 @@ const GitHubStars = () => {
}, []);

return (
<div className="fixed bottom-20 right-6 z-50">
<div className="fixed bottom-16 sm:bottom-20 right-3 sm:right-6 z-50">
{stars !== null ? (
<a
href="https://github.com/docerium/docerium.com"
target="_blank"
rel="noopener noreferrer"
className="group flex items-center space-x-2 bg-black/40 hover:bg-black/60 backdrop-blur-md border border-gray-600/50 hover:border-gray-500/70 transition-all duration-300 px-3 py-2 rounded-full shadow-lg hover:shadow-xl text-sm text-gray-300 hover:text-white"
className="group flex items-center space-x-2 bg-black/40 hover:bg-black/60 backdrop-blur-md border border-gray-600/50 hover:border-gray-500/70 transition-all duration-300 px-2 sm:px-3 py-1.5 sm:py-2 rounded-full shadow-lg hover:shadow-xl text-xs sm:text-sm text-gray-300 hover:text-white"
>
<MarkGithubIcon
size={14}
className="transition-transform group-hover:scale-110"
size={12}
className="sm:w-[14px] sm:h-[14px] transition-transform group-hover:scale-110"
/>
<span className="font-medium">{stars}</span>
<span className="text-xs opacity-80 group-hover:opacity-100">★</span>
</a>
) : (
<div className="flex items-center space-x-2 bg-black/40 backdrop-blur-md border border-gray-600/50 px-3 py-2 rounded-full animate-pulse">
<div className="h-3 w-3 bg-gray-500/50 rounded-full"></div>
<div className="h-3 w-8 bg-gray-500/50 rounded"></div>
<div className="h-3 w-3 bg-gray-500/50 rounded-full"></div>
<div className="flex items-center space-x-2 bg-black/40 backdrop-blur-md border border-gray-600/50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-full animate-pulse">
<div className="h-2.5 w-2.5 sm:h-3 sm:w-3 bg-gray-500/50 rounded-full"></div>
<div className="h-2.5 w-6 sm:h-3 sm:w-8 bg-gray-500/50 rounded"></div>
<div className="h-2.5 w-2.5 sm:h-3 sm:w-3 bg-gray-500/50 rounded-full"></div>
</div>
)}
</div>
Expand Down
19 changes: 19 additions & 0 deletions src/components/MainWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
"use client";

import { usePathname } from "next/navigation";

export default function MainWrapper({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();

// For notebook, graphs, and whiteboard, don't add padding
const isFullPageApp =
pathname === "/notebook" ||
pathname === "/graphs" ||
pathname === "/whiteboard";

return <main className={isFullPageApp ? "" : "pt-4"}>{children}</main>;
}
2 changes: 1 addition & 1 deletion src/components/PixelCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ export default function PixelCard({
return (
<div
ref={containerRef}
className={`h-[400px] w-[300px] relative overflow-hidden grid place-items-center aspect-[4/5] border border-[#27272a] rounded-[25px] isolate transition-colors duration-200 ease-[cubic-bezier(0.5,1,0.89,1)] select-none ${className}`}
className={`h-[280px] w-[280px] sm:h-[320px] sm:w-[320px] lg:h-[400px] lg:w-[300px] relative overflow-hidden grid place-items-center aspect-square lg:aspect-[4/5] border border-[#27272a] rounded-[20px] sm:rounded-[25px] isolate transition-colors duration-200 ease-[cubic-bezier(0.5,1,0.89,1)] select-none ${className}`}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onFocus={finalNoFocus ? undefined : onFocus}
Expand Down
12 changes: 12 additions & 0 deletions src/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@
margin-top: 1vh;
height: 96vh;
width: 100vw;
overflow-x: hidden; /* Prevent horizontal scroll on mobile */

// For notebook and other full-height pages
&.notebook-container {
margin-top: 0;
height: 100vh;
}
}

.dock-container {
Expand All @@ -12,6 +19,11 @@
display: flex;
justify-content: center;
padding-bottom: 8px;

/* Ensure dock doesn't interfere with mobile scrolling */
@media (max-width: 640px) {
padding-bottom: 4px;
}
}

/* Star animations */
Expand Down
15 changes: 15 additions & 0 deletions src/styles/globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ body {
font-family: "Mozilla Text", sans-serif;
font-optical-sizing: auto;
font-style: normal;

// Mobile improvements
@media (max-width: 768px) {
-webkit-touch-callout: none;
Copy link

Copilot AI Aug 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disabling touch callout (-webkit-touch-callout: none) can interfere with accessibility features like VoiceOver on iOS. Consider removing this property or applying it only to specific interactive elements where it's necessary.

Suggested change
-webkit-touch-callout: none;

Copilot uses AI. Check for mistakes.
-webkit-user-select: none;
Copy link

Copilot AI Aug 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Globally disabling text selection (-webkit-user-select: none) can harm accessibility by preventing users from selecting text for copying or using assistive technologies. Apply this property selectively to UI elements where text selection should be prevented, not globally.

Suggested change
-webkit-user-select: none;
/* -webkit-user-select: none; Removed for accessibility */

Copilot uses AI. Check for mistakes.
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
}
}
.layout {
display: flex;
Expand All @@ -38,4 +46,11 @@ body {
height: 4vh;
padding: 1rem;
z-index: 100000;

// Mobile adjustments
@media (max-width: 768px) {
height: 3vh;
padding: 0.5rem;
font-size: 0.9rem;
}
}
45 changes: 41 additions & 4 deletions src/styles/graphs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,54 @@

.floating-controls {
position: absolute;
top: 50%;
top: 20px;
left: 20px;
transform: translateY(-50%);
right: 20px;
background: #121212;
backdrop-filter: blur(10px);
padding: 1.5rem;
padding: 1rem;
border-radius: 12px;
z-index: 10;
border: 1px solid rgba(255, 255, 255, 0.8);
width: 400px;
box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);

// Mobile styles
@media (max-width: 768px) {
top: 10px;
left: 10px;
right: 10px;
padding: 0.75rem;

// Make the controls stack vertically on mobile
.function-input-container {
flex-direction: column;
gap: 0.5rem;

span {
font-size: 1rem !important;
}

input {
width: 100% !important;
font-size: 0.9rem !important;
}

.remove-button {
align-self: flex-start;
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
}
}
}

// Desktop styles
@media (min-width: 769px) {
width: 400px;
top: 50%;
transform: translateY(-50%);
right: auto;
padding: 1.5rem;
}
}

.floating-controls input[type="text"] {
Expand Down
Loading