M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Make the design more compact

Browse Source 
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-08-21 12:38:17 +08:00
parent d72a295aa5
commit 0be655f83a
3 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
sass/css/_shop.scss
View File

@ -468,7 +468,7 @@ button {
top: 0;
width: 100%;
min-height: 70px;
max-height: 350px;
max-height: 320px;
overflow-y: scroll;
position: absolute;
display: flex;
@ -486,7 +486,22 @@ button {
}
div {
margin: 0 0.2rem;
margin: 0.1rem 0.2rem;
font-size: 0.75rem;
input {
padding: 0;
font-size: 0.75rem;
line-height: 1.1;
}
label {
margin-bottom: 0.1rem;
}
}
.form-check {
min-height: 1rem;
}
}

8
static/js/shop_components.jsx
View File

@ -36,7 +36,7 @@ class Radio extends Component {
let key = this.props.id + this.props.outvar;
return (
<div className="shop-radio" key={this.props.id}>
{this.props.title}
<div>{this.props.title}</div>
{this.props.variants.map((variant, _) => (
<div className="form-check" key={key + variant}>
<input
@ -145,7 +145,7 @@ class Line extends Component {
return (
<div className="shop-line" key={this.props.id}>
<label htmlFor={key} className="form-label">{this.props.title}: </label>
<input type="email" className="form-control" id={key} onChange={this.handleClick}
<input type="text" className="form-control form-control-sm" id={key} onChange={this.handleClick}
value={this.state.text}/>
</div>
);
@ -186,7 +186,7 @@ class SwitchLine extends Component {
handleCheck() {
// Update the state object with the new value for outvar
let new_state = {
text: !this.state.checked ? this.state.text : "",
...this.state,
checked: !this.state.checked
}
this.setState(new_state);
@ -211,7 +211,7 @@ class SwitchLine extends Component {
{this.props.title}
</label>
</div>
<input type="email" className="form-control" id={key + "line"} onChange={this.handleText}
<input type="text" className="form-control form-control-sm" id={key + "line"} onChange={this.handleText}
value={this.state.text} disabled={!this.state.checked}/>
</div>
);

9
static/js/shop_data.js
View File

@ -79,14 +79,7 @@ const shop_data = {
{type: "Line", args: {title: "IPv4", outvar: "ipv4", fallback: "192.168.1.75/24"}},
{type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}},
{type: "SwitchLine", args: {title: "MAC", outvar: "mac"}},
{type: "Switch", args: {title: "Ext CLK", outvar: "ext_clk"}},
{
"if": [
{"===": [{"var": "ext_clk"}, true]},
{type: "Line", args: {title: "Frequency", outvar: "ext_clk_freq", fallback: "125 MHz"}},
null
]
}
{type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}}},
],
null
]