repository link should be clickable everywhere in its box

This commit is contained in:
Maren Süwer
2018-12-20 16:45:38 +01:00
parent fe9346fee6
commit 2f6eae4fac

View File

@@ -9,7 +9,12 @@ import classNames from "classnames";
import RepositoryAvatar from "./RepositoryAvatar"; import RepositoryAvatar from "./RepositoryAvatar";
const styles = { const styles = {
overlay: { overlayFullColumn: {
position: "absolute",
height: "calc(120px - 0.5rem)",
width: "calc(100% - 1.5rem)"
},
overlayHalfColumn: {
position: "absolute", position: "absolute",
height: "calc(120px - 1.5rem)", height: "calc(120px - 1.5rem)",
width: "calc(50% - 3rem)" width: "calc(50% - 3rem)"
@@ -80,6 +85,9 @@ class RepositoryEntry extends React.Component<Props> {
const { repository, classes, fullColumnWidth } = this.props; const { repository, classes, fullColumnWidth } = this.props;
const repositoryLink = this.createLink(repository); const repositoryLink = this.createLink(repository);
const halfColumn = fullColumnWidth ? "is-full" : "is-half"; const halfColumn = fullColumnWidth ? "is-full" : "is-half";
const overlayLinkClass = fullColumnWidth
? classes.overlayFullColumn
: classes.overlayHalfColumn;
return ( return (
<div <div
className={classNames( className={classNames(
@@ -90,7 +98,7 @@ class RepositoryEntry extends React.Component<Props> {
halfColumn halfColumn
)} )}
> >
<Link className={classNames(classes.overlay)} to={repositoryLink} /> <Link className={classNames(overlayLinkClass)} to={repositoryLink} />
<article className={classNames("media", classes.inner)}> <article className={classNames("media", classes.inner)}>
<figure className={classNames(classes.centerImage, "media-left")}> <figure className={classNames(classes.centerImage, "media-left")}>
<RepositoryAvatar repository={repository} /> <RepositoryAvatar repository={repository} />