Merged in bugfix/repos_in_overview_clickable (pull request #141)

Bugfix/repos in overview clickable
This commit is contained in:
Florian Scholdei
2019-01-02 14:50:08 +00:00
2 changed files with 17 additions and 11 deletions

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,12 +98,12 @@ 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} />
</figure> </figure>
<div className="media-content"> <div className={classNames("media-content", "text-box")}>
<div className="content"> <div className="content">
<p className="is-marginless"> <p className="is-marginless">
<strong>{repository.name}</strong> <strong>{repository.name}</strong>

View File

@@ -112,14 +112,12 @@ $fa-font-path: "webfonts";
} }
} }
.media { .text-box {
.media-content { width: calc(50% - 0.75rem);
width: calc(50% - 0.75rem); .shorten-text {
.shorten-text { overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; white-space: nowrap;
white-space: nowrap;
}
} }
} }