mc-react-header 0.3.3 → 0.4.0

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 (9) hide show
  1. package/dist/Breadcrumbs.css +9 -8
  2. package/dist/index.js +4 -9
  3. package/package.json +1 -1
  4. package/src/App.css +0 -35
  5. package/src/App.js +7 -5
  6. package/src/MaterialsCloudHeader/Breadcrumbs.css +9 -8
  7. package/src/MaterialsCloudHeader/index.js +3 -6
  8. package/src/index.css +4 -3
  9. 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/index.js CHANGED
@@ -11,17 +11,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
11
11
  const MaterialsCloudHeader = _ref => {
12
12
  let {
13
13
  activeSection,
14
- breadcrumbsPath,
15
- children
14
+ breadcrumbsPath
16
15
  } = _ref;
17
- return /*#__PURE__*/React.createElement("div", {
18
- className: "main-container"
19
- }, /*#__PURE__*/React.createElement(_Navbar.default, {
16
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Navbar.default, {
20
17
  activeSection: activeSection
21
- }), /*#__PURE__*/React.createElement("div", {
22
- className: "content-container"
23
- }, /*#__PURE__*/React.createElement(_Breadcrumbs.default, {
18
+ }), /*#__PURE__*/React.createElement(_Breadcrumbs.default, {
24
19
  breadcrumbsPath: breadcrumbsPath
25
- }), children));
20
+ }));
26
21
  };
27
22
  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.3",
3
+ "version": "0.4.0",
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
@@ -9,13 +9,15 @@ function App() {
9
9
  activeSection={"discover"} // see the corresponding key in MaterialsCloudHeader/Navbar.js
10
10
  breadcrumbsPath={[
11
11
  { name: "Discover", link: "https://www.materialscloud.org/discover" },
12
- { name: "Materials Cloud three-dimensional crystals database", link: "https://www.materialscloud.org/discover/mc3d" },
12
+ {
13
+ name: "Materials Cloud three-dimensional crystals database",
14
+ link: "https://www.materialscloud.org/discover/mc3d",
15
+ },
13
16
  { name: "test", link: null },
14
17
  ]}
15
- >
16
- <h3>Test content</h3>
17
- <p>Test content</p>
18
- </MaterialsCloudHeader>
18
+ />
19
+ <h3>Test content</h3>
20
+ <p>Test content</p>
19
21
  </div>
20
22
  );
21
23
  }
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/index.js CHANGED
@@ -3,13 +3,10 @@ import "./index.css";
3
3
  import Navbar from "./Navbar";
4
4
  import Breadcrumbs from "./Breadcrumbs";
5
5
 
6
- const MaterialsCloudHeader = ({ activeSection, breadcrumbsPath, children }) => (
7
- <div className="main-container">
6
+ const MaterialsCloudHeader = ({ activeSection, breadcrumbsPath }) => (
7
+ <div>
8
8
  <Navbar activeSection={activeSection} />
9
- <div className="content-container">
10
- <Breadcrumbs breadcrumbsPath={breadcrumbsPath} />
11
- {children}
12
- </div>
9
+ <Breadcrumbs breadcrumbsPath={breadcrumbsPath} />
13
10
  </div>
14
11
  );
15
12
 
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 />