forked from mito-systems/sol-mem-gen
Handle responsiveness in mobile browser #6
8
index.html
Normal file
8
index.html
Normal 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
1
next-env.d.ts
vendored
@ -1,5 +1,6 @@
|
|||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/image-types/global" />
|
/// <reference types="next/image-types/global" />
|
||||||
|
/// <reference types="next/navigation-types/compat/navigation" />
|
||||||
|
|
||||||
// NOTE: This file should not be edited
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||||
|
@ -27,14 +27,14 @@ const WalletHeader: React.FC<WalletHeaderProps> = ({ walletState, onConnect, onD
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex flex-col sm:flex-row items-center justify-between">
|
||||||
<span className="text-slate-300">Connected Wallet</span>
|
<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">
|
<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)}...
|
{walletState.publicKey?.slice(0, 22)}...
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
onClick={onDisconnect}
|
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
|
Disconnect
|
||||||
</button>
|
</button>
|
||||||
|
57
styles.css
Normal file
57
styles.css
Normal 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... */
|
@ -22,7 +22,8 @@
|
|||||||
{
|
{
|
||||||
"name": "next"
|
"name": "next"
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
"strictNullChecks": true
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"next-env.d.ts",
|
"next-env.d.ts",
|
||||||
|
Loading…
Reference in New Issue
Block a user