Clean up css styles for each components.
Clean up css styles for each components in a clear order. Now all the styles are in customized.css which is not clear for each components. So, we should delete customized.css, and for each component we create a corresponding css style. Change-Id: Ic23c45c8f380820da0689e728bcf99daa260f2e0 Signed-off-by: Andy Yan <yanchao3@lenovo.com>
This commit is contained in:
Andy Yan
parent
b494488945
commit
7f701830e5
|
|
@ -0,0 +1,31 @@
|
|||
.detail-button {
|
||||
background-color: #428bca;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 6px 18px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.compose-button {
|
||||
background-color: #428bca;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.compose-node-details {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 40px;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.details {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 40px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
|
@ -50,38 +50,6 @@ hr.separator {
|
|||
height: 2px;
|
||||
}
|
||||
|
||||
.detail-button {
|
||||
background-color: #428bca;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 6px 18px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.compose-button {
|
||||
background-color: #428bca;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
padding-bottom: 40px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.resource {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px;
|
||||
|
|
@ -90,30 +58,6 @@ hr.separator {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.in-use-resource {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px;
|
||||
height: 75px;
|
||||
background-color: #00cc44;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.warning-resource {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px;
|
||||
height: 75px;
|
||||
background-color: #cccc00;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.critical-resource {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px;
|
||||
height: 75px;
|
||||
background-color: #e60000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
|
@ -192,3 +136,7 @@ hr.separator {
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.compose-node-button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.node-detail-button {
|
||||
background-color: #428bca;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 6px 18px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.in-use-resource {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px;
|
||||
height: 75px;
|
||||
background-color: #00cc44;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.warning-resource {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px;
|
||||
height: 75px;
|
||||
background-color: #cccc00;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.critical-resource {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px;
|
||||
height: 75px;
|
||||
background-color: #e60000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Rack Scale Design</title>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
<link href='./customized.css' rel='stylesheet' />
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import React from "react";
|
|||
|
||||
var config = require('../../config.js');
|
||||
var util = require('../../util.js');
|
||||
var style = require("../../../css/components/home/ComposeDisplay.css");
|
||||
|
||||
const VlanItem = React.createClass({
|
||||
|
||||
|
|
@ -153,41 +154,41 @@ const ComposeDisplay = React.createClass({
|
|||
displayStyle = "none";
|
||||
}
|
||||
return (
|
||||
<div class="details" style={{display: displayStyle}}>
|
||||
<div class="compose-node-details" style={{display: displayStyle}}>
|
||||
<form id="inputForm">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="right">Name:</td>
|
||||
<td align="left"><input type="text" id="name" /></td>
|
||||
<td>Name:</td>
|
||||
<td><input type="text" id="name" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Description:</td>
|
||||
<td align="left"><input type="text" id="description" /></td>
|
||||
<td>Description:</td>
|
||||
<td><input type="text" id="description" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">System Memory GB:</td>
|
||||
<td align="left"><input type="number" min="0" id="totalMem" /></td>
|
||||
<td>System Memory GB:</td>
|
||||
<td><input type="number" min="0" id="totalMem" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Processor Model:</td>
|
||||
<td align="left"><select id="processorModels" /></td>
|
||||
<td>Processor Model:</td>
|
||||
<td><select id="processorModels" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Remote Storage Capacity GB:</td>
|
||||
<td align="left"><input type="number" min="0" id="storageCapacity" /></td>
|
||||
<td>Remote Storage Capacity GB:</td>
|
||||
<td><input type="number" min="0" id="storageCapacity" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Remote storage IQN:</td>
|
||||
<td align="left"><input type="text" id="iqn" /></td>
|
||||
<td>Remote storage IQN:</td>
|
||||
<td><input type="text" id="iqn" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Remote storage master drive:</td>
|
||||
<td align="left"><select id="remoteDrives" /></td>
|
||||
<td>Remote storage master drive:</td>
|
||||
<td><select id="remoteDrives" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Ethernet interface:</td>
|
||||
<td align="left">
|
||||
<td>Ethernet interface:</td>
|
||||
<td>
|
||||
{this.state.vlans.map(function(obj) {
|
||||
return <VlanItem vlan={obj} remove={this.removeVlan} />
|
||||
}.bind(this))}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
|
||||
import React from "react";
|
||||
|
||||
var style = require("../../../css/components/home/DetailDisplay.css");
|
||||
|
||||
const DetailDisplay = React.createClass({
|
||||
|
||||
renderPod: function(data) {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import NodeList from "./NodeList";
|
|||
|
||||
var config = require('../../config.js');
|
||||
var util = require('../../util.js');
|
||||
var style = require("../../../css/components/home/Home.css");
|
||||
|
||||
const Home = React.createClass({
|
||||
|
||||
|
|
@ -56,12 +57,12 @@ const Home = React.createClass({
|
|||
|
||||
renderHome: function() {
|
||||
return (
|
||||
<div style={{display: "inline-block"}}>
|
||||
<div>
|
||||
<div class="jumbotron">
|
||||
<h2>Welcome to RSD Details</h2>
|
||||
<p>This is a brief overview of all kinds of resources in this environment. See the <a href="#">User Guide</a> for more information on how to configure them.</p>
|
||||
<p>
|
||||
<input type="button" class="btn btn-lg btn-primary" style={{marginRight:'20px'}} onClick={() => this.props.onShowCompose()} value="Compose Node" />
|
||||
<input type="button" class="btn btn-lg btn-primary compose-node-button" onClick={() => this.props.onShowCompose()} value="Compose Node" />
|
||||
<input type="button" class="btn btn-lg btn-primary" onClick={() => this.configCompose()} value="Compose From Config File" />
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import React from "react";
|
|||
|
||||
var config = require('../../config.js');
|
||||
var util = require('../../util.js');
|
||||
var style = require("../../../css/components/home/NodeList.css");
|
||||
|
||||
const NodeList = React.createClass({
|
||||
|
||||
|
|
@ -97,11 +98,11 @@ const NodeList = React.createClass({
|
|||
return this.props.nodes.map((node, i) =>
|
||||
<div class="resource" key={i}>
|
||||
{node.Name}
|
||||
<input type="button" class="detail-button" onClick={() => this.props.onShowDetail(node, this.props.header)} value="Show" />
|
||||
<input type="button" class="detail-button" onClick={() => this.delete(node.Id)} value="Delete" />
|
||||
<input type="button" class="detail-button" onClick={() => this.setBoot(node.Id)} value="Set Boot Source" />
|
||||
<input type="button" class="detail-button" onClick={() => this.assemble(node.Id)} value="Assemble" />
|
||||
<input type="button" class="detail-button" onClick={() => this.powerOn(node.Id)} value="Power On" />
|
||||
<input type="button" class="node-detail-button" onClick={() => this.props.onShowDetail(node, this.props.header)} value="Show" />
|
||||
<input type="button" class="node-detail-button" onClick={() => this.delete(node.Id)} value="Delete" />
|
||||
<input type="button" class="node-detail-button" onClick={() => this.setBoot(node.Id)} value="Set Boot Source" />
|
||||
<input type="button" class="node-detail-button" onClick={() => this.assemble(node.Id)} value="Assemble" />
|
||||
<input type="button" class="node-detail-button" onClick={() => this.powerOn(node.Id)} value="Power On" />
|
||||
<br />
|
||||
{node.Description}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
import React from "react";
|
||||
|
||||
var util = require('../../util.js');
|
||||
var style = require("../../../css/components/home/ResourceList.css");
|
||||
|
||||
const ResourceList = React.createClass({
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
.header {
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
background-color: rgb(51, 102, 255);
|
||||
color: rgb(0, 0, 0);
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.header:hover {
|
||||
background-color: rgb(204, 204, 255);
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
background-color: rgb(153, 179, 255);
|
||||
color: rgb(0, 0, 0);
|
||||
height: 40px;
|
||||
padding-left: 30px;
|
||||
padding-top: 2px;
|
||||
border-bottom: solid 1px rgb(51, 102, 255);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background-color: rgb(204, 204, 255);
|
||||
}
|
||||
|
|
@ -18,6 +18,10 @@ module.exports = {
|
|||
presets: ['react', 'es2015', 'stage-0'],
|
||||
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: "style-loader!css-loader"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue