Increased resolution responsiveness for My Collections

This commit is contained in:
Serkan Reis 2023-04-04 10:45:13 +03:00
parent 8fe784fdf6
commit ffd4b729e4

View File

@ -85,7 +85,9 @@ const CollectionList: NextPage = () => {
<div> <div>
{myStandardCollections.length > 0 && ( {myStandardCollections.length > 0 && (
<div className="bg-transparent"> <div className="bg-transparent">
<span className="text-2xl font-bold text-blue-300">Standard Collections</span> <span className="ml-6 text-2xl font-bold text-blue-300 underline underline-offset-4">
Standard Collections
</span>
<table className="table w-full"> <table className="table w-full">
<thead> <thead>
<tr> <tr>
@ -98,7 +100,7 @@ const CollectionList: NextPage = () => {
{myStandardCollections.map((collection: any, index: any) => { {myStandardCollections.map((collection: any, index: any) => {
return ( return (
<tr key={index}> <tr key={index}>
<td className="w-[55%] bg-black"> <td className="w-[40%] bg-black">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="avatar"> <div className="avatar">
<div className="w-28 h-28 mask mask-squircle"> <div className="w-28 h-28 mask mask-squircle">
@ -115,12 +117,16 @@ const CollectionList: NextPage = () => {
</div> </div>
</div> </div>
<div className="pl-2"> <div className="pl-2">
<p className="overflow-auto max-w-xs font-bold no-scrollbar ">{collection.name}</p> <p className="overflow-auto font-bold lg:max-w-[160px] xl:max-w-[220px] 2xl:max-w-xs no-scrollbar ">
<p className="max-w-xs text-sm truncate opacity-50">{collection.description}</p> {collection.name}
</p>
<p className="text-sm truncate opacity-50 lg:max-w-[160px] xl:max-w-[220px] 2xl:max-w-xs">
{collection.description}
</p>
</div> </div>
</div> </div>
</td> </td>
<td className="w-[35%] bg-black"> <td className="w-[50%] bg-black">
<div className="flex flex-row items-center space-x-3"> <div className="flex flex-row items-center space-x-3">
Minter: Minter:
<span className="ml-2"> <span className="ml-2">
@ -188,7 +194,9 @@ const CollectionList: NextPage = () => {
)} )}
{myOneOfOneCollections.length > 0 && ( {myOneOfOneCollections.length > 0 && (
<div className="mt-4"> <div className="mt-4">
<span className="text-2xl font-bold text-blue-300">1/1 Collections</span> <span className="ml-6 text-2xl font-bold text-blue-300 underline underline-offset-4">
1/1 Collections
</span>
<table className="table w-full"> <table className="table w-full">
<thead> <thead>
<tr> <tr>
@ -201,7 +209,7 @@ const CollectionList: NextPage = () => {
{myOneOfOneCollections.map((collection: any, index: any) => { {myOneOfOneCollections.map((collection: any, index: any) => {
return ( return (
<tr key={index}> <tr key={index}>
<td className="w-[55%] bg-black"> <td className="w-[40%] bg-black">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="avatar"> <div className="avatar">
<div className="w-28 h-28 mask mask-squircle"> <div className="w-28 h-28 mask mask-squircle">
@ -218,12 +226,16 @@ const CollectionList: NextPage = () => {
</div> </div>
</div> </div>
<div className="pl-2"> <div className="pl-2">
<p className="overflow-auto max-w-xs font-bold no-scrollbar ">{collection.name}</p> <p className="overflow-auto font-bold lg:max-w-[160px] xl:max-w-[220px] 2xl:max-w-xs no-scrollbar ">
<p className="max-w-xs text-sm truncate opacity-50">{collection.description}</p> {collection.name}
</p>
<p className="text-sm truncate opacity-50 lg:max-w-[160px] xl:max-w-[220px] 2xl:max-w-xs">
{collection.description}
</p>
</div> </div>
</div> </div>
</td> </td>
<td className="w-[35%] bg-black"> <td className="w-[50%] bg-black">
<div className="flex flex-row items-center space-x-3"> <div className="flex flex-row items-center space-x-3">
Minter: Minter:
<span className="ml-2"> <span className="ml-2">