From 6d0146f26721456914ffd7232f84b000afd401c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= <rene.pfeuffer@cloudogu.com>
Date: Wed, 19 Sep 2018 09:49:24 +0200
Subject: [PATCH] Adapt layout to next.scm-manager.org

---
 scm-ui/public/locales/en/changesets.json      |  3 +-
 .../src/changesets/components/ChangesetRow.js | 44 +++++++++++--------
 .../changesets/components/ChangesetTable.js   |  5 ++-
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/scm-ui/public/locales/en/changesets.json b/scm-ui/public/locales/en/changesets.json
index 6628fcf62f..8c804d8f62 100644
--- a/scm-ui/public/locales/en/changesets.json
+++ b/scm-ui/public/locales/en/changesets.json
@@ -3,7 +3,8 @@
     "id": "ID",
     "description": "Description",
     "contact": "Contact",
-    "date": "Date"
+    "date": "Date",
+    "summary": "Changeset {{id}} committed at {{time}}"
   },
   "author": {
     "name": "Author",
diff --git a/scm-ui/src/changesets/components/ChangesetRow.js b/scm-ui/src/changesets/components/ChangesetRow.js
index 1c72300459..9892b0eb34 100644
--- a/scm-ui/src/changesets/components/ChangesetRow.js
+++ b/scm-ui/src/changesets/components/ChangesetRow.js
@@ -2,7 +2,7 @@
 import React from "react";
 import type {Changeset} from "@scm-manager/ui-types";
 import classNames from "classnames";
-import {Link} from "react-router-dom";
+import {translate} from "react-i18next";
 import ChangesetAvatar from "./ChangesetAvatar";
 import injectSheet from "react-jss";
 
@@ -17,6 +17,7 @@ const styles = {
 
 type Props = {
   changeset: Changeset,
+  t: any,
   classes: any
 };
 
@@ -26,38 +27,43 @@ class ChangesetRow extends React.Component<Props> {
   };
 
   render() {
-    const { changeset, classes } = this.props;
+    const { changeset, t, classes } = this.props;
     const changesetLink = this.createLink(changeset);
+    const authorLine = (
+      <>
+        {changeset.author.name}{" "}
+        <a
+          className="is-hidden-mobile"
+          href={"mailto:" + changeset.author.mail}
+        >
+          &lt;
+          {changeset.author.mail}
+          &gt;
+        </a>
+      </>
+    );
     // todo: i18n
     return (
-      <div className={classNames("box", "box-link-shadow", classes.outer)}>
-        <Link className={classes.overlay} to={changesetLink} />
         <article className={classNames("media", classes.inner)}>
           <figure className="media-left">
             <ChangesetAvatar changeset={changeset} />
           </figure>
           <div className="media-content">
             <div className="content">
-              <p>
-                <p className="is-size-7">
-                  Changeset {changeset.id} commited at {changeset.date}
-                </p>
-                <p className="is-size-7">
-                  {changeset.author.name}{" "}
-                  <a href={"mailto:" + changeset.author.mail}>
-                    &lt;
-                    {changeset.author.mail}
-                    &gt;
-                  </a>
-                </p>
-                <p>{changeset.description}</p>
+              <p className="is-ellipsis-overflow">
+                {changeset.description}
+                <br />
+                {t("changeset.summary", {
+                  id: changeset.id,
+                  time: changeset.date
+                })}
               </p>
+              <p className="is-size-7">{authorLine}</p>
             </div>
           </div>
         </article>
-      </div>
     );
   }
 }
 
-export default injectSheet(styles)(ChangesetRow);
+export default injectSheet(styles)(translate("changesets")(ChangesetRow));
diff --git a/scm-ui/src/changesets/components/ChangesetTable.js b/scm-ui/src/changesets/components/ChangesetTable.js
index 2dd0d1b955..88c2b2fc3a 100644
--- a/scm-ui/src/changesets/components/ChangesetTable.js
+++ b/scm-ui/src/changesets/components/ChangesetTable.js
@@ -1,7 +1,8 @@
 // @flow
 import ChangesetRow from "./ChangesetRow";
 import React from "react";
-import type {Changeset} from "@scm-manager/ui-types";
+import type { Changeset } from "@scm-manager/ui-types";
+import classNames from "classnames";
 
 type Props = {
   changesets: Changeset[]
@@ -13,7 +14,7 @@ class ChangesetTable extends React.Component<Props> {
     const content = changesets.map((changeset, index) => {
       return <ChangesetRow key={index} changeset={changeset} />;
     });
-    return <div>{content}</div>;
+    return <div className={classNames("box")}>{content}</div>;
   }
 }