ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-11-28 11:40:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

tiles: updated alignment and sizing

Browse Source
This commit is contained in:
Hunter Miller 2021-09-13 15:27:38 -05:00
parent c96b1ec700
commit b40f6ecd26
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/grid/src/pages/Grid.tsx
View File

@ -25,7 +25,7 @@ export const Grid: FunctionComponent<GridProps> = ({ match }) => {
<main className="h-full w-full flex justify-center pt-4 md:pt-16 pb-32 relative z-0">
{!chargesLoaded && <span>Loading...</span>}
{chargesLoaded && (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 px-4 md:px-8 w-full max-w-6xl">
<div className="grid justify-center grid-cols-2 sm:grid-cols-[repeat(auto-fit,minmax(auto,250px))] gap-4 px-4 md:px-8 w-full max-w-6xl">
{charges &&
map(omit(charges, window.desk), (charge, desk) => (
<Tile key={desk} charge={charge} desk={desk} />

6
pkg/grid/src/tiles/Tile.tsx
View File

@ -38,7 +38,7 @@ export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
>
<div>
{loading ? (
<div className="absolute z-10 top-4 left-4 lg:top-8 lg:left-8 flex items-center justify-center">
<div className="absolute z-10 top-4 left-4 sm:top-8 sm:left-8 flex items-center justify-center">
<Spinner className="h-6 w-6" />
</div>
) : (
@ -47,11 +47,11 @@ export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
active={active}
menuColor={active ? menuColor : suspendMenuColor}
lightText={lightText}
className="absolute z-10 top-2.5 right-2.5 sm:top-4 sm:right-4 opacity-0 hover-none:opacity-100 focus:opacity-100 group-hover:opacity-100"
className="absolute z-10 top-2.5 right-2.5 sm:top-4 sm:right-4 opacity-0 pointer-coarse:opacity-100 hover-none:opacity-100 focus:opacity-100 group-hover:opacity-100"
/>
)}
<div
className="h4 absolute z-10 bottom-3 left-1 lg:bottom-7 lg:left-5 py-1 px-3 rounded-lg"
className="h4 absolute z-10 bottom-[8%] left-[5%] sm:bottom-7 sm:left-5 py-1 px-3 rounded-lg"
style={{ backgroundColor }}
>
<h3 className="mix-blend-hard-light">{title}</h3>