Make header component
This commit is contained in:
davidwells
parent
a63011a996
commit
2bfc7acbfc
7 changed files with 152 additions and 144 deletions
93
src/App.css
93
src/App.css
|
|
@ -1,61 +1,3 @@
|
|||
.app-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 95px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.app-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.app-title-text {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.app-header {
|
||||
background-color: #222;
|
||||
height: 105px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.app-left-nav {
|
||||
display: flex;
|
||||
}
|
||||
.app-title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.app-intro {
|
||||
font-size: large;
|
||||
}
|
||||
.deploy-button-wrapper {
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.deploy-button {
|
||||
width: 200px;
|
||||
}
|
||||
.view-src {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.view-src img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.view-src a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.github-icon {
|
||||
width: 25px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
padding: 60px;
|
||||
padding-top: 10px;
|
||||
|
|
@ -108,44 +50,12 @@
|
|||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-title-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.app-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.app-intro {
|
||||
font-size: 14px;
|
||||
}
|
||||
.todo-list {
|
||||
padding: 15px;
|
||||
padding-top: 10px;
|
||||
width: auto;
|
||||
}
|
||||
.app-header {
|
||||
padding-left: 20px;
|
||||
height: auto;
|
||||
}
|
||||
.app-logo {
|
||||
height: 60px;
|
||||
margin-right: 20px;
|
||||
animation: none;
|
||||
}
|
||||
.deploy-button-wrapper {
|
||||
margin-left: 80px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.deploy-button {
|
||||
width: 150px;
|
||||
}
|
||||
.todo-list-title {
|
||||
/* Disable Auto Zoom in Input “Text” tag - Safari on iPhone */
|
||||
font-size: 16px;
|
||||
|
|
@ -180,9 +90,6 @@
|
|||
color: #adadad;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.view-src {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/** todo css via https://codepen.io/shshaw/pen/WXMdwE 😻 */
|
||||
|
|
|
|||
57
src/App.js
57
src/App.js
|
|
@ -1,9 +1,7 @@
|
|||
import React, { Component } from 'react'
|
||||
import api from './utils/api'
|
||||
import ContentEditable from './components/ContentEditable'
|
||||
import deployButton from './deploy-to-netlify.svg'
|
||||
import logo from './logo.svg'
|
||||
import github from './github.svg'
|
||||
import AppHeader from './components/AppHeader'
|
||||
import './App.css'
|
||||
|
||||
class App extends Component {
|
||||
|
|
@ -25,7 +23,8 @@ class App extends Component {
|
|||
const todoValue = this.inputElement.value
|
||||
|
||||
if (!todoValue) {
|
||||
alert('Please add todo text')
|
||||
alert('Please add Todo title')
|
||||
this.inputElement.focus()
|
||||
return false
|
||||
}
|
||||
|
||||
|
|
@ -97,11 +96,12 @@ class App extends Component {
|
|||
})
|
||||
}
|
||||
handleTodoCheckbox = (event) => {
|
||||
const { todos } = this.state
|
||||
const { target } = event
|
||||
const todoCompleted = target.checked
|
||||
const todoId = target.dataset.id
|
||||
|
||||
const updatedTodos = this.state.todos.map((todo, i) => {
|
||||
const updatedTodos = todos.map((todo, i) => {
|
||||
const { data } = todo
|
||||
const id = getTodoId(todo)
|
||||
if (id === todoId && data.completed !== todoCompleted) {
|
||||
|
|
@ -123,11 +123,7 @@ class App extends Component {
|
|||
})
|
||||
})
|
||||
}
|
||||
handleDataChange = (event, currentValue) => {
|
||||
// save on change debounced?
|
||||
}
|
||||
handleBlur = (event, currentValue) => {
|
||||
console.log('blur')
|
||||
updateTodoTitle = (event, currentValue) => {
|
||||
let isDifferent = false
|
||||
const todoId = event.target.dataset.key
|
||||
|
||||
|
|
@ -186,16 +182,13 @@ class App extends Component {
|
|||
<use xlinkHref="#todo__circle" className="todo__circle"></use>
|
||||
</svg>
|
||||
<div className='todo-list-title'>
|
||||
|
||||
<ContentEditable
|
||||
tagName='span'
|
||||
editKey={id}
|
||||
onChange={this.handleDataChange} // handle innerHTML change
|
||||
onBlur={this.handleBlur} // handle innerHTML change
|
||||
// onChange={this.handleDataChange} // save on change
|
||||
onBlur={this.updateTodoTitle} // save on enter/blur
|
||||
html={data.title}
|
||||
>
|
||||
</ContentEditable>
|
||||
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
|
|
@ -207,37 +200,7 @@ class App extends Component {
|
|||
render() {
|
||||
return (
|
||||
<div className='app'>
|
||||
<header className='app-header'>
|
||||
<div className='app-title-wrapper'>
|
||||
<div className='app-title-wrapper'>
|
||||
<div className='app-left-nav'>
|
||||
<img src={logo} className='app-logo' alt='logo' />
|
||||
<div className='app-title-text'>
|
||||
<h1 className='app-title'>Netlify + Fauna DB</h1>
|
||||
<p className='app-intro'>
|
||||
Using FaunaDB & Netlify functions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='deploy-button-wrapper'>
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
href='https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example'>
|
||||
<img src={deployButton} className='deploy-button' alt='deploy to netlify' />
|
||||
</a>
|
||||
<div className='view-src'>
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
href='https://github.com/netlify/netlify-faunadb-example'>
|
||||
<img className='github-icon' src={github} alt='view repo on github' /> View the source Luke
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<AppHeader />
|
||||
|
||||
<div className='todo-list'>
|
||||
<h2>Create todo</h2>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
94
src/components/AppHeader/AppHeader.css
Normal file
94
src/components/AppHeader/AppHeader.css
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
.app-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 95px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.app-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.app-title-text {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.app-header {
|
||||
background-color: #222;
|
||||
height: 105px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
padding-left: 60px;
|
||||
}
|
||||
.app-left-nav {
|
||||
display: flex;
|
||||
}
|
||||
.app-title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.app-intro {
|
||||
font-size: large;
|
||||
}
|
||||
.deploy-button-wrapper {
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.deploy-button {
|
||||
width: 200px;
|
||||
}
|
||||
.view-src {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.view-src img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.view-src a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.github-icon {
|
||||
width: 25px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Mobile view */
|
||||
@media (max-width: 768px) {
|
||||
.app-title-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.app-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.app-intro {
|
||||
font-size: 14px;
|
||||
}
|
||||
.app-header {
|
||||
padding-left: 20px;
|
||||
height: auto;
|
||||
}
|
||||
.app-logo {
|
||||
height: 60px;
|
||||
margin-right: 20px;
|
||||
animation: none;
|
||||
}
|
||||
.deploy-button-wrapper {
|
||||
margin-left: 80px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.deploy-button {
|
||||
width: 150px;
|
||||
}
|
||||
.view-src {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
44
src/components/AppHeader/index.js
Normal file
44
src/components/AppHeader/index.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React from 'react'
|
||||
import deployButton from '../../assets/deploy-to-netlify.svg'
|
||||
import logo from '../../assets/logo.svg'
|
||||
import github from '../../assets/github.svg'
|
||||
import styles from './AppHeader.css'
|
||||
|
||||
const AppHeader = (props) => {
|
||||
return (
|
||||
<header className='app-header'>
|
||||
<div className='app-title-wrapper'>
|
||||
<div className='app-title-wrapper'>
|
||||
<div className='app-left-nav'>
|
||||
<img src={logo} className='app-logo' alt='logo' />
|
||||
<div className='app-title-text'>
|
||||
<h1 className='app-title'>Netlify + Fauna DB</h1>
|
||||
<p className='app-intro'>
|
||||
Using FaunaDB & Netlify functions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='deploy-button-wrapper'>
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
href='https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example'>
|
||||
<img src={deployButton} className='deploy-button' alt='deploy to netlify' />
|
||||
</a>
|
||||
<div className='view-src'>
|
||||
<a
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
href='https://github.com/netlify/netlify-faunadb-example'>
|
||||
<img className='github-icon' src={github} alt='view repo on github' />
|
||||
View the source Luke
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppHeader
|
||||
Loading…
Add table
Add a link
Reference in a new issue