Added structure and some stylings to CreateServer component

This commit is contained in:
Alejandro Celaya 2018-07-15 11:06:53 +02:00
parent 010e3ce0f3
commit 6494f04d25
4 changed files with 61 additions and 5 deletions

View file

@ -9,9 +9,10 @@ export default function MenuLayout() {
<AsideMenu />
<div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3">
<Switch>
<Route exact
path="/server/:serverId/list-short-urls/:page"
component={ShortUrls}
<Route
exact
path="/server/:serverId/list-short-urls/:page"
component={ShortUrls}
/>
</Switch>
</div>

View file

@ -1,7 +1,41 @@
import React from 'react';
import { connect } from 'react-redux';
import './CreateServer.scss';
export const CreateServer = () => {
const submit = e => e.preventDefault();
export default () => {
return (
<div>Create server</div>
<div className="create-server">
<form onSubmit={submit}>
<div className="form-group row">
<label htmlFor="name" className="col-lg-1 col-md-2 col-form-label create-server__label">Name:</label>
<div className="col-lg-11 col-md-10">
<input type="text" className="form-control" id="name" placeholder="Name" />
</div>
</div>
<div className="form-group row">
<label htmlFor="url" className="col-lg-1 col-md-2 col-form-label create-server__label">URL:</label>
<div className="col-lg-11 col-md-10">
<input type="url" className="form-control" id="url" placeholder="URL" />
</div>
</div>
<div className="form-group row">
<label htmlFor="apiKey" className="col-lg-1 col-md-2 col-form-label create-server__label">API key:</label>
<div className="col-lg-11 col-md-10">
<input type="text" className="form-control" id="apiKey" placeholder="API key" />
</div>
</div>
<div className="text-right">
<button className="btn btn-primary btn-outline-primary">Create</button>
</div>
</form>
</div>
);
};
export default connect()(CreateServer);

View file

@ -0,0 +1,11 @@
@import "../utils/base";
.create-server {
padding: 40px 20px;
}
.create-server__label {
@media (min-width: $mdMin) {
text-align: right;
}
}

View file

@ -1,4 +1,14 @@
// Breakpoints
$xsMax: 575px;
$smMin: 576px;
$smMax: 577px;
$mdMin: 768px;
$mdMax: 991px;
$lgMin: 992px;
$lgMax: 1199px;
$xlgMin: 1200px;
// Colors
$mainColor: #4696e5;