add baseline js and scss

pull/9/head
unknown 2018-10-28 18:12:13 -04:00
parent a2236785d1
commit cd60b8b290
8 changed files with 122 additions and 35 deletions

View File

@ -0,0 +1,9 @@
import React from 'react'
const Progress = props => (
<div className="progress">
<div className="indeterminate"></div>
</div>
)
export default Progress

View File

@ -0,0 +1,22 @@
import React from 'react'
class Carousel extends React.Component {
render () {
return (
<section className="carousel-container">
<div className="carousel">
{this.props.children}
</div>
</section>
)
}
}
const CarouselItem = props => (
<div className="carousel-item">{props.children}</div>
)
export default Carousel
export {
CarouselItem
}

View File

@ -1,11 +1,74 @@
import React from 'react'; import React from 'react'
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom'
const App = () => { import Progress from './components/Progress'
return ( import Carousel, {CarouselItem} from './containers/Carousel'
<div>
login.js
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root')); const App = () => {
// I will tidy this later
return (
<div className="root-container flex-container flex-center">
<section className="login-window">
<Progress />
<Carousel className="modal">
<CarouselItem>
<header className="modal-header">
<h1>Sign in</h1>
</header>
<div className="underlined-input">
<input type="email" name="email" id="email-input" />
<div className="reacts-to">
<label className="input-placeholder">Email</label>
<div className="input-underline">
<div className="input-underline-fill"></div>
</div>
</div>
</div>
<span className="carousel-input-error" id="email-error">&emsp;</span>
<div className="button-row">
<a href="signup">Create account</a>
<button className="btn btn-primary" id="btn-next">
Next
<link className="rippleJS" />
</button>
</div>
<div className="footer-row">
<a href="#">Sign in with your Google account</a>
</div>
</CarouselItem>
<CarouselItem>
<header className="modal-header">
<h1>Welcome</h1>
<section className="account-banner">
<img src="https://placehold.it/50x50" alt="user profile image" id="card-image" />
<div className="info-stack">
<span className="name" id="card-name">firstname lastname</span>
<span className="email" id="card-email">x@y.z</span>
</div>
<a href="#" id="btn-reset">Not you?</a>
</section>
</header>
<div className="underlined-input">
<input type="password" name="password" id="password-input" autoComplete="new-password" />
<div className="reacts-to">
<label className="input-placeholder">Password</label>
<div className="input-underline">
<div className="input-underline-fill"></div>
</div>
</div>
</div>
<span className="carousel-input-error" id="password-error">&emsp;</span>
<div className="button-row">
<a href="forgot">Forgot password?</a>
<button className="btn btn-primary" id="btn-finish">
Sign in
<link className="rippleJS" />
</button>
</div>
</CarouselItem>
</Carousel>
</section>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))

View File

@ -1,24 +0,0 @@
/**
* importer.less
*
* By default, new Sails projects are configured to compile this file
* from LESS to CSS. Unlike CSS files, LESS files are not compiled and
* included automatically unless they are imported below.
*
* For more information see:
* https://sailsjs.com/anatomy/assets/styles/importer-less
*/
// For example:
//
// @import 'variables/colors.less';
// @import 'mixins/foo.less';
// @import 'mixins/bar.less';
// @import 'mixins/baz.less';
//
// @import 'styleguide.less';
// @import 'pages/login.less';
// @import 'pages/signup.less';
//
// etc.

View File

@ -0,0 +1,2 @@
$text: rgba(0,0,0,.87);

View File

@ -0,0 +1,7 @@
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

2
assets/styles/login.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'lib/default';
@import 'lib/colors';

View File

@ -1,8 +1,14 @@
<% var key, item %>
<% htmlWebpackPlugin.options.links = htmlWebpackPlugin.options.links || [] %>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Sails React</title> <title>RoE - Login</title>
<% for (item of htmlWebpackPlugin.options.links) {
if (typeof item === 'string' || item instanceof String) { item = { href: item, rel: 'stylesheet' } } %>
<link<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %> /><%
} %>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>