mc-react-header 0.3.4 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/Breadcrumbs.css +9 -8
  2. package/dist/Navbar.js +2 -2
  3. package/dist/index.js +4 -9
  4. package/package.json +1 -1
  5. package/src/App.css +0 -35
  6. package/src/App.js +3 -4
  7. package/src/MaterialsCloudHeader/Breadcrumbs.css +9 -8
  8. package/src/MaterialsCloudHeader/Breadcrumbs.js +0 -1
  9. package/src/MaterialsCloudHeader/Navbar.js +1 -2
  10. package/src/MaterialsCloudHeader/index.js +3 -6
  11. package/src/index.css +4 -3
  12. package/src/index.js +0 -1
package/dist/Breadcrumbs.css CHANGED
@@ -2,15 +2,15 @@
2
2
  ul.mc-breadcrumb {
3
3
  padding: 7px 10px 7px 20px;
4
4
  list-style: none;
5
- background-color: #f5f5f5;
5
+ /* background-color: #f5f5f5; */
6
+ background-color: #fafafa;
7
+ /* border: 1px solid #d6d6d6; */
8
+ border: 1px solid #d2d2d2;
6
9
  border-radius: 2px;
7
- border: 1px solid #d6d6d6;
8
10
  font-size: 16px;
9
11
  font-family: "Open Sans", sans-serif;
10
12
  text-align: left;
11
- margin: 6px;
12
- margin-bottom: 20px;
13
- /* margin-top: 20px; */
13
+ margin: 20px;
14
14
  overflow: hidden;
15
15
  display: flex;
16
16
  flex-direction: row;
@@ -18,6 +18,7 @@ ul.mc-breadcrumb {
18
18
  /* gap: 40px; */
19
19
  justify-content: start;
20
20
  align-items: center;
21
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
21
22
  }
22
23
 
23
24
  /* Display list items side by side */
@@ -30,7 +31,7 @@ ul.mc-breadcrumb li {
30
31
 
31
32
  /* Add a color to all links inside the list */
32
33
  ul.mc-breadcrumb li a {
33
- color: #303f9f;
34
+ color: rgb(62, 112, 187);
34
35
  text-decoration: none;
35
36
  /* position: relative; */
36
37
  /* padding: 0px 5px 0px 50px; */
@@ -45,7 +46,7 @@ ul.mc-breadcrumb li a[href]:hover {
45
46
 
46
47
  /* prevent _reboot.scss from bootstrap to override this */
47
48
  ul.mc-breadcrumb li a:not([href]):hover {
48
- color: #303f9f;
49
+ color: rgb(62, 112, 187);
49
50
  }
50
51
 
51
52
  .mc-breadcrumb li a::after {
@@ -86,7 +87,7 @@ ul.mc-breadcrumb li a:not([href]):hover {
86
87
 
87
88
  .mc-breadcrumb li:last-child a {
88
89
  background: transparent !important;
89
- color: #303f9f;
90
+ color: rgb(62, 112, 187);
90
91
  /* pointer-events: none;
91
92
  cursor: default; */
92
93
  }
package/dist/Navbar.js CHANGED
@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  require("./Navbar.css");
8
- var _react = _interopRequireWildcard(require("react"));
9
8
  var _mcloud_logo = _interopRequireDefault(require("./assets/mcloud_logo.png"));
10
9
  require("font-awesome/css/font-awesome.min.css");
11
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ var _react = _interopRequireWildcard(require("react"));
12
11
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
13
  const mainSections = {
14
14
  learn: {
15
15
  name: "LEARN",
package/dist/index.js CHANGED
@@ -12,17 +12,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
12
12
  const MaterialsCloudHeader = _ref => {
13
13
  let {
14
14
  activeSection,
15
- breadcrumbsPath,
16
- children
15
+ breadcrumbsPath
17
16
  } = _ref;
18
- return /*#__PURE__*/_react.default.createElement("div", {
19
- className: "main-container"
20
- }, /*#__PURE__*/_react.default.createElement(_Navbar.default, {
17
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Navbar.default, {
21
18
  activeSection: activeSection
22
- }), /*#__PURE__*/_react.default.createElement("div", {
23
- className: "content-container"
24
- }, /*#__PURE__*/_react.default.createElement(_Breadcrumbs.default, {
19
+ }), /*#__PURE__*/_react.default.createElement(_Breadcrumbs.default, {
25
20
  breadcrumbsPath: breadcrumbsPath
26
- }), children));
21
+ }));
27
22
  };
28
23
  var _default = exports.default = MaterialsCloudHeader;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mc-react-header",
3
- "version": "0.3.4",
3
+ "version": "0.4.3",
4
4
  "author": "Kristjan Eimre <kristjan.eimre@epfl.ch>",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
package/src/App.css CHANGED
@@ -1,38 +1,3 @@
1
1
  .App {
2
2
  text-align: center;
3
3
  }
4
-
5
- .App-logo {
6
- height: 40vmin;
7
- pointer-events: none;
8
- }
9
-
10
- @media (prefers-reduced-motion: no-preference) {
11
- .App-logo {
12
- animation: App-logo-spin infinite 20s linear;
13
- }
14
- }
15
-
16
- .App-header {
17
- background-color: #282c34;
18
- min-height: 100vh;
19
- display: flex;
20
- flex-direction: column;
21
- align-items: center;
22
- justify-content: center;
23
- font-size: calc(10px + 2vmin);
24
- color: white;
25
- }
26
-
27
- .App-link {
28
- color: #61dafb;
29
- }
30
-
31
- @keyframes App-logo-spin {
32
- from {
33
- transform: rotate(0deg);
34
- }
35
- to {
36
- transform: rotate(360deg);
37
- }
38
- }
package/src/App.js CHANGED
@@ -17,10 +17,9 @@ function App() {
17
17
  },
18
18
  { name: "test", link: null },
19
19
  ]}
20
- >
21
- <h3>Test content</h3>
22
- <p>Test content</p>
23
- </MaterialsCloudHeader>
20
+ />
21
+ <h3>Test content</h3>
22
+ <p>Test content</p>
24
23
  </div>
25
24
  );
26
25
  }
package/src/MaterialsCloudHeader/Breadcrumbs.css CHANGED
@@ -2,15 +2,15 @@
2
2
  ul.mc-breadcrumb {
3
3
  padding: 7px 10px 7px 20px;
4
4
  list-style: none;
5
- background-color: #f5f5f5;
5
+ /* background-color: #f5f5f5; */
6
+ background-color: #fafafa;
7
+ /* border: 1px solid #d6d6d6; */
8
+ border: 1px solid #d2d2d2;
6
9
  border-radius: 2px;
7
- border: 1px solid #d6d6d6;
8
10
  font-size: 16px;
9
11
  font-family: "Open Sans", sans-serif;
10
12
  text-align: left;
11
- margin: 6px;
12
- margin-bottom: 20px;
13
- /* margin-top: 20px; */
13
+ margin: 20px;
14
14
  overflow: hidden;
15
15
  display: flex;
16
16
  flex-direction: row;
@@ -18,6 +18,7 @@ ul.mc-breadcrumb {
18
18
  /* gap: 40px; */
19
19
  justify-content: start;
20
20
  align-items: center;
21
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
21
22
  }
22
23
 
23
24
  /* Display list items side by side */
@@ -30,7 +31,7 @@ ul.mc-breadcrumb li {
30
31
 
31
32
  /* Add a color to all links inside the list */
32
33
  ul.mc-breadcrumb li a {
33
- color: #303f9f;
34
+ color: rgb(62, 112, 187);
34
35
  text-decoration: none;
35
36
  /* position: relative; */
36
37
  /* padding: 0px 5px 0px 50px; */
@@ -45,7 +46,7 @@ ul.mc-breadcrumb li a[href]:hover {
45
46
 
46
47
  /* prevent _reboot.scss from bootstrap to override this */
47
48
  ul.mc-breadcrumb li a:not([href]):hover {
48
- color: #303f9f;
49
+ color: rgb(62, 112, 187);
49
50
  }
50
51
 
51
52
  .mc-breadcrumb li a::after {
@@ -86,7 +87,7 @@ ul.mc-breadcrumb li a:not([href]):hover {
86
87
 
87
88
  .mc-breadcrumb li:last-child a {
88
89
  background: transparent !important;
89
- color: #303f9f;
90
+ color: rgb(62, 112, 187);
90
91
  /* pointer-events: none;
91
92
  cursor: default; */
92
93
  }
package/src/MaterialsCloudHeader/Breadcrumbs.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import "./Breadcrumbs.css";
2
-
3
2
  import React from "react";
4
3
 
5
4
  const Breadcrumbs = ({ breadcrumbsPath }) => (
package/src/MaterialsCloudHeader/Navbar.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import "./Navbar.css";
2
2
 
3
- import React from "react";
4
3
  import Logo from "./assets/mcloud_logo.png";
5
4
 
6
5
  import "font-awesome/css/font-awesome.min.css";
7
- import { useEffect, useRef, useState } from "react";
6
+ import React, { useEffect, useRef, useState } from "react";
8
7
 
9
8
  const mainSections = {
10
9
  learn: { name: "LEARN", link: "https://www.materialscloud.org/learn" },
package/src/MaterialsCloudHeader/index.js CHANGED
@@ -4,13 +4,10 @@ import React from "react";
4
4
  import Navbar from "./Navbar";
5
5
  import Breadcrumbs from "./Breadcrumbs";
6
6
 
7
- const MaterialsCloudHeader = ({ activeSection, breadcrumbsPath, children }) => (
8
- <div className="main-container">
7
+ const MaterialsCloudHeader = ({ activeSection, breadcrumbsPath }) => (
8
+ <div>
9
9
  <Navbar activeSection={activeSection} />
10
- <div className="content-container">
11
- <Breadcrumbs breadcrumbsPath={breadcrumbsPath} />
12
- {children}
13
- </div>
10
+ <Breadcrumbs breadcrumbsPath={breadcrumbsPath} />
14
11
  </div>
15
12
  );
16
13
 
package/src/index.css CHANGED
@@ -1,13 +1,14 @@
1
1
  body {
2
2
  margin: 0;
3
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
3
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5
5
  sans-serif;
6
6
  -webkit-font-smoothing: antialiased;
7
7
  -moz-osx-font-smoothing: grayscale;
8
+ background-color: #f0f6f9;
8
9
  }
9
10
 
10
11
  code {
11
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12
13
  monospace;
13
14
  }
package/src/index.js CHANGED
@@ -5,7 +5,6 @@ import App from "./App";
5
5
  import reportWebVitals from "./reportWebVitals";
6
6
 
7
7
  const root = ReactDOM.createRoot(document.getElementById("root"));
8
- document.body.style = "background: white;";
9
8
  root.render(
10
9
  <React.StrictMode>
11
10
  <App />