mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-22 17:10:26 +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,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>
|
||||
|
|
|
@ -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);
|
||||
|
|
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
|
||||
$mainColor: #4696e5;
|
||||
|
||||
|
|
Loading…
Reference in a new issue