Skip to content

Commit

Permalink
mobile design improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@starknetdev
starknetdev committed Sep 15, 2023
1 parent 39352fc commit 92f3ae0
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 60 deletions.
114 changes: 58 additions & 56 deletions ui/src/app/components/marketplace/MarketplaceTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,63 +149,65 @@ const MarketplaceTable = ({
</tbody>
</table>
</div>
<div className="sm:hidden h-full">
{(() => {
const item = sortedMarketLatestItems[showEquipQ ?? 0];
return (
<div
className={`${
showEquipQ !== null ? "" : "hidden"
} w-full m-auto h-full flex flex-row items-center justify-center gap-2`}
>
<p>{`Equip ${item?.item} ?`}</p>
<Button
onClick={() => {
const newPurchases = [
...purchaseItems,
{
item:
getKeyFromValue(gameData.ITEMS, item?.item ?? "") ??
"0",
equip: "1",
},
];
setPurchaseItems(newPurchases);
upgradeHandler(undefined, undefined, newPurchases);
setShowEquipQ(null);
}}
{showEquipQ && (
<div className="sm:hidden h-full">
{(() => {
const item = sortedMarketLatestItems[showEquipQ ?? 0];
return (
<div
className={`${
showEquipQ !== null ? "" : "hidden"
} w-full m-auto h-full flex flex-row items-center justify-center gap-2`}
>
Yes
</Button>
<Button
onClick={() => {
const newPurchases = [
...purchaseItems,
{
item:
getKeyFromValue(gameData.ITEMS, item?.item ?? "") ??
"0",
equip: "0",
},
];
setPurchaseItems(newPurchases);
upgradeHandler(undefined, undefined, newPurchases);
setShowEquipQ(null);
}}
>
No
</Button>
<Button
onClick={() => {
setShowEquipQ(null);
}}
>
Cancel
</Button>
</div>
);
})()}
</div>
<p>{`Equip ${item?.item} ?`}</p>
<Button
onClick={() => {
const newPurchases = [
...purchaseItems,
{
item:
getKeyFromValue(gameData.ITEMS, item?.item ?? "") ??
"0",
equip: "1",
},
];
setPurchaseItems(newPurchases);
upgradeHandler(undefined, undefined, newPurchases);
setShowEquipQ(null);
}}
>
Yes
</Button>
<Button
onClick={() => {
const newPurchases = [
...purchaseItems,
{
item:
getKeyFromValue(gameData.ITEMS, item?.item ?? "") ??
"0",
equip: "0",
},
];
setPurchaseItems(newPurchases);
upgradeHandler(undefined, undefined, newPurchases);
setShowEquipQ(null);
}}
>
No
</Button>
<Button
onClick={() => {
setShowEquipQ(null);
}}
>
Cancel
</Button>
</div>
);
})()}
</div>
)}
</>
);
};
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/components/start/Spawn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const Spawn = ({ formData, spawn, handleBack }: SpawnProps) => {
</span>

{!isWrongNetwork && (
<div className="absolute text-xs sm:text-xl leading-normal sm:leading-loose z-10 top-1/4">
<div className="absolute text-xs text-center sm:text-start sm:text-xl leading-normal sm:leading-loose z-10 top-1/4">
<TypeAnimation
sequence={[battle]}
wrapper="span"
Expand Down Expand Up @@ -130,7 +130,7 @@ export const Spawn = ({ formData, spawn, handleBack }: SpawnProps) => {
)}
</div>
<div className="absolute bottom-10 left-0 right-0 flex flex-col items-center gap-4 z-10 pb-8">
<Button size={"xs"} variant={"default"} onClick={handleBack}>
<Button size={"sm"} variant={"default"} onClick={handleBack}>
Back
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,7 @@ export default function Home() {
)}
</span>
<div className="flex flex-row items-center self-end gap-1 flex-wrap">
<button className="flex items-center sm:h-10 sm:w-20 px-1 py-1 sm:py-2 text-xs sm:text-lg bg-terminal-black border border-terminal-green hover:bg-terminal-green/20 hover:animate-pulse text-terminal-green">
<button className="flex items-center sm:h-10 sm:w-20 px-1 py-1 sm:py-2 text-xs sm:text-lg bg-terminal-black border border-terminal-green hover:bg-terminal-green/20 sm:hover:animate-pulse text-terminal-green">
<span className="flex flex-row items-center justify-between w-full">
<Lords className="self-center h-4 w-4 sm:w-6 sm:h-6 fill-current" />
<p>
Expand Down Expand Up @@ -426,7 +426,7 @@ export default function Home() {
setDisplayCart(!displayCart);
clickPlay();
}}
className="relative flex flex-row items-center justify-center gap-2 p-1 sm:p-2 bg-black border border-terminal-green text-xs sm:text-base"
className="relative flex flex-row items-center justify-center gap-2 p-1 sm:p-2 bg-black border border-terminal-green text-xs sm:text-base w-9"
>
<CartIconSimple className="w-4 h-4" />
<p className="hidden sm:block">
Expand Down

1 comment on commit 92f3ae0

@vercel
Copy link

@vercel vercel bot commented on 92f3ae0 Sep 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

loot-survivor – ./

loot-survivor-loot-bibliotheca.vercel.app
loot-survivor.vercel.app
loot-survivor-git-main-loot-bibliotheca.vercel.app
beta-survivor.realms.world
survivor.realms.world

Please sign in to comment.