-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#90 - Integrated Header and begin Homepage integration
- Loading branch information
Latamen
committed
Aug 4, 2021
1 parent
8cbee21
commit ec264d6
Showing
6 changed files
with
203 additions
and
92 deletions.
There are no files selected for viewing
37 changes: 23 additions & 14 deletions
37
service_zone/frontend/datalake-react-front/src/components/Header.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,32 @@ | ||
| import React from "react"; | ||
| import logo from '../logo_datalake.png' | ||
|
|
||
| export class Header extends React.Component { | ||
| render() { | ||
| return( | ||
| <nav className="navbar navbar-expand-lg navbar-dark bg-dark"> | ||
| <div className="container-fluid"> | ||
| <a className="navbar-brand" href="/">Datalake</a> | ||
| <div className="collapse navbar-collapse" id="navbarText"> | ||
| <ul className="navbar-nav me-auto mb-2 mb-lg-0"> | ||
| <li className="nav-item"> | ||
| <a className="nav-link active" aria-current="page" href="/">Retour</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| return ( | ||
| <div class="header"> | ||
| <div class="header_nav" /> | ||
| <div class="header_links"> | ||
| <span class="datalake_link"> | ||
| <a href="/">Datalake</a> | ||
| </span> | ||
| <span class="upload_link"> | ||
| <a href="/upload">Upload</a> | ||
| </span> | ||
| <span class="homepage_link"> | ||
| <a href="/">Home</a> | ||
| </span> | ||
| <span class="download_link"> | ||
| <a href="/download">Download</a> | ||
| </span> | ||
| <span class="datavisualization_link"> | ||
| <a href="/data-processed-visualization">Data Visualization</a> | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <a className="btn btn-outline-primary" href="/logout" role="button">Déconnexion</a> | ||
| <div class="datalake_logo"> | ||
| <img src={logo}></img> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
51 changes: 3 additions & 48 deletions
51
service_zone/frontend/datalake-react-front/src/components/Home.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 135 additions & 0 deletions
135
service_zone/frontend/datalake-react-front/src/header.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| /* Header links */ | ||
|
|
||
| a { | ||
| color: rgba(255,255,255,1) !important; | ||
| text-decoration: none !important; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: #EA973B !important; | ||
| } | ||
|
|
||
| .entire_page { | ||
| width: 100%; | ||
| height: 1387px; | ||
| background: rgba(247,248,250,1); | ||
| opacity: 1; | ||
| position: absolute; | ||
| top: 0px; | ||
| left: 0px; | ||
| overflow: hidden; | ||
| } | ||
| .header { | ||
| width: 100%; | ||
| height: 130px; | ||
| /*background: url("./logo_datalake.png");*/ | ||
| background-repeat: no-repeat; | ||
| background-position: center center; | ||
| background-size: cover; | ||
| opacity: 1; | ||
| position: absolute; | ||
| top: 0px; | ||
| left: 0px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .header_nav { | ||
| width: 100%; | ||
| height: 130px; | ||
| background: rgba(20, 33, 61, 1); | ||
| opacity: 1; | ||
| position: absolute; | ||
| top: 0px; | ||
| left: 0px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .header_links { | ||
| width: 864px; | ||
| height: 43px; | ||
| /*background: url("./logo_datalake.png");*/ | ||
| background-repeat: no-repeat; | ||
| background-position: center center; | ||
| background-size: cover; | ||
| opacity: 1; | ||
| position: absolute; | ||
| top: 44px; | ||
| left: 141px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .datalake_link { | ||
| width: 142px; | ||
| color: rgba(255, 255, 255, 1); | ||
| position: absolute; | ||
| top: 0px; | ||
| left: 0px; | ||
| font-family: Lato; | ||
| font-weight: Bold; | ||
| font-size: 36px; | ||
| opacity: 1; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .upload_link { | ||
| width: 64px; | ||
| color: rgba(255, 255, 255, 1); | ||
| position: absolute; | ||
| top: 9px; | ||
| left: 445px; | ||
| font-family: Lato; | ||
| font-weight: Bold; | ||
| font-size: 20px; | ||
| opacity: 1; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .homepage_link { | ||
| width: 55px; | ||
| color: rgba(234, 151, 59, 1); | ||
| position: absolute; | ||
| top: 9px; | ||
| left: 340px; | ||
| font-family: Lato; | ||
| font-weight: Bold; | ||
| font-size: 20px; | ||
| opacity: 1; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .download_link { | ||
| width: 92px; | ||
| color: rgba(255, 255, 255, 1); | ||
| position: absolute; | ||
| top: 9px; | ||
| left: 560px; | ||
| font-family: Lato; | ||
| font-weight: Bold; | ||
| font-size: 20px; | ||
| opacity: 1; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .datavisualization_link { | ||
| width: 161px; | ||
| color: rgba(255, 255, 255, 1); | ||
| position: absolute; | ||
| top: 9px; | ||
| left: 703px; | ||
| font-family: Lato; | ||
| font-weight: Bold; | ||
| font-size: 20px; | ||
| opacity: 1; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .datalake_logo { | ||
| width: 62px; | ||
| height: 31px; | ||
| background: rgba(255, 255, 255, 1); | ||
| opacity: 1; | ||
| position: absolute; | ||
| top: 50px; | ||
| left: 60px; | ||
| overflow: hidden; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,42 @@ | ||
| body { | ||
| margin: 0; | ||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | ||
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | ||
| sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
|
|
||
| code { | ||
| font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', | ||
| monospace; | ||
| } | ||
|
|
||
| .drop { | ||
| border: 2px dashed; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 5em; | ||
| } | ||
|
|
||
| .commentBox { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .form-group.required .control-label:after { | ||
| content:"*"; | ||
| color:red; | ||
| /* Google Fonts */ | ||
| @import url("https://fonts.googleapis.com/css?family=Lato&display=swap"); | ||
| @import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap"); | ||
|
|
||
| /* CSS rules relative to header */ | ||
| @import url("header.css"); | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | ||
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | ||
| sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| code { | ||
| font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', | ||
| monospace; | ||
| } | ||
|
|
||
| .drop { | ||
| border: 2px dashed; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 5em; | ||
| } | ||
|
|
||
| .commentBox { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .form-group.required .control-label:after { | ||
| content:"*"; | ||
| color:red; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.