From 6e6f14db8986f5de6491b51117de0e1b0438b341 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 29 Oct 2020 00:53:52 +0100 Subject: ui: Adapt home components to Reactstrap --- .../src/components/home/IntroSection.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/home/IntroSection.js') diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js index a799272a..bc6ee83b 100644 --- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js @@ -1,18 +1,19 @@ import React from 'react' +import { Container, Row, Col } from 'reactstrap' const IntroSection = () => (
-
-
-
+ + +

The datacenter (DC) industry...

  • Is worth over $15 bn, and growing
  • Has many hard-to-grasp concepts
  • Needs to become accessible to many
-
-
+ + ( Image source

-
-
+ +

OpenDC provides...

  • Collaborative online DC modeling
  • Diverse and effective DC simulation
  • Exploratory DC performance feedback
-
-
-
+ + +
) -- cgit v1.2.3 From 873ddacf5abafe43fbc2b6c1033e473c3366dc62 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 11 May 2021 15:40:11 +0200 Subject: ui: Move component styling into CSS modules This change updates the frontend codebase by moving the component styling into CSS module files as opposed to the global styles which we used before. In addition, I have changed the syntax to the newer SCSS syntax, which is more similar to CSS. These changes reduces the styling conflicts that can occur between components and allows us to migrate to systems that do not support importing global styles in components. Moreover, we can benefit from treeshaking using CSS modules. --- opendc-web/opendc-web-ui/src/components/home/IntroSection.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/home/IntroSection.js') diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js index bc6ee83b..7b467889 100644 --- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js @@ -1,8 +1,8 @@ import React from 'react' import { Container, Row, Col } from 'reactstrap' -const IntroSection = () => ( -
+const IntroSection = ({ className }) => ( +
-- cgit v1.2.3 From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 17 May 2021 12:16:10 +0200 Subject: ui: Migrate to FontAwesome 5 React library This change updates the frontend to use the FontAwesome 5 React library that renders SVG icons as opposed to CSS icon fonts. This migration resolves a couple of issues we had with server-side rendering of the previous FontAwesome icons. --- opendc-web/opendc-web-ui/src/components/home/IntroSection.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/home/IntroSection.js') diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js index 7b467889..67e8cd8b 100644 --- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js @@ -1,4 +1,5 @@ import React from 'react' +import Image from 'next/image' import { Container, Row, Col } from 'reactstrap' const IntroSection = ({ className }) => ( @@ -14,9 +15,12 @@ const IntroSection = ({ className }) => ( - Schematic top-down view of a datacenter

-- cgit v1.2.3 From 0e52785dfc5e99f48718530976083cfbd1507651 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 5 Jul 2021 15:36:23 +0200 Subject: ui: Fix linting errors --- opendc-web/opendc-web-ui/src/components/home/IntroSection.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'opendc-web/opendc-web-ui/src/components/home/IntroSection.js') diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js index 67e8cd8b..f9000d32 100644 --- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types' import React from 'react' import Image from 'next/image' import { Container, Row, Col } from 'reactstrap' @@ -42,4 +43,8 @@ const IntroSection = ({ className }) => (

) +IntroSection.propTypes = { + className: PropTypes.string, +} + export default IntroSection -- cgit v1.2.3 From 829be3c973f5ca837431c3ca10909412b675e668 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 15 Jul 2021 15:10:04 +0200 Subject: refactor(ui): Extract OpenDC landing page from web interface This change extracts the landing page from the web interface in order to separate the development of the two. This allows the landing page to be developed independently of the actual OpenDC web application. --- .../src/components/home/IntroSection.js | 50 ---------------------- 1 file changed, 50 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/components/home/IntroSection.js (limited to 'opendc-web/opendc-web-ui/src/components/home/IntroSection.js') diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js deleted file mode 100644 index f9000d32..00000000 --- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js +++ /dev/null @@ -1,50 +0,0 @@ -import PropTypes from 'prop-types' -import React from 'react' -import Image from 'next/image' -import { Container, Row, Col } from 'reactstrap' - -const IntroSection = ({ className }) => ( -
- - - -

The datacenter (DC) industry...

-
    -
  • Is worth over $15 bn, and growing
    • -
  • Has many hard-to-grasp concepts
    • -
  • Needs to become accessible to many
    • -
- - - Schematic top-down view of a datacenter -

- - Image source - -

- - -

OpenDC provides...

-
    -
  • Collaborative online DC modeling
    • -
  • Diverse and effective DC simulation
    • -
  • Exploratory DC performance feedback
    • -
- - - -
-) - -IntroSection.propTypes = { - className: PropTypes.string, -} - -export default IntroSection -- cgit v1.2.3