deep-stack/sol-mem-gen
3
0
Fork 0
forked from mito-systems/sol-mem-gen
Code Pull Requests Activity

Handle responsiveness in mobile browser #6

Merged
nabarun merged 1 commits from ng-responsiveness into main 2025-01-27 14:08:02 +00:00
Conversation 0 Commits 1 Files Changed 5 +72 -5
5 changed files with 72 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html Normal file
View File

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

1
next-env.d.ts vendored
View File

@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

8
src/components/WalletHeader.tsx
View File

@ -27,14 +27,14 @@ const WalletHeader: React.FC<WalletHeaderProps> = ({ walletState, onConnect, onD
))}
</div>
) : (
<div className="flex items-center justify-between">
<span className="text-slate-300">Connected Wallet</span>
<span className="px-3 py-1 bg-amber-500/20 rounded-full text-amber-200 text-sm">
<div className="flex flex-col sm:flex-row items-center justify-between">
<span className="text-slate-300 mb-2 sm:mb-0">Connected Wallet</span>
<span className="px-3 py-1 bg-amber-500/20 rounded-full text-amber-200 text-sm mb-2 sm:mb-0">
{walletState.publicKey?.slice(0, 22)}...
</span>
<button
onClick={onDisconnect}
className="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-red-500/25 ml-4"
className="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-red-500/25"
>
Disconnect
</button>

57
styles.css Normal file
View File

@ -0,0 +1,57 @@
/* ...existing code... */
/* Mobile styles */
@media (max-width: 600px) {
body {
font-size: 14px;
}
.container {
padding: 10px;
}
.header, .footer {
text-align: center;
}
.content {
margin: 0;
padding: 10px;
}
/* Add more styles as needed for mobile responsiveness */
}
/* Tablet styles */
@media (min-width: 601px) and (max-width: 1024px) {
body {
font-size: 16px;
}
.container {
padding: 20px;
}
.header, .footer {
text-align: center;
}
.content {
margin: 0 auto;
padding: 20px;
}
/* Add more styles as needed for tablet responsiveness */
}
/* Desktop styles */
@media (min-width: 1025px) {
body {
font-size: 18px;
}
.container {
padding: 30px;
}
.header, .footer {
text-align: left;
}
.content {
margin: 0 auto;
padding: 30px;
}
/* Add more styles as needed for desktop responsiveness */
}
/* ...existing code... */

3
tsconfig.json
View File

@ -22,7 +22,8 @@
{
"name": "next"
}
]
],
"strictNullChecks": true
},
"include": [
"next-env.d.ts",