mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Added structure and some stylings to CreateServer component
This commit is contained in:
parent
010e3ce0f3
commit
6494f04d25
4 changed files with 61 additions and 5 deletions
|
@ -9,7 +9,8 @@ export default function MenuLayout() {
|
||||||
<AsideMenu />
|
<AsideMenu />
|
||||||
<div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3">
|
<div className="col-md-10 offset-md-2 col-sm-9 offset-sm-3">
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact
|
<Route
|
||||||
|
exact
|
||||||
path="/server/:serverId/list-short-urls/:page"
|
path="/server/:serverId/list-short-urls/:page"
|
||||||
component={ShortUrls}
|
component={ShortUrls}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,7 +1,41 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import './CreateServer.scss';
|
||||||
|
|
||||||
|
export const CreateServer = () => {
|
||||||
|
const submit = e => e.preventDefault();
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return (
|
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);
|
||||||
|
|
11
src/servers/CreateServer.scss
Normal file
11
src/servers/CreateServer.scss
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
@import "../utils/base";
|
||||||
|
|
||||||
|
.create-server {
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-server__label {
|
||||||
|
@media (min-width: $mdMin) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,4 +1,14 @@
|
||||||
|
|
||||||
|
// Breakpoints
|
||||||
|
$xsMax: 575px;
|
||||||
|
$smMin: 576px;
|
||||||
|
$smMax: 577px;
|
||||||
|
$mdMin: 768px;
|
||||||
|
$mdMax: 991px;
|
||||||
|
$lgMin: 992px;
|
||||||
|
$lgMax: 1199px;
|
||||||
|
$xlgMin: 1200px;
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
$mainColor: #4696e5;
|
$mainColor: #4696e5;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue