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

Make the design more compact 

Signed-off-by: Egor Savkin <es@m-labs.hk>
Egor Savkin 2023-08-21 12:38:17 +08:00
parent 256f5a00a3
commit 18ccc1a9a9
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

@ -512,7 +512,7 @@ button {
top: 0; top: 0;
width: 100%; width: 100%;
min-height: 70px; min-height: 70px;
max-height: 350px; max-height: 320px;
overflow-y: scroll; overflow-y: scroll;
position: absolute; position: absolute;
display: flex; display: flex;
@ -530,7 +530,22 @@ button {
} }
div { 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; let key = this.props.id + this.props.outvar;
return ( return (
<div className="shop-radio" key={this.props.id}> <div className="shop-radio" key={this.props.id}>
{this.props.title} <div>{this.props.title}</div>
{this.props.variants.map((variant, _) => ( {this.props.variants.map((variant, _) => (
<div className="form-check" key={key + variant}> <div className="form-check" key={key + variant}>
<input <input
@ -145,7 +145,7 @@ class Line extends Component {
return ( return (
<div className="shop-line" key={this.props.id}> <div className="shop-line" key={this.props.id}>
<label htmlFor={key} className="form-label">{this.props.title}: </label> <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}/> value={this.state.text}/>
</div> </div>
); );
@ -186,7 +186,7 @@ class SwitchLine extends Component {
handleCheck() { handleCheck() {
// Update the state object with the new value for outvar // Update the state object with the new value for outvar
let new_state = { let new_state = {
text: !this.state.checked ? this.state.text : "", ...this.state,
checked: !this.state.checked checked: !this.state.checked
} }
this.setState(new_state); this.setState(new_state);
@ -211,7 +211,7 @@ class SwitchLine extends Component {
{this.props.title} {this.props.title}
</label> </label>
</div> </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}/> value={this.state.text} disabled={!this.state.checked}/>
</div> </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: "Line", args: {title: "IPv4", outvar: "ipv4", fallback: "192.168.1.75/24"}},
{type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}}, {type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}},
{type: "SwitchLine", args: {title: "MAC", outvar: "mac"}}, {type: "SwitchLine", args: {title: "MAC", outvar: "mac"}},
{type: "Switch", args: {title: "Ext CLK", outvar: "ext_clk"}}, {type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}}},
{
"if": [
{"===": [{"var": "ext_clk"}, true]},
{type: "Line", args: {title: "Frequency", outvar: "ext_clk_freq", fallback: "125 MHz"}},
null
]
}
], ],
null null
] ]