From c7ce6a1bca3ca0e563705e46a4db881e389433a9 Mon Sep 17 00:00:00 2001
From: Dreamacro <305009791@qq.com>
Date: Tue, 25 Sep 2018 15:54:50 +0800
Subject: [PATCH] Improve: make <Logs> responsive

---
 src/containers/Logs/index.tsx  | 12 +-----------
 src/containers/Logs/style.scss |  5 ++++-
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/containers/Logs/index.tsx b/src/containers/Logs/index.tsx
index cfac46e..57cd17f 100644
--- a/src/containers/Logs/index.tsx
+++ b/src/containers/Logs/index.tsx
@@ -14,19 +14,16 @@ interface Log {
 interface LogsProps extends I18nProps {}
 
 interface LogsState {
-    listHeight: number
     logs: Log[]
 }
 
 class Logs extends React.Component<LogsProps, LogsState> {
     state: LogsState = {
-        listHeight: 0,
         logs: []
     }
 
     private listRef = React.createRef<HTMLUListElement>()
     componentDidMount () {
-        this.setListHeight()
         const logs: Log[] = Array.from(
             { length: 32 },
             () => ({ type: 'info', payload: 'google.com match DomainSuffix using Proxy', time: new Date() })
@@ -34,25 +31,18 @@ class Logs extends React.Component<LogsProps, LogsState> {
         this.setState({ logs }, () => this.scrollToBottom())
     }
 
-    setListHeight = () => {
-        this.setState({
-            listHeight: document.querySelector('.logs-card').clientHeight - 30
-        })
-    }
-
     scrollToBottom = () => {
         const ul = this.listRef.current
         ul.scrollTop = ul.scrollHeight
     }
 
     render () {
-        const listHeight = { height: this.state.listHeight }
         const { t } = this.props
         return (
             <div className="page">
                 <Header title={ t('title') } />
                 <Card className="logs-card">
-                    <ul className="logs-panel" style={listHeight} ref={this.listRef}>
+                    <ul className="logs-panel" ref={this.listRef}>
                         {
                             this.state.logs.map(
                                 log => (
diff --git a/src/containers/Logs/style.scss b/src/containers/Logs/style.scss
index 17e214f..5f594e0 100644
--- a/src/containers/Logs/style.scss
+++ b/src/containers/Logs/style.scss
@@ -1,4 +1,6 @@
 .logs-card {
+    display: flex;
+    flex-direction: column;
     flex: 1;
     margin-top: 25px;
 }
@@ -6,7 +8,8 @@
 .logs-panel {
     display: flex;
     flex-direction: column;
-    height: 0;
+    flex-grow: 1;
+    flex-basis: 0;
     list-style: none;
     padding: 10px;
     border-radius: 2px;