From a137c0efb8484eacce722aa8f3505ec5ae6400c5 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli@live.cn>
Date: Sun, 28 Feb 2021 12:57:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app.scss                           |  2 +-
 src/components/branches-list/branches-list.scss   |  2 +-
 src/components/commit-logs/commit-log-list.scss   | 15 +++++++++++++++
 .../commit-logs/commit-log-list.scss.d.ts         | 12 ++++++++++++
 src/components/commit-logs/commit-log-list.tsx    | 13 +++++++++++--
 src/components/projects/project-details.scss      |  6 +++++-
 6 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 src/components/commit-logs/commit-log-list.scss.d.ts

diff --git a/src/components/app.scss b/src/components/app.scss
index b23f61a..e89936a 100644
--- a/src/components/app.scss
+++ b/src/components/app.scss
@@ -8,6 +8,6 @@
     @apply w-1/6 shadow;
   }
   main {
-    @apply flex-auto ml-px;
+    @apply flex-auto ml-px overflow-hidden;
   }
 }
diff --git a/src/components/branches-list/branches-list.scss b/src/components/branches-list/branches-list.scss
index df0fb47..16c0eee 100644
--- a/src/components/branches-list/branches-list.scss
+++ b/src/components/branches-list/branches-list.scss
@@ -1,5 +1,5 @@
 .component {
-  @apply self-stretch;
+  @apply bg-red-200;
 }
 .item {
   @apply bg-gray-50 p-2 text-red-400 border-red-500 my-px
diff --git a/src/components/commit-logs/commit-log-list.scss b/src/components/commit-logs/commit-log-list.scss
index e69de29..5160ac4 100644
--- a/src/components/commit-logs/commit-log-list.scss
+++ b/src/components/commit-logs/commit-log-list.scss
@@ -0,0 +1,15 @@
+.component {
+  @apply bg-white flex-auto;
+}
+.list {
+  @apply bg-gray-100 overflow-auto max-h-full;
+}
+.item {
+  @apply bg-white text-gray-700;
+  @apply py-2 px-4 my-px;
+  @apply hover:bg-gray-50;
+
+  time {
+    @apply text-sm text-gray-400;
+  }
+}
diff --git a/src/components/commit-logs/commit-log-list.scss.d.ts b/src/components/commit-logs/commit-log-list.scss.d.ts
new file mode 100644
index 0000000..7e35d88
--- /dev/null
+++ b/src/components/commit-logs/commit-log-list.scss.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace CommitLogListScssNamespace {
+  export interface ICommitLogListScss {
+    component: string;
+    item: string;
+    list: string;
+  }
+}
+
+declare const CommitLogListScssModule: CommitLogListScssNamespace.ICommitLogListScss;
+
+export = CommitLogListScssModule;
diff --git a/src/components/commit-logs/commit-log-list.tsx b/src/components/commit-logs/commit-log-list.tsx
index 3fdd65b..c546c65 100644
--- a/src/components/commit-logs/commit-log-list.tsx
+++ b/src/components/commit-logs/commit-log-list.tsx
@@ -1,6 +1,7 @@
 import { LogList, Project, ListLogsArgs } from '../../generated/graphql';
 import { h } from 'preact';
 import { gql, useQuery } from '@apollo/client';
+import styles from './commit-log-list.scss';
 
 const LIST_LOGS = gql`
   query ListLogs($args: ListLogsArgs!) {
@@ -32,12 +33,20 @@ export const CommitLogList = ({ project, branch }: Props) => {
 
   const list = data?.listLogs?.all?.map(log => {
     return (
-      <li key={log.hash}>
+      <li className={styles.item} key={log.hash}>
         <h4>{log.message}</h4>
         <time dateTime={log.date}>{log.date}</time>
       </li>
     );
   });
 
-  return loading ? <span>Loading...</span> : <ol>{list}</ol>;
+  return (
+    <section className={styles.component}>
+      {loading ? (
+        <span>Loading...</span>
+      ) : (
+        <ol className={styles.list}>{list}</ol>
+      )}
+    </section>
+  );
 };
diff --git a/src/components/projects/project-details.scss b/src/components/projects/project-details.scss
index c798d95..ca8dcfd 100644
--- a/src/components/projects/project-details.scss
+++ b/src/components/projects/project-details.scss
@@ -1,4 +1,5 @@
 .projectDetails {
+  @apply h-full flex flex-col;
   header {
     @apply bg-red-400 text-gray-50 p-2;
     @apply grid grid-cols-2 grid-rows-2;
@@ -20,5 +21,8 @@
 }
 
 .body {
-  @apply flex;
+  @apply flex items-stretch flex-auto overflow-hidden;
+  & > *:not(:first-child) {
+    @apply ml-px;
+  }
 }