feat(design): update UI so it looks a bit better until design is ready@@ -1,5 +1,5 @@
{
- "_generatedAtUnix": 1664248120245,
+ "_generatedAtUnix": 1664250832803,
"_hashAlgorithm": "sha1",
"_version": 2,
"islands": {
@@ -16,7 +16,7 @@
"pathSourceMap": "./public/.islands/InstantRouterIndicator.bundle.js.map"
},
"RepositoriesList": {
- "hash": "47be562dd5579c4ebcd2ea4cb32706b9423d0026",
+ "hash": "123782350476918ef2f540ddaca91ef9c82bcc8f",
"pathSource": "./app/islands/RepositoriesList.tsx",
"pathBundle": "./public/.islands/RepositoriesList.bundle.js",
"pathSourceMap": "./public/.islands/RepositoriesList.bundle.js.map"
@@ -76,11 +76,11 @@
"pathSource": "./app/views/auth/RegisterView.tsx"
},
"OrganizationDetailsView": {
- "hash": "a95d4191f2c4f1f6b83326a2ba409650faeca329",
+ "hash": "c842d33d79747b92840d89df39d71c87b212f154",
"pathSource": "./app/views/organization/OrganizationDetailsView.tsx"
},
"RepositoryBrowserView": {
- "hash": "04fa7af689f4d2cafd80991ae6d6c0e5252f42a7",
+ "hash": "b72948f5f47bc5e60bdbc08e407aad1766193d60",
"pathSource": "./app/views/repository/RepositoryBrowserView.tsx"
},
"RepositoryCommitsLogView": {
@@ -88,7 +88,7 @@
"pathSource": "./app/views/repository/RepositoryCommitsLogView.tsx"
},
"RepositoryCompareView": {
- "hash": "e3e937eec39337342b47a038b1b6f0690ca915f3",
+ "hash": "08b9f936fe0f6bfbb63b942d3bfb95cbab9a2ab5",
"pathSource": "./app/views/repository/RepositoryCompareView.tsx"
},
"RepositoryCreateView": {
@@ -96,11 +96,11 @@
"pathSource": "./app/views/repository/RepositoryCreateView.tsx"
},
"RepositoryDetailsView": {
- "hash": "07f3255d918dd9da183e98365ef33645a4f3cb6b",
+ "hash": "d8c7919f4f9923ac3c16a538f4cf3e6563ab6602",
"pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
},
"RepositoryExploreView": {
- "hash": "d4880fa895f292cc79cb544c22e4f32db4430652",
+ "hash": "5bad0d97ea8393006f1d0100c06156e091d03433",
"pathSource": "./app/views/repository/RepositoryExploreView.tsx"
},
"RepositoryForkView": {
@@ -108,15 +108,15 @@
"pathSource": "./app/views/repository/RepositoryForkView.tsx"
},
"RepositoryShowObjectView": {
- "hash": "e33872ab494e908889d95ac0090078dd0d06dc8b",
+ "hash": "51a05deb5469f34cbba8f8d138c82bf33c8011b8",
"pathSource": "./app/views/repository/RepositoryShowObjectView.tsx"
},
"UserDashboardView": {
- "hash": "5ceb83c72ad4371295e02edb29d8b63585029268",
+ "hash": "5fe630f3d49d221303a8bfc4ec8743274a26d0c3",
"pathSource": "./app/views/user/UserDashboardView.tsx"
},
"UserDetailsView": {
- "hash": "75355f83fc12f2edb254fdcec9952c759f78e3db",
+ "hash": "74a497d557f1c658e8afce96e45efd115d0d6790",
"pathSource": "./app/views/user/UserDetailsView.tsx"
}
}
@@ -4,38 +4,53 @@ import type { ReactIsland } from "@ethicdevs/react-monolith";
import React from "react";
// generated via script[generate:prisma]
import { Organization, Repository } from "@prisma/client";
+// app
+import type { WithThemeSchemeProp } from "../types";
+import { Card } from "../components/Card.styled";
+import { Grid } from "../components/Grid";
export interface RepositoriesListProps {
repositories: Array<Repository & { parentOrg: Organization }>;
}
-const RepositoriesList: ReactIsland<RepositoriesListProps> = ({
- repositories,
-}) => {
+const RepositoriesList: ReactIsland<
+ RepositoriesListProps & WithThemeSchemeProp
+> = ({ repositories, themeScheme }) => {
return (
<>
- {repositories.map((repo) => (
- <div key={repo.id}>
- <h1>
- <a href={`/${repo.parentOrg.slug}/${repo.slug}`}>
- {repo.parentOrg.displayName || repo.parentOrg.slug}
- {" / "}
- {repo.displayName || repo.slug}
- {" ∙ "}
- <span style={{ textTransform: "capitalize" }}>
- ({repo.visibility.toLowerCase()})
- </span>
- </a>
- </h1>
+ {repositories.map((repo, idx) => (
+ <Card
+ key={repo.id}
+ themeScheme={themeScheme}
+ style={{ marginTop: idx >= 1 ? 16 : 32 }}
+ >
+ <Grid.Row fluid nowrap>
+ <h1 style={{ margin: 0, flex: 1 }}>
+ <a href={`/${repo.parentOrg.slug}/${repo.slug}`}>
+ {repo.parentOrg.displayName || repo.parentOrg.slug}
+ {" / "}
+ {repo.displayName || repo.slug}
+ {" ∙ "}
+ <span style={{ textTransform: "capitalize" }}>
+ ({repo.visibility.toLowerCase()})
+ </span>
+ </a>
+ </h1>
+ {repo.isFork && (
+ <p style={{ margin: 0, marginTop: 8 }}>
+ <code>[fork]</code>
+ </p>
+ )}
+ </Grid.Row>
<div>
- <p>{repo.shortDescription}</p>
+ <p style={{ margin: 0, marginTop: 8 }}>{repo.shortDescription}</p>
{repo.lastPushedAt != null && (
<p style={{ margin: 0, marginTop: 8 }}>
- Last push: {new Date(repo.lastPushedAt).toUTCString()}
+ Last push: {new Date(repo.lastPushedAt).toLocaleString()}
</p>
)}
</div>
- </div>
+ </Card>
))}
</>
);
@@ -46,7 +46,10 @@ const OrganizationDetailsView: ReactView<OrganizationDetailsViewProps> = ({
data-islandid={`${RepositoriesList.name}$$0`}
style={{ width: "100%" }}
>
- <RepositoriesList repositories={orgRepositories} />
+ <RepositoriesList
+ repositories={orgRepositories}
+ themeScheme={commonProps.themeScheme}
+ />
</div>
</PageWrapper>
</Layout>
@@ -51,7 +51,7 @@ const RepositoryBrowserView: ReactView<RepositoryBrowserViewProps> = ({
{" / "}
{path}
</h1>
- <Grid.Col fluid style={{ marginTop: 16 }}>
+ <Grid.Col fluid style={{ marginTop: 32 }}>
{lastCommit && (
<Card
data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
@@ -30,7 +30,7 @@ const RepositoryCompareView: ReactView<RepositoryCompareViewProps> = ({
return (
<Layout {...commonProps}>
<PageWrapper>
- <h1>
+ <h1 style={{ margin: 0 }}>
<a href={`/${parentOrg.slug}`}>
{parentOrg.displayName || parentOrg.slug}
</a>
@@ -42,7 +42,11 @@ const RepositoryCompareView: ReactView<RepositoryCompareViewProps> = ({
{refA}..{refB}
</h1>
{/*getThemedCodeCss(commonProps.themeScheme)*/}
- <Grid.Col fluid data-islandid={`${RepositoryFilesDiffsList.name}$$0`}>
+ <Grid.Col
+ fluid
+ data-islandid={`${RepositoryFilesDiffsList.name}$$0`}
+ style={{ marginTop: 32 }}
+ >
<RepositoryFilesDiffsList
filesDiffs={filesDiffs}
themeScheme={commonProps.themeScheme}
@@ -62,57 +62,90 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
<Layout {...commonProps}>
<PageWrapper>
<Grid.Col fluid>
- <h1 style={{ margin: 0, marginTop: 20 }}>
- <a href={`/${parentOrg.slug}`}>
- {parentOrg.displayName || parentOrg.slug}
- </a>
- {" / "}
- <a href={`/${parentOrg.slug}/${repo.slug}`}>
- {repo.displayName || repo.slug}
- </a>
- {path != null && path.trim() !== "" && path !== "/"
- ? ` / ${path}`
- : ""}
- {" ∙ "}
- <span style={{ textTransform: "capitalize" }}>
- ({repo.visibility.toLowerCase()})
- </span>
- </h1>
- <Grid.Row nowrap fluid style={{ marginTop: 8 }}>
- <div style={{ flex: 1 }}>
- {repo.isFork && repo.forkedFromRepo != null ? (
- <h5 style={{ margin: 0 }}>
- <span>Forked From</span>
- {" ∙ "}
- <a href={`/${repo.forkedFromRepo.organization.slug}`}>
- {repo.forkedFromRepo.organization.displayName ||
- repo.forkedFromRepo.organization.slug}
- </a>
- {" / "}
- <a
- href={`/${repo.forkedFromRepo.organization.slug}/${repo.forkedFromRepo.slug}`}
- >
- {repo.forkedFromRepo.displayName ||
- repo.forkedFromRepo.slug}
- </a>
- </h5>
- ) : (
- <div />
- )}
- </div>
- <Grid.Row nowrap style={{ minWidth: 90 }}>
- <span>{repo.forks.length}</span>
- <a
- href={`/${parentOrg.slug}/${repo.slug}/fork`}
- style={{ marginLeft: 8 }}
- >
- Fork it!
+ <Grid.Row nowrap fluid alignItems={"center"}>
+ <h1 style={{ flex: 1, margin: 0 }}>
+ <a href={`/${parentOrg.slug}`}>
+ {parentOrg.displayName || parentOrg.slug}
</a>
+ {" / "}
+ <a href={`/${parentOrg.slug}/${repo.slug}`}>
+ {repo.displayName || repo.slug}
+ </a>
+ {path != null && path.trim() !== "" && path !== "/"
+ ? ` / ${path}`
+ : ""}
+ {" ∙ "}
+ <span style={{ textTransform: "capitalize" }}>
+ ({repo.visibility.toLowerCase()})
+ </span>
+ </h1>
+ <Grid.Row nowrap style={{ marginTop: 8 }}>
+ <div style={{ flex: 1 }}>
+ {repo.isFork && repo.forkedFromRepo != null ? (
+ <h5 style={{ margin: 0 }}>
+ <span>Forked From</span>
+ {" ∙ "}
+ <a href={`/${repo.forkedFromRepo.organization.slug}`}>
+ {repo.forkedFromRepo.organization.displayName ||
+ repo.forkedFromRepo.organization.slug}
+ </a>
+ {" / "}
+ <a
+ href={`/${repo.forkedFromRepo.organization.slug}/${repo.forkedFromRepo.slug}`}
+ >
+ {repo.forkedFromRepo.displayName ||
+ repo.forkedFromRepo.slug}
+ </a>
+ </h5>
+ ) : (
+ <div />
+ )}
+ </div>
+ <Grid.Row nowrap style={{ minWidth: 90 }}>
+ <span>{repo.forks.length}</span>
+ <a
+ href={`/${parentOrg.slug}/${repo.slug}/fork`}
+ style={{ marginLeft: 8 }}
+ >
+ Fork it!
+ </a>
+ </Grid.Row>
</Grid.Row>
</Grid.Row>
</Grid.Col>
- <Grid.Row nowrap fluid style={{ marginTop: 32 }}>
- <Grid.Col fluid flex={1}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: `
+ @media only screen and (max-width: 768px) {
+ .mobile-column {
+ flex-flow: column nowrap;
+ }
+
+ .mobile-full-width {
+ min-width: 100%;
+ width: 100%;
+ max-width: 100%;
+ }
+
+ .mobile-column > div {
+ margin-left: 0;
+ }
+ }
+ `,
+ }}
+ />
+ <Grid.Row
+ nowrap
+ fluid
+ style={{ marginTop: 32 }}
+ gap={16}
+ className={"mobile-column mobile-full-width"}
+ >
+ <Grid.Col
+ fluid
+ style={{ maxWidth: "calc(100% - 30%)" }}
+ className={"mobile-full-width"}
+ >
{repoHead == null || lastCommit == null ? (
<Card
data-islandid={`${RepositoryInitialSetup.name}$$0`}
@@ -170,7 +203,7 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
</div>
)}
</Grid.Col>
- <Grid.Col flex={0.3} nowrap style={{ marginLeft: 24 }}>
+ <Grid.Col flex={0.3} nowrap style={{ minWidth: 320, width: "100%" }}>
<Card
style={{ width: "100%" }}
themeScheme={commonProps.themeScheme}
@@ -22,12 +22,17 @@ const RepositoryExploreView: ReactView<RepositoryExploreViewProps> = ({
<Layout {...commonProps}>
<PageWrapper>
<h1>Explore public repositories</h1>
- <h2 style={{opacity:0.67}}>Discover your next project to contribute to!</h2>
+ <h2 style={{ opacity: 0.67 }}>
+ Discover your next project to contribute to!
+ </h2>
<div
data-islandid={`${RepositoriesList.name}$$0`}
style={{ width: "100%" }}
>
- <RepositoriesList repositories={repositories} />
+ <RepositoriesList
+ repositories={repositories}
+ themeScheme={commonProps.themeScheme}
+ />
</div>
</PageWrapper>
</Layout>
@@ -12,7 +12,7 @@ import type {
} from "../../types";
import { Card, Layout, PageWrapper } from "../../components";
// app islands
-import Code, {getThemedCodeCss } from "../../islands/Code";
+import Code, { getThemedCodeCss } from "../../islands/Code";
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
import RepositoryFilesDiffsList from "../../islands/RepositoryFilesDiffsList";
@@ -46,7 +46,7 @@ const RepositoryShowObjectView: ReactView<RepositoryShowObjectViewProps> = ({
</h1>
<Card
data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
- style={{ width: "100%", marginTop: 32 }}
+ style={{ width: "100%", marginTop: 32, padding: 8 }}
themeScheme={commonProps.themeScheme}
>
<RepositoryCommitSummaryLine
@@ -24,12 +24,17 @@ const UserDashboardView: ReactView<UserDashboardViewProps> = ({
<Layout {...commonProps}>
<PageWrapper>
<h1>Hey {currentUser.displayName || currentUser.username}, welcome!</h1>
- <h2 style={{opacity:0.67}}>Repositories you own and/or contribute to</h2>
+ <h2 style={{ opacity: 0.67 }}>
+ Repositories you own and/or contribute to
+ </h2>
<div
data-islandid={`${RepositoriesList.name}$$0`}
style={{ width: "100%" }}
>
- <RepositoriesList repositories={repositories} />
+ <RepositoriesList
+ repositories={repositories}
+ themeScheme={commonProps.themeScheme}
+ />
</div>
</PageWrapper>
</Layout>
@@ -26,7 +26,7 @@ const UserDetailsView: ReactView<UserDetailsViewProps> = ({
<Layout {...commonProps}>
<PageWrapper>
<h1>{user.displayName || user.username}</h1>
- <h2 style={{opacity:0.67}}>
+ <h2 style={{ opacity: 0.67 }}>
{currentUser != null && currentUser.id === user.id
? "Your repositories"
: "Public repositories from this user"}
@@ -35,7 +35,10 @@ const UserDetailsView: ReactView<UserDetailsViewProps> = ({
data-islandid={`${RepositoriesList.name}$$0`}
style={{ width: "100%" }}
>
- <RepositoriesList repositories={repositories} />
+ <RepositoriesList
+ repositories={repositories}
+ themeScheme={commonProps.themeScheme}
+ />
</div>
</PageWrapper>
</Layout>