Skip to content

Commit

Permalink
Improve mobile responsiveness by adjusting design for toolbar conside…
Browse files Browse the repository at this point in the history
…rations

- Enhanced layout responsiveness for mobile devices
- Applied design adjustments to account for mobile toolbars (iOS & Android)
  • Loading branch information
IlyasKeskinn committed Sep 8, 2024
1 parent 2c58f96 commit 450ce44
Showing 19 changed files with 41 additions and 27 deletions.
2 changes: 1 addition & 1 deletion app/(root)/page.jsx
Original file line number Diff line number Diff line change
@@ -157,7 +157,7 @@ export default function Home() {
/>
{!user && <PageLoading />}
{user && (
<main className="flex md:flex-row flex-col h-screen w-screen max-h-screen max-w-full overflow-hidden">
<main className="flex md:flex-row flex-col h-dvh w-screen max-h-dvh max-w-full overflow-hidden">
<Menu user={user} />
<Aside />
{chatRoom ? <Chat socket={socket.current} /> : <Empty />}
1 change: 1 addition & 0 deletions app/globals.css
Original file line number Diff line number Diff line change
@@ -92,3 +92,4 @@
@apply bg-transparent appearance-none placeholder:text-muted-foreground w-full py-3 px-4 focus:outline-none ring-offset-0 focus-visible:ring-offset-0 focus-visible:ring-transparent !important;
}
}

8 changes: 6 additions & 2 deletions app/layout.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@ import { Inter } from "next/font/google";
import { ThemeProvider } from "@/components/shared/theme/theme-provider";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";
import { SpeedInsights } from "@vercel/speed-insights/next"
import RecoilContextProvider from "./recoilContextProvider";

const inter = Inter({ subsets: ["latin"] });
@@ -14,7 +13,12 @@ export const metadata = {
keywords:
"Buzzys, chat, live chat, messaging, connections, real-time conversations, social, online chat",
};

export const viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
};
export default function RootLayout({ children }) {
return (
<html lang="en">
2 changes: 1 addition & 1 deletion components/shared/Empty.jsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import Lottie from "lottie-react";
import logo from "../../public/logo.json";
const Empty = () => {
return (
<div className="md:flex md:order-3 border-l border-slate-900/10 border-b border-b-bee hidden max-w-[100%] w-full md:max-h-[100%] h-[100%] bg-background">
<div className="md:flex md:order-3 md:border-l border-slate-900/10 md:border-b border-b-bee hidden max-w-[100%] w-full md:max-h-[100%] h-[100%] bg-background">
<div className="w-full flex flex-col justify-center items-center">
<div className="h-96 w-96">
<Lottie animationData={logo} />
2 changes: 1 addition & 1 deletion components/shared/chat/Chat.jsx
Original file line number Diff line number Diff line change
@@ -44,7 +44,7 @@ const Chat = ({ socket }) => {

return (
<>
<div className="md:block md:order-3 border-l border-b border-b-bee bg-background max-w-[100%] w-full md:max-h-[100%] h-[100vh] ">
<div className="md:block md:order-3 md:border-l md:border-b border-b-bee bg-background max-w-[100%] w-full md:max-h-[100%] h-[100dvh] ">
<div>
<ChatHeader reciverUserInChat={reciverUserInChat} />
<ChatContainer
2 changes: 1 addition & 1 deletion components/shared/chat/ChatContainer.jsx
Original file line number Diff line number Diff line change
@@ -59,7 +59,7 @@ const ChatContainer = ({ socket, reciverUserInChat }) => {


return (
<div className="h-[82vh] overflow-auto">
<div className="h-[82dvh] overflow-auto">
{messages.length <= 0 ? (
<EmptyChat />
) : (
2 changes: 1 addition & 1 deletion components/shared/chat/ChatHeader.jsx
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ const ChatHeader = ({ reciverUserInChat }) => {

return (
<>
<div className="h-[10vh] max-h-[10vh]: w-full border-b shadow ">
<div className="h-[10dvh] max-h-[10dvh]: w-full border-b shadow ">
<div className="flex h-full justify-between items-center px-5">
<div className="flex justify-between items-center gap-4">
<div className="flex justify-center items-center">
4 changes: 3 additions & 1 deletion components/shared/chat/MessageBar.jsx
Original file line number Diff line number Diff line change
@@ -212,7 +212,7 @@ const MessageBar = ({ socket }) => {
});
};
return (
<div className="w-full h-[8vh] flex items-center gap-1 relative px-4 ">
<div className="w-full h-[8dvh] flex items-center gap-1 relative px-4 ">
{!showCapturAudio && (
<>
<div
@@ -275,6 +275,8 @@ const MessageBar = ({ socket }) => {
<EmojiPicker
theme={theme === "dark" ? "dark" : "light"}
onEmojiClick={onEmojiClick}
autoFocusSearch={false}
searchDisabled={true} // This disables the search bar
/>
</div>
)}
2 changes: 1 addition & 1 deletion components/shared/chatlist/ChatList.jsx
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ const ChatList = ({ chatList }) => {
const filteredChatList = useRecoilValue(filteredChatListAtom);

return (
<div className="overflow-auto md:h-[80vh] h-[65vh]">
<div className="overflow-auto md:h-[80dvh] h-[65dvh]">
{chatList.length > 0 ? (
filteredChatList.length > 0 ? (
filteredChatList.map((chatItem, index) => {
2 changes: 1 addition & 1 deletion components/shared/common/Menu.jsx
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ const Menu = ({ user }) => {
<div
className={`${
chatRoom ? "hidden" : "block"
} md:block md:max-w-[80px] max-w-[100%] w-full md:max-h-screen max-h-[10%] md:order-1 order-2 bg-secondary z-100`}
} md:block md:max-w-[80px] max-w-[100%] w-full md:max-h-dvh max-h-[10%] md:order-1 order-2 bg-secondary z-100`}
>
<div className="flex h-full md:flex-col flex-row justify-center md:justify-between items-center py-5 px-2">
<div className="md:block hidden">
20 changes: 13 additions & 7 deletions components/shared/common/SendPhotoDropdown.jsx
Original file line number Diff line number Diff line change
@@ -13,6 +13,10 @@ export const SendPhotoDropdown = ({ imgURL, setImgURL }) => {
const { handleImageChange } = usePrevImg(imgURL, setImgURL);
const [open, setOpen] = useState(false);

const isMobileDevice = /Mobi|Android|iPhone|iPad|iPod/i.test(
navigator.userAgent
);

const handleOpen = () => {
setOpen(true);
};
@@ -41,13 +45,15 @@ export const SendPhotoDropdown = ({ imgURL, setImgURL }) => {
className="hidden"
onChange={handleImageChange}
/>
<div
className="flex justify-center items-center text-sm gap-2 hover:bg-gray-500/10 rounded-xl p-4 cursor-pointer"
onClick={handleOpen}
>
<CiCamera className="text-sm" />
<span>Take photo</span>
</div>
{!isMobileDevice && (
<div
className="flex justify-center items-center text-sm gap-2 hover:bg-gray-500/10 rounded-xl p-4 cursor-pointer"
onClick={handleOpen}
>
<CiCamera className="text-sm" />
<span>Take photo</span>
</div>
)}
</div>
<CapturePhoto open={open} setOpen={setOpen} setImgURL={setImgURL} />
</DropdownMenuContent>
2 changes: 1 addition & 1 deletion components/shared/contacts/ContactList.jsx
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import filteredContactsAtom from "@/atom/filteredContacts";
const ContactList = ({ users }) => {
const filteredContacts = useRecoilValue(filteredContactsAtom);
return (
<div className="overflow-auto md:h-[80vh] h-[65vh]">
<div className="overflow-auto md:h-[80dvh] h-[65dvh]">
{users.length > 0 ? (
filteredContacts.length > 0 ? (
filteredContacts.map((user) => (
2 changes: 1 addition & 1 deletion components/shared/contacts/Contacts.jsx
Original file line number Diff line number Diff line change
@@ -37,7 +37,7 @@ const Contacts = () => {
<>
<ContactsHeader />
{loading ? (
<div className="h-[70vh] flex justify-center items-center">
<div className="h-[70dvh] flex justify-center items-center">
<Spinner />
</div>
) : (
4 changes: 2 additions & 2 deletions components/shared/profile/ProfileContent.jsx
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ const ProfileContent = () => {
}, [activeMenu]);

return (
<div className="my-3 md:h-[80vh] h-[65vh] overflow-auto">
<div className="my-3 md:h-[80dvh] h-[65dvh] overflow-auto">
<div className="flex flex-col items-center justify-center gap-6">
<div className="flex flex-col justify-center items-center gap-4">
<div className="border-2 border-bee rounded-full">
@@ -59,7 +59,7 @@ const ProfileContent = () => {
<h5 className="text-center">Blocked Users</h5>
</AccordionTrigger>
<AccordionContent>
<div className="overflow-auto md:h-[40vh] h-[25vh]">
<div className="overflow-auto md:h-[40dvh] h-[25dvh]">
{blockedUsers.length > 0 ? (
blockedUsers.map((blockUser, index) => (
<BlockedUserTile key={index} user={blockUser} />
2 changes: 1 addition & 1 deletion components/shared/settings/SettingsContent.jsx
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ const SettingsContent = () => {
router.push("logout");
};
return (
<div className="p-5">
<div className="p-5 h-[70dvh] overflow-auto">
<div className="flex flex-col items-center justify-center gap-6">
<div className="flex flex-col justify-center items-center gap-4">
<div className="border-2 border-bee rounded-full">
5 changes: 4 additions & 1 deletion config/cors.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
[
{
"origin": ["http://localhost:3000"],
"origin": [
"http://localhost:3000",
"https://buzzys-9cba53c8ae72.herokuapp.com/"
],
"method": ["GET", "POST", "PUT"],
"maxAgeSeconds": 3600,
"responseHeader": ["Content-Type", "Authorization"]
2 changes: 1 addition & 1 deletion lib/actions/messages.actions.js
Original file line number Diff line number Diff line change
@@ -203,7 +203,7 @@ export async function sendAudioMessage(data) {

return JSON.parse(JSON.stringify(newMessage));
} catch (error) {
console.log(error);

}
}

2 changes: 1 addition & 1 deletion lib/actions/user.actions.js
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ import User from "../database/models/user.model";
export async function checkUser(email) {
await connectToDatabase();

console.log(email);


try {
const user = await User.findOne({ email: email });
2 changes: 0 additions & 2 deletions lib/database/index.js
Original file line number Diff line number Diff line change
@@ -4,8 +4,6 @@ const MONGODB_URI = process.env.MONGODB_URI;

let cached = mongoose;

console.log(MONGODB_URI);

export const connectToDatabase = async () => {
if (cached.conn) return cached.conn;

0 comments on commit 450ce44

Please sign in to comment.