From 255caec4cd26f0a9a02e99aa6989b6bac5d9edad Mon Sep 17 00:00:00 2001
From: Gustavo Hornig <ghm16@inf.ufpr.br>
Date: Tue, 5 Jun 2018 09:05:24 -0300
Subject: [PATCH] Add new page + css
---
npm-debug.log | 2 +-
smppir-checkin-portal/src/App.css | 4 ++
.../src/Components/AppFooter.js | 1 -
.../src/Components/Button.js | 6 ++-
.../src/Components/ContactForm.js | 2 +-
.../src/Components/NavigationBar.js | 23 +++++++++++
smppir-checkin-portal/src/Pages/Login.js | 16 ++++----
smppir-checkin-portal/src/Pages/MainPage.js | 22 ++---------
.../src/{ => Pages}/Styles/Login.css | 0
.../src/Pages/Styles/MainPage.css | 2 +-
smppir-checkin-portal/src/Styles/Button.css | 10 +++--
.../src/Styles/NavigationBar.css | 38 +++++++++++++++++++
12 files changed, 91 insertions(+), 35 deletions(-)
create mode 100644 smppir-checkin-portal/src/Components/NavigationBar.js
rename smppir-checkin-portal/src/{ => Pages}/Styles/Login.css (100%)
create mode 100644 smppir-checkin-portal/src/Styles/NavigationBar.css
diff --git a/npm-debug.log b/npm-debug.log
index 64789aa..64b6e0d 100644
--- a/npm-debug.log
+++ b/npm-debug.log
@@ -7,7 +7,7 @@
4 verbose stack Error: ENOENT: no such file or directory, open '/home/gustavo/Documentos/SMPPIR-Checkin-Portal/package.json'
4 verbose stack at Error (native)
5 verbose cwd /home/gustavo/Documentos/SMPPIR-Checkin-Portal
-6 error Linux 4.13.0-41-generic
+6 error Linux 4.13.0-43-generic
7 error argv "/home/gustavo/.nvm/versions/node/v6.9.0/bin/node" "/home/gustavo/.nvm/versions/node/v6.9.0/bin/npm" "start"
8 error node v6.9.0
9 error npm v3.10.8
diff --git a/smppir-checkin-portal/src/App.css b/smppir-checkin-portal/src/App.css
index c5c6e8a..5f33054 100644
--- a/smppir-checkin-portal/src/App.css
+++ b/smppir-checkin-portal/src/App.css
@@ -26,3 +26,7 @@
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
+
+.material-icons{
+ color: black;
+}
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Components/AppFooter.js b/smppir-checkin-portal/src/Components/AppFooter.js
index 46bd668..c297492 100644
--- a/smppir-checkin-portal/src/Components/AppFooter.js
+++ b/smppir-checkin-portal/src/Components/AppFooter.js
@@ -20,7 +20,6 @@ class AppFooter extends Component {
>
<h4 className='smppir-blue'>PARCEIROS</h4>
<Partner />
-
</Footer>
</div>
);
diff --git a/smppir-checkin-portal/src/Components/Button.js b/smppir-checkin-portal/src/Components/Button.js
index 1eea0a8..423de6e 100644
--- a/smppir-checkin-portal/src/Components/Button.js
+++ b/smppir-checkin-portal/src/Components/Button.js
@@ -6,8 +6,10 @@ import { width } from 'window-size';
class AppFooter extends Component {
render() {
return (
- <div>
- <a id='loginButton' className='z-depth-1 waves-effect waves-light' href='/login' > LOGIN </a>
+ <div id={this.props.id} className={this.props.classes}>
+ <a id='loginButton' className='z-depth-1 waves-effect waves-light' href={this.props.reference} >
+ {this.props.name ? this.props.name.toUpperCase() : ""}
+ </a>
</div>
);
}
diff --git a/smppir-checkin-portal/src/Components/ContactForm.js b/smppir-checkin-portal/src/Components/ContactForm.js
index 6717398..2a03afd 100644
--- a/smppir-checkin-portal/src/Components/ContactForm.js
+++ b/smppir-checkin-portal/src/Components/ContactForm.js
@@ -21,7 +21,7 @@ class ContactForm extends Component {
<Input s={12} label="Nome" className='contactFormInput' value={this.state.name} onChange={this.handleNameChange.bind(this)} />
<Input type="email" label="Email" s={12} className='contactFormInput' value={this.state.email} onChange={this.handleEmailChange.bind(this)} />
<Input type="textarea" label="Digite aqui sua mensagem" s={12} className='contactFormInput' value={this.state.message} onChange={this.handleMessageChange.bind(this)}/>
- <Button waves='light' className='smppir-blue-text' id='contactSendBtn' onClick={this.handleSubmit} >ENVIAR</Button>
+ <Button waves='light' className='green' id='contactSendBtn' onClick={this.handleSubmit} >ENVIAR</Button>
</Row>
</div>
);
diff --git a/smppir-checkin-portal/src/Components/NavigationBar.js b/smppir-checkin-portal/src/Components/NavigationBar.js
new file mode 100644
index 0000000..2912e8d
--- /dev/null
+++ b/smppir-checkin-portal/src/Components/NavigationBar.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Navbar, NavItem } from 'react-materialize'
+import logo from '../Images/logo.png'
+
+import '../Styles/NavigationBar.css'
+
+class NavigationBar extends Component {
+
+ render() {
+ const logoNode = <div className='demo' >
+ <img style="vertical-align:middle" id={'bannerLogo'} src={logo} style={{width: 40}}/>
+ <span id='teste'>SMPPIR-CheckIn</span>
+ </div>
+
+ return (
+ <Navbar brand={logoNode} right>
+ {this.props.button}
+ </Navbar>
+ );
+ }
+}
+
+export default NavigationBar;
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Pages/Login.js b/smppir-checkin-portal/src/Pages/Login.js
index 774aa97..7b75bf1 100644
--- a/smppir-checkin-portal/src/Pages/Login.js
+++ b/smppir-checkin-portal/src/Pages/Login.js
@@ -5,16 +5,19 @@ import { Card, Row, Col, Preloader, Input, Breadcrumb, MenuItem } from 'react-ma
import logo from '../Images/logo.png'
import AppFooter from '../Components/AppFooter'
import Button from '../Components/Button'
+import NavigationBar from '../Components/NavigationBar'
-import '../Styles/Login.css'
+import './Styles/Login.css'
class MainPage extends Component {
render() {
return (
<div>
<BarraBrasil/>
- <div>
- <Card id='mainBannerCard' className='white' textClassName='white-text' >
+ <NavigationBar/>
+
+ {/* <div>
+ <Card id='mainBannerCard' className='white' textClassName='white-text'>
<Row>
<Col s={12} m={6}>
<img alt='Logo do SMPPIR-Checkin com descrição' id={'bannerLogo'} src={logo} style={{width: 70}}/>
@@ -26,20 +29,17 @@ class MainPage extends Component {
</Col>
</Row>
</Card>
- </div>
+ </div> */}
<Breadcrumb>
<MenuItem href='/'>Home </MenuItem>
<MenuItem>Login</MenuItem>
</Breadcrumb>
<Row>
<Col offset={"s1 m3"} s={10} m={6}>
- <Card title='Entrar' className='white' textClassName='black-text'>
+ <Card title='Entrar' className='white' textClassName='black-text' actions={[<Button classes={'right-align'} name={'Login'}/>]} >
<Row>
<Input type="email" label="E-mail" s={12} />
<Input type="password" label="Senha" s={12} />
- <Row >
- <Button/>
- </Row>
</Row>
</Card>
</Col>
diff --git a/smppir-checkin-portal/src/Pages/MainPage.js b/smppir-checkin-portal/src/Pages/MainPage.js
index 4cc91b1..7e8af47 100644
--- a/smppir-checkin-portal/src/Pages/MainPage.js
+++ b/smppir-checkin-portal/src/Pages/MainPage.js
@@ -2,32 +2,18 @@ import React, { Component } from 'react';
import './Styles/MainPage.css';
import BarraBrasil from '../Components/BarraBrasil'
import { Card, Row, Col, Preloader } from 'react-materialize'
-import logo from '../Images/logo.png'
+import logo from '../Images/logo2.png'
import AppFooter from '../Components/AppFooter'
import Button from '../Components/Button'
+import NavigationBar from '../Components/NavigationBar'
+import { Navbar, NavItem } from 'react-materialize'
class MainPage extends Component {
render() {
return (
<div>
<BarraBrasil />
- <div>
- <Card id='mainBannerCard' className='white' textClassName='white-text' >
- <Row>
- <Col s={12} m={6}>
- <img alt='Logo do SMPPIR-Checkin com descrição' id={'bannerLogo'} src={logo} style={{width: 70}}/>
- </Col>
- <Col s={12} m={4} offset={'m1'}>
- <p id='bannerText'>
- Teste SMPPIR-Checkin
- </p>
- </Col>
- <Col s={12} m={2} offset={'m1'}>
- <Button/>
- </Col>
- </Row>
- </Card>
- </div>
+ <NavigationBar button={<NavItem id={'login-btn'} href='/login'>Login</NavItem>}/>
<Row>
<Col id='map' s={4}>
<Preloader size='big'/>
diff --git a/smppir-checkin-portal/src/Styles/Login.css b/smppir-checkin-portal/src/Pages/Styles/Login.css
similarity index 100%
rename from smppir-checkin-portal/src/Styles/Login.css
rename to smppir-checkin-portal/src/Pages/Styles/Login.css
diff --git a/smppir-checkin-portal/src/Pages/Styles/MainPage.css b/smppir-checkin-portal/src/Pages/Styles/MainPage.css
index 72237ef..c6a4954 100644
--- a/smppir-checkin-portal/src/Pages/Styles/MainPage.css
+++ b/smppir-checkin-portal/src/Pages/Styles/MainPage.css
@@ -10,7 +10,7 @@
#bannerLogo{
margin-left: 20%;
- margin-top: 1%;
+ margin-top: 2%;
}
#map{
diff --git a/smppir-checkin-portal/src/Styles/Button.css b/smppir-checkin-portal/src/Styles/Button.css
index 8b456cb..459c684 100644
--- a/smppir-checkin-portal/src/Styles/Button.css
+++ b/smppir-checkin-portal/src/Styles/Button.css
@@ -1,8 +1,10 @@
#loginButton{
width: 100px;
+ height: 30px;
text-align: center;
- margin-left: 180%;
- margin-top: 5%;
+ line-height: 20px;
+ /* margin-left: 180%; */
+ /* margin-top: 5%; */
background-color: green;
color: white;
padding-top: 5px;
@@ -14,4 +16,6 @@
#loginButton:hover{
background-color: rgb(0, 85, 0);
-}
\ No newline at end of file
+}
+
+.verticalAlignCenter{}
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Styles/NavigationBar.css b/smppir-checkin-portal/src/Styles/NavigationBar.css
new file mode 100644
index 0000000..c79a481
--- /dev/null
+++ b/smppir-checkin-portal/src/Styles/NavigationBar.css
@@ -0,0 +1,38 @@
+ul.z-depth-2{
+ box-shadow: none;
+}
+
+.nav-wrapper{
+ background-color: white;
+ color: black;
+ -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+}
+
+nav ul a{
+ background-color: white;
+ color: black;
+}
+
+nav .brand-logo{
+ color: black;
+}
+
+.demo div{
+ float: left;
+ clear: none;
+}
+
+/* .nav-wrapper > div > ul{
+ height: 40px;
+ width: 120px;
+} */
+
+#login-btn{
+ background-color: rgb(168, 235, 168);
+}
+
+#teste{
+ vertical-align: top;
+ margin-left: 20px;
+}
\ No newline at end of file
--
GitLab