git.iko.soy/urbit.org
on master help sign in
group, id, globals.css: address @gordoncc review (#1418)
commit356af5e7bdc60cebafdb90e1ed40d15f9e702bd2 authorMatilde Park <matilde.park@urbit.org> dateSat 23 Apr 2022, 20:51 (5 years ago) parent0458f07
4 files changed+41−12
compare with master
unifiedsplit
components/CopyLink.js+1−1 pages/group/[[...group]].js+8−5 pages/id/[id].js+29−6 styles/globals.css+3
components/CopyLink.js+1−1
@@ -53,7 +53,7 @@ export default function CopyLink({ content, className }) {
5353
5454 return (
5555 <button
56− className={`bg-black p-4 rounded-xl max-w-fit button-lg text-white flex items-center justify-center space-x-4`}
56+ className={`bg-wall-600 p-4 rounded-xl button-lg text-white flex items-center justify-center space-x-4 ${className}`}
5757 onClick={() => copy()}
5858 >
5959 <h4 className="">{copyStatus === "copied" ? "Copied" : "Copy Link"}</h4>
pages/group/[[...group]].js+8−5
@@ -47,24 +47,27 @@ const GroupPage = ({ data, markdown, params }) => {
4747 <p>Urbit Group</p>
4848 </div>
4949 </div>
50− <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between">
51− <div className="flex flex-col">
50+ <div className="flex flex-wrap md:flex-nowrap justify-between">
51+ <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
5252 <p className="font-bold text-wall-400">Group Type</p>
5353 <p>{data.type ? data.type : "Unknown"}</p>
5454 </div>
55− <div className="flex flex-col">
55+ <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
5656 <p className="font-bold text-wall-400">Members</p>
5757 <p>
5858 {data.participant_range ? data.participant_range : "Unknown"}
5959 </p>
6060 </div>
61− <div className="flex flex-col">
61+ <div className="flex flex-col basis-1/2 md:basis-auto">
6262 <p className="font-bold text-wall-400">Host</p>
6363 <Link href={`/id/${group[0]}`}>
6464 <a className="type-ui font-mono text-green-400">{group[0]}</a>
6565 </Link>
6666 </div>
67− <CopyLink content={data.shortcode ? data.shortcode : data.title} />
67+ <CopyLink
68+ className="basis-1/2 md:basis-auto"
69+ content={data.shortcode ? data.shortcode : data.title}
70+ />
6871 </div>
6972 {(data.description !== "A group on Urbit." || markdown) && (
7073 <div className="flex flex-col space-y-4">
pages/id/[id].js+29−6
@@ -56,21 +56,21 @@ const IdPage = ({ data, markdown, network, params }) => {
5656 <p>Urbit ID</p>
5757 </div>
5858 </div>
59− <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between">
60− <div className="flex flex-col">
59+ <div className="flex flex-wrap md:flex-nowrap justify-between">
60+ <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
6161 <p className="font-bold text-wall-400">ID Type</p>
6262 <p className="font-mono">
6363 {ob.clan(id).slice(0, 1).toUpperCase() + ob.clan(id).slice(1)}
6464 </p>
6565 </div>
66− <div className="flex flex-col">
66+ <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
6767 <p className="font-bold text-wall-400">Status</p>
6868 <p className="font-mono">
6969 {network ? "Spawned/Owned" : "Unspawned"}
7070 </p>
7171 </div>
7272 {!isGalaxy && (
73− <div className="flex flex-col">
73+ <div className="flex flex-col basis-1/2 md:basis-auto">
7474 <p className="font-bold text-wall-400">Parent</p>
7575 <Link href={`/id/${parent}`}>
7676 <a className="type-ui font-mono text-green-400">{parent}</a>
@@ -78,7 +78,7 @@ const IdPage = ({ data, markdown, network, params }) => {
7878 </div>
7979 )}
8080 {galaxy && (
81− <div className="flex flex-col">
81+ <div className="flex flex-col basis-1/2 md:basis-auto">
8282 <p className="font-bold text-wall-400">Galaxy</p>
8383 <Link href={`/id/${galaxy}`}>
8484 <a className="type-ui font-mono text-green-400">{galaxy}</a>
@@ -99,13 +99,36 @@ const IdPage = ({ data, markdown, network, params }) => {
9999 )}
100100 </div>
101101 )}
102+ <a
103+ className="flex items-center"
104+ target="_blank"
105+ href={`https://network.urbit.org/${id}`}
106+ >
107+ <div className="flex items-center">
108+ <svg
109+ width="32"
110+ height="32"
111+ viewBox="0 0 32 32"
112+ fill="none"
113+ xmlns="http://www.w3.org/2000/svg"
114+ >
115+ <path
116+ d="M14.56 6.39999C11.9487 6.40124 9.49503 7.65251 7.95999 9.76639C6.42623 11.8789 5.99624 14.6 6.80373 17.0838C7.61122 19.5676 9.55874 21.5139 12.0425 22.3213C14.5274 23.1275 17.2476 22.6963 19.3599 21.1613L23.4236 25.225C23.9236 25.7262 24.7348 25.7262 25.2348 25.225C25.7348 24.725 25.7348 23.9149 25.2348 23.415L21.1712 19.3513V19.35C22.3586 17.7188 22.8974 15.7049 22.6862 13.6988C22.4749 11.6926 21.5274 9.83516 20.0262 8.48764C18.5249 7.1389 16.5775 6.39513 14.5599 6.40015L14.56 6.39999ZM14.56 20.16C13.075 20.16 11.65 19.57 10.6 18.52C9.55 17.47 8.95999 16.045 8.95999 14.56C8.95999 13.075 9.55 11.65 10.6 10.6C11.65 9.55001 13.075 8.95999 14.56 8.95999C16.045 8.95999 17.47 9.55001 18.52 10.6C19.57 11.65 20.16 13.075 20.16 14.56C20.1587 16.045 19.5675 17.4675 18.5175 18.5174C17.4675 19.5674 16.045 20.1587 14.5601 20.1599L14.56 20.16Z"
117+ fill="#80D8B8"
118+ />
119+ </svg>
120+ <p className="text-green-400 font-semibold">
121+ View on Network Explorer
122+ </p>
123+ </div>
124+ </a>
102125 <hr className="text-wall-200" />
103126 <div className="flex flex-col space-y-6">
104127 <h3>
105128 Urbit is a clean-slate, peer-to-peer operating system and network.
106129 </h3>
107130 <div className="flex flex-col space-y-4">
108− <p className="text-sm font-semibold text-wall-400">
131+ <p className="text-md font-semibold text-wall-400">
109132 Learn how get your own Urbit ID.
110133 </p>
111134 {/* TODO: Joining groups guide. */}
styles/globals.css+3
@@ -83,6 +83,9 @@ code .type-code {
8383 @apply bg-wall-100 p-4 font-mono;
8484}
8585
86+.font-bold {
87+ @apply antialiased;
88+}
8689/* Utils */
8790
8891.layout-narrow {