Update build details - show author

kevinanew · Mar 19, 2021 · 0531b10 · 0531b10
1 parent 34c1705
commit 0531b10
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 8 deletions.
diff --git a/web/src/screens/repo/screens/build/components/details.js b/web/src/screens/repo/screens/build/components/details.js
@@ -16,9 +16,15 @@ export class Details extends Component {
 
         <section className={styles.message} style={{ whiteSpace: "pre-line" }}>
           {build.message}
+
         </section>
 
         <section>
+          <div className={styles.author}>
+            <img src={build.author_avatar} />
+            <span>{build.author}</span>
+          </div>
+
           <BuildTime
             start={build.started_at || build.created_at}
             finish={build.finished_at}

diff --git a/web/src/screens/repo/screens/build/components/details.less b/web/src/screens/repo/screens/build/components/details.less
@@ -15,3 +15,20 @@
 		}
 	}
 }
+
+.author {
+	display: flex;
+	height: 30px;
+	align-items: center;
+}
+
+.author img {
+	border-radius: 50%;
+	height: 16px;
+	width: 16px;
+	margin-right: 10px;
+}
+
+.author span {
+	font-size: 14px;
+}
diff --git a/web/src/screens/repo/screens/builds/components/list.js b/web/src/screens/repo/screens/builds/components/list.js
@@ -17,7 +17,7 @@ export class Item extends Component {
     return (
       <div className={styles.item}>
         <div className={styles.icon}>
-          <img src={build.author_avatar} />
+          <img src={build.author_avatar} title={build.author} />
         </div>
 
         <div className={styles.body}>

diff --git a/web/src/screens/repo/screens/builds/components/list.less b/web/src/screens/repo/screens/builds/components/list.less
@@ -99,17 +99,17 @@
 }
 
 .icon {
-	margin-left: 10px;
-	margin-right: 20px;
-	max-width: 22px;
-	min-width: 22px;
-	width: 22px;
+	margin-left: 8px;
+	margin-right: 18px;
+	max-width: 26px;
+	min-width: 26px;
+	width: 26px;
 }
 
 .icon img {
 	border-radius: 50%;
-	height: 22px;
-	width: 22px;
+	height: 26px;
+	width: 26px;
 }
 
 .status {