Make the design more compact

Signed-off-by: Egor Savkin <es@m-labs.hk>

sass/css/_shop.scss

@@ -512,7 +512,7 @@ button {
                         top: 0;
                         width: 100%;
                         min-height: 70px;
-                        max-height: 350px;
+                        max-height: 320px;
                         overflow-y: scroll;
                         position: absolute;
                         display: flex;
@@ -530,7 +530,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;
                         }
                     }
 

static/js/shop_components.jsx

@@ -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>
         );

static/js/shop_data.js

@@ -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
             ]