git.iko.soy/sphinx
on master help sign in
mobile: more cleanup for listings
commit9e0c89f9f613be98f0b05087f3b37c5611161f60 authorHunter Miller <hunter@hmiller.dev> dateSat 6 Aug 2022, 17:14 (4 years ago) parentf9ed835
2 files changed+42−23
compare with master
unifiedsplit
ui/src/components/ListingImage.tsx+26 ui/src/components/Listings.tsx+16−23
ui/src/components/ListingImage.tsxnew file+26
@@ -0,0 +1,26 @@
1+import { uxToHex } from '@urbit/api';
2+import cn from 'classnames';
3+import React from 'react';
4+
5+interface ListingImageProps {
6+ image: string;
7+ color: string;
8+ className?: string;
9+ imageClasses?: string;
10+ colorClasses?: string;
11+}
12+
13+export const ListingImage = ({ image, color, className, imageClasses, colorClasses }: ListingImageProps) => {
14+ return image ? (
15+ <img
16+ src={image}
17+ className={cn('object-cover', className, imageClasses)}
18+ style={{ backgroundColor: color ? `#${uxToHex(color)}` : undefined }}
19+ />
20+ ) : (
21+ <div
22+ className={cn('bg-rosy/20', className, colorClasses)}
23+ style={{ backgroundColor: color ? `#${uxToHex(color)}` : undefined }}
24+ />
25+ )
26+}
ui/src/components/Listings.tsx+16−23
@@ -4,6 +4,7 @@ import cn from 'classnames';
44import React from 'react';
55import { usePals } from '../state/pals';
66import { Listing } from '../types/sphinx';
7+import { ListingImage } from './ListingImage';
78
89interface ListingsProps {
910 listings: Listing[];
@@ -36,36 +37,28 @@ export const Listings = ({ listings, remove, className }: ListingsProps) => {
3637 {listings && listings.map(l => (
3738 <li key={l.hash}>
3839 <article className='group-1 flex w-full'>
39− {l.post.image ? (
40− <img
41− src={l.post.image}
42− className="w-24 h-24 object-cover rounded-xl"
43− style={{ backgroundColor: l.post.color ? `#${uxToHex(l.post.color)}` : undefined }}
44− />
45− ) : (
46− <div
47− className='w-24 h-24 bg-rosy/20 rounded-xl'
48− style={{ backgroundColor: l.post.color ? `#${uxToHex(l.post.color)}` : undefined }}
49− />
50− )}
51− <div className='flex-1 ml-4'>
52− <a className='block w-full mb-2 hover:text-rosy transition-colors' href={l.post.link}>
53− <h2 className='block font-semibold text-lg leading-none mb-1'>{l.post.title}</h2>
54− <div className='font-mono text-xs space-x-3'>
55− <strong>%{l.post.type}</strong>
56− <span>{l.post.link.replace('web+urbitgraph://', '')}</span>
57− </div>
58− </a>
40+ <ListingImage {...l.post} className="hidden sm:inline-block w-24 h-24 rounded-xl" />
41+ <div className='flex-1 min-w-0 sm:ml-4'>
42+ <div className='flex items-center'>
43+ <ListingImage {...l.post} className="flex-none sm:hidden w-14 h-14 mr-2 mb-2 rounded-xl" />
44+ <a className='flex-1 min-w-0 mb-2 hover:text-rosy transition-colors' href={l.post.link}>
45+ <h2 className='block font-semibold text-lg leading-none mb-1'>{l.post.title}</h2>
46+ <div className='font-mono text-xs space-x-3 truncate'>
47+ <strong>%{l.post.type}</strong>
48+ <span>{l.post.link.replace('web+urbitgraph://', '')}</span>
49+ </div>
50+ </a>
51+ </div>
5952 <p className='mb-2 text-sm'>{l.post.description}</p>
60− <div className='flex flex-col items-start sm:flex-row sm:items-center w-full font-mono text-xs text-zinc-500 opacity-0 group-1-hover:opacity-100 transition-opacity'>
53+ <div className='flex flex-col items-start sm:flex-row sm:items-center w-full font-mono text-xs text-zinc-500 sm:opacity-0 group-1-hover:opacity-100 transition-opacity'>
6154 <div className='flex items-center'>
6255 <span className='inline-flex items-center'>
6356 <span className='font-semibold font-sans mr-1'>by:</span>
6457 <span>{l.source}</span>
6558 {outgoing[deSig(l.source) || ''] && (
6659 <button className='group-2 relative inline-flex items-center justify-center px-2 hover:text-rosy' aria-label='Remove pal' title="Remove Pal" onClick={() => removePal(deSig(l.source) || '')}>
67− <UsersIcon className='h-4 w-4 group-2-hover:opacity-0' />
68− <UserRemoveIcon className='absolute h-4 w-4 opacity-0 group-2-hover:opacity-100' />
60+ <UsersIcon className='h-4 w-4 opacity-0 sm:opacity-100 group-2-hover:opacity-0' />
61+ <UserRemoveIcon className='absolute h-4 w-4 sm:opacity-0 group-2-hover:opacity-100' />
6962 </button>
7063 )}
7164 </span>