20200416_jeffrey - silenceuncrio/diary GitHub Wiki

0850

ISMS Server - task - [30%] RWD - Responsive Web Design - 4/6 ~ 6/12

commit f5fbe70516e5ee7143c9d5bd0c3ccb073bb6dd0a
Author: jeffrey <[email protected]>
Date:   Thu Apr 16 10:02:37 2020 +0800

    add a content modal
    - more link RWD design of the Google Play Console

 web/src/components/App/index.css      | 18 ++++++++++++++++--
 web/src/components/Dashboard/index.js |  1 +
 web/src/components/Map/index.js       |  1 +
 web/src/components/Setting/index.js   |  1 +
 web/src/components/Topology/index.js  |  1 +
 5 files changed, 20 insertions(+), 2 deletions(-)

跟 Google Play Console 的 RWD 設計越來越像了

commit f47dc16b69357eab1b3131e2cac466186d8439d7
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Thu Apr 16 10:42:27 2020 +0800

    RWD
    - default with no nav
    - smaller the navbar at each content
      - give more space for content

 web/src/components/App/index.js       | 4 ++--
 web/src/components/Dashboard/index.js | 6 +++---
 web/src/components/Map/index.js       | 6 +++---
 web/src/components/Setting/index.js   | 6 +++---
 web/src/components/Topology/index.js  | 6 +++---
 5 files changed, 14 insertions(+), 14 deletions(-)

為了多給 dashboard 一些空間

  • 預設的 nav 是藏起來的
  • navbar 縮減高度 - 多留一些給 dashboard
commit 94b41a5f9ea2fd0c5c83d1fe9f4c5dc6fc5a7c58
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Thu Apr 16 11:07:47 2020 +0800

    refactoring
    - wrap the nav bar at each content into a component 'NavBar'

 web/src/components/Dashboard/index.js  | 21 +++++----------------
 web/src/components/Map/index.js        | 16 +++-------------
 web/src/components/Navigation/index.js | 18 ++++++++++++++++--
 web/src/components/Setting/index.js    | 13 ++-----------
 web/src/components/Topology/index.js   | 13 ++-----------
 5 files changed, 28 insertions(+), 53 deletions(-)

為了 code reuse 來 refactoring

這在 Angular.js 是很難辦到的

1115

ISMS Server - task - [10%] dashboard - 4/27 ~ 5/8

再次 study Creating a dashboard with React and Chart.js

相關學習

1340

ISMS Server - task - [10%] dashboard - 4/27 ~ 5/8

study Customizing Chart.JS in React

commit ef3957e6810a685599bccc394126d85f173a2c07
Refs: [develop], {origin/develop}
Author: jeffrey <[email protected]>
Date:   Thu Apr 16 14:40:48 2020 +0800

    start with a line chart at components/Dashboard

 web/src/components/Dashboard/index.css        |  21 ---
 web/src/components/Dashboard/index.js         | 259 ++------------------------
 web/src/components/Dashboard/index.module.css |   4 +
 3 files changed, 23 insertions(+), 261 deletions(-)

整理 components/Dashboard

慢慢前進

掌握 chart.js 是設計 dashboard 的第一步

1445

dashboard 放些什麼好呢

看看別人怎麼作

1620

看看線上的 demo what's up and

不貪多