Skip to content

refactor: update collection mobile responsiveness for better UX #143

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
DioChuks merged 1 commit into from
Aug 5, 2025
Merged

refactor: update collection mobile responsiveness for better UX #143

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: 2 additions & 2 deletions components/collection-page/CollectionStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,11 @@ const CollectionStats: React.FC = () => {
))}
</div>
</div>
<div className="grid sm:hidden grid-cols-2 gap-4">
<div className="grid sm:hidden grid-cols-3 gap-4">
{stats.map((stat, index) => (
<div
key={index}
className="flex flex-col items-center justify-center p-3 bg-[#1f2123] rounded-lg"
className="flex flex-col items-start justify-start p-3 rounded-lg"
>
<div className="text-xs text-gray-400 uppercase mb-2 tracking-wide text-center">
{stat.label}
Expand Down
2 changes: 1 addition & 1 deletion components/collection-page/CollectionTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const CollectionTabs: React.FC<CollectionTabsProps> = ({ activeTab, setActiveTab
const tabs = ['Items', 'About', 'Activity', "Owner"];

return (
<div className="border-b border-gray-800">
<div className="border-b border-gray-800 mb-7">
<nav className="flex space-x-8">
{tabs.map((tab) => (
<button
Expand Down
2 changes: 1 addition & 1 deletion components/collection-page/collection-header/CollectionProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Image from 'next/image';

const CollectionProfile: React.FC = () => {
return (
<div className="flex flex-col items-center space-x-4">
<div className="flex flex-col w-full items-start sm:items-center space-x-4">
<div className="w-32 h-32 rounded-2xl flex items-center justify-center">
<Image src={"/collectionProfile.png"} width={100} height={100} alt='' className='w-full h-full'/>
</div>
Expand Down
24 changes: 10 additions & 14 deletions components/collection-page/collection-header/SocialLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,21 +112,19 @@ const SocialLinks: React.FC = () => {
</div>

{/* Info Cards - Responsive Stacking */}
<div className="flex flex-col sm:flex-row sm:flex-wrap lg:flex-nowrap items-start sm:items-center gap-3 sm:gap-4 lg:gap-6 text-sm text-gray-400 my-5">
<div className="flex flex-wrap lg:flex-nowrap justify-center items-center gap-3 sm:gap-4 lg:gap-6 text-sm text-gray-400 my-5">
{/* Creator Info */}
<div className="flex items-center space-x-2 bg-[#1C1D1F] rounded p-2 sm:p-3 w-full sm:w-auto">
<span className="text-xs sm:text-sm">By</span>
<span className="text-white font-medium text-xs sm:text-sm">
Cattie Negtar
</span>
<div className="flex items-center w-fit justify-center space-x-2 bg-[#1C1D1F] rounded-md py-2 px-3.5 sm:p-3 sm:w-auto">
<span className="text-sm">By</span>
<span className="text-white font-medium text-sm">Cattie Negtar</span>
<div className="w-3 h-3 sm:w-4 sm:h-4 rounded-full flex items-center justify-center flex-shrink-0">
<Image src={"/Star2.png"} width={50} height={50} alt="" />
<Image src={"/Star2.png"} width={50} height={50} alt="" />
</div>
</div>

{/* Blockchain Info */}
<div className="flex items-center space-x-2 bg-[#1C1D1F] rounded p-2 sm:p-3 w-full sm:w-auto">
<span className="text-xs sm:text-sm text-white">Ethereum</span>
<div className="flex items-center w-fit justify-center space-x-2 bg-[#1C1D1F] rounded-md py-2 px-3.5 sm:p-3 sm:w-auto">
<span className="text-sm text-white">Ethereum</span>
<div className="w-3 h-3 sm:w-4 sm:h-4 flex-shrink-0">
<svg viewBox="0 0 24 24" className="w-full h-full text-white">
<path
Expand All @@ -138,11 +136,9 @@ const SocialLinks: React.FC = () => {
</div>

{/* Date Created */}
<div className="bg-[#1C1D1F] rounded p-2 sm:p-3 w-full sm:w-auto">
<span className="text-xs sm:text-sm">Date created </span>
<span className="text-white ml-2 text-xs sm:text-sm">
May 15, 2025
</span>
<div className="bg-[#1C1D1F] w-fit rounded-md py-2 px-3.5 sm:p-3 sm:w-auto">
<span className="text-sm">Date created </span>
<span className="text-white ml-2 text-sm">May 15, 2025</span>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions components/profile/NFTCard/NFTCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,17 +74,17 @@ const NFTCard: React.FC<NFTCardProps> = ({ nft, onClick }) => {
)}
</div>

<div className="">
<div className="pb-2">
<h3 className="text-white font-medium truncate mb-2 mt-1">{nft.name}</h3>

{/* Current Bid & Price */}
<div className="flex justify-between items-center mb-1">
<p className="text-[#8E9BAE] text-sm font-medium">Current Bid</p>
<p className="text-[#8E9BAE] text-sm font-medium">{nft.price.eth} ETH</p>
<p className="text-[#8E9BAE] text-[10px] sm:text-sm font-medium">Current Bid</p>
<p className="text-[#8E9BAE] text-xs sm:text-sm font-bold">{nft.price.eth} ETH</p>
</div>

{/* Likes & Time Left */}
<div className="flex justify-between items-center text-sm text-white">
<div className="hidden sm:flex justify-between items-center text-sm text-white">
<p>564 likes</p>
<p>24 minted | 1d 9h left</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/profile/NFTGrid/NFTGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const NFTGrid: React.FC<NFTGridProps> = ({
return (
<div className="space-y-6">
<div
className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 ${gridColsClass || 'lg:grid-cols-4'} gap-6`}
className={`grid grid-cols-2 md:grid-cols-3 ${gridColsClass || 'lg:grid-cols-4'} gap-3 sm:gap-6`}
aria-busy={loading ? "true" : "false"}
>
<AnimatePresence initial={false}>
Expand Down
Loading