2024 18 dropdown fixes

src/actions/config.js

@@ -60,7 +60,7 @@ export function handleSpeedKitConfigChange(config) {
 export function handleMobileSwitch(mobile) {
   return {
     type: SWITCH_MOBILE,
-    payload: !mobile,
+    payload: mobile,
   };
 }
 

src/components/ConfigForm/ConfigForm.css

@@ -240,6 +240,7 @@
 }
 @media (--breakpoint-medium-device) {
   .config__form-submit {
+    font-size: clamp(0.75rem, -14.75rem + 25vw, 1rem);
     margin-top: 0;
   }
 }
@@ -323,6 +324,7 @@
   }
 }
 .device__phone .config__form-submit {
+  font-size: 1rem;
   margin-top: 15px;
   margin-left: 0;
 }
@@ -332,6 +334,13 @@
     max-width: none;
     margin: 0 20px;
   }
+
+  .location-dropdown {
+    width: 165px;
+  }
+  .device__phone .location-dropdown {
+    width: unset;
+  }
 }
 
 .checkbox-custom {
@@ -384,7 +393,3 @@
   border-right: 4px solid #fafafa;
   border-bottom: 4px solid #fafafa;
 }
-
-.location-dropdown {
-  width: 176px;
-}

src/components/ConfigForm/ConfigForm.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
 
-import ConfigFormComponent from './ConfigFormComponent'
+import ConfigFormComponent from "./ConfigFormComponent";
 
 import {
   handleUrlInput,
@@ -12,37 +12,37 @@ import {
   handleTimeoutChange,
   handleSpeedKitConfigChange,
   handleMobileSwitch,
-  handleCachingSwitch
-} from '../../actions/config'
+  handleCachingSwitch,
+} from "../../actions/config";
 
 class ConfigForm extends Component {
   onUrlChange = (data) => {
-    this.props.actions.handleUrlInput(data)
-  }
+    this.props.actions.handleUrlInput(data);
+  };
 
   onCookieChange = (data) => {
-    this.props.actions.handleCookieInput(data)
-  }
+    this.props.actions.handleCookieInput(data);
+  };
 
   onLocationChange = (data) => {
-    this.props.actions.handleLocationChange(data)
-  }
+    this.props.actions.handleLocationChange(data);
+  };
 
   onTimeoutChange = (data) => {
-    this.props.actions.handleTimeoutChange(data)
-  }
+    this.props.actions.handleTimeoutChange(data);
+  };
 
   onSpeedKitConfigChange = (data) => {
-    this.props.actions.handleSpeedKitConfigChange(data)
-  }
+    this.props.actions.handleSpeedKitConfigChange(data);
+  };
 
-  onMobileSwitch = () => {
-    this.props.actions.handleMobileSwitch(this.props.config.mobile)
-  }
+  onMobileSwitch = (data) => {
+    this.props.actions.handleMobileSwitch(data);
+  };
 
   onCachingSwitch = () => {
-    this.props.actions.handleCachingSwitch(this.props.config.caching)
-  }
+    this.props.actions.handleCachingSwitch(this.props.config.caching);
+  };
 
   render() {
     return (
@@ -63,15 +63,15 @@ class ConfigForm extends Component {
         onCachingSwitch={this.onCachingSwitch}
         onToggleAdvancedConfig={this.props.onToggleAdvancedConfig}
       />
-    )
+    );
   }
 }
 
 ConfigForm.defaultProps = {
   showConfig: true,
   showConfigToggle: true,
   showAdvancedConfig: false,
-}
+};
 
 ConfigForm.propTypes = {
   showConfig: PropTypes.bool,
@@ -82,27 +82,30 @@ ConfigForm.propTypes = {
   config: PropTypes.object.isRequired,
   actions: PropTypes.object.isRequired,
   whiteListCandidates: PropTypes.array,
-}
+};
 
 function mapStateToProps(state) {
   return {
     isInitiated: state.result.isInitiated,
-    whiteListCandidates: state.result.whiteListCandidates
-  }
+    whiteListCandidates: state.result.whiteListCandidates,
+  };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators({
-      handleUrlInput,
-      handleCookieInput,
-      handleLocationChange,
-      handleTimeoutChange,
-      handleSpeedKitConfigChange,
-      handleMobileSwitch,
-      handleCachingSwitch,
-    }, dispatch),
-  }
+    actions: bindActionCreators(
+      {
+        handleUrlInput,
+        handleCookieInput,
+        handleLocationChange,
+        handleTimeoutChange,
+        handleSpeedKitConfigChange,
+        handleMobileSwitch,
+        handleCachingSwitch,
+      },
+      dispatch
+    ),
+  };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ConfigForm)
+export default connect(mapStateToProps, mapDispatchToProps)(ConfigForm);

src/components/ConfigForm/ConfigFormComponent.js

@@ -311,6 +311,7 @@ class ConfigFormComponent extends Component {
               onChange={this.handleMobileSwitch}
             ></BqDropdown>
             <BqDropdown
+              className="location-dropdown"
               label="LOCATION"
               modelValue={
                 ConfigFormComponent.locationStates[this.props.config.location]

src/components/Inputs/BqDropdown/BqDropdown.css

@@ -17,12 +17,6 @@
   border: solid 1px #3d86f6;
 }
 
-@media (width > 765px) {
-  .bqDropdown:nth-of-type(2) {
-    width: 176px;
-  }
-}
-
 .bqDropdown-label {
   font-stretch: normal;
   font-style: normal;

src/components/Inputs/BqDropdown/BqDropdown.js

@@ -52,7 +52,7 @@ export class BqDropdown extends Component {
 
   render() {
     return (
-      <div className="bqDropdown">
+      <div className={`bqDropdown ${this.props.className ?? ""}`}>
         <button onClick={() => this.toggleDropdown()} type="button">
           <div>
             <div className="bqDropdown-label">{this.props.label}</div>

src/containers/ResultScreen/components/Result/ResultHeader.js

@@ -1,66 +1,68 @@
-import React, { Component } from 'react'
-import { isSpeedKitInstalledCorrectly } from '../../../../helper/resultHelper'
-import ResultVideos from './ResultVideos'
-import './ResultHeader.css'
-import ResultMainMetric from './ResultMainMetric'
-import Header from 'components/Header/Header'
-import ConfigForm from 'components/ConfigForm/ConfigForm'
+import React, { Component } from "react";
+import { isSpeedKitInstalledCorrectly } from "../../../../helper/resultHelper";
+import ResultVideos from "./ResultVideos";
+import "./ResultHeader.css";
+import ResultMainMetric from "./ResultMainMetric";
+import Header from "components/Header/Header";
+import ConfigForm from "components/ConfigForm/ConfigForm";
 
 class ResultHeader extends Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       showConfig: props.showConfig,
       showAdvancedConfig: props.showAdvancedConfig,
-    }
+    };
   }
 
   renderMainMetric() {
-    return (
-      <ResultMainMetric { ...this.props } />
-    )
+    return <ResultMainMetric {...this.props} />;
   }
 
   renderVideos() {
-    return (
-      <ResultVideos { ...this.props } />
-    )
+    return <ResultVideos {...this.props} />;
   }
 
   renderConfigForm() {
-    const { isPlesk, embedded } = this.props
+    const { isPlesk, embedded } = this.props;
     return (
-      <div className={`${embedded && !isPlesk ? 'pt7' : 'pt5'}`}>
+      <div className={`${embedded && !isPlesk ? "pt7" : "pt5"}`}>
         <ConfigForm
           config={this.props.config}
-          showConfig={this.state.showConfig}
+          showConfig={true}
           showAdvancedConfig={this.state.showAdvancedConfig}
           showConfigToggle={true}
           onToggleAdvancedConfig={this.props.onToggleAdvancedConfig}
           onSubmit={this.props.onSubmit}
         />
       </div>
-    )
+    );
   }
 
   render() {
-    const { isPlesk, embedded } = this.props
-    const { testOverview } = this.props.result
-    const isWordPress = testOverview.type === 'wordpress'
-    const { isSpeedKitComparison, speedKitVersion, configAnalysis } = testOverview
+    const { isPlesk, embedded } = this.props;
+    const { testOverview } = this.props.result;
+    const isWordPress = testOverview.type === "wordpress";
+    const { isSpeedKitComparison, speedKitVersion, configAnalysis } =
+      testOverview;
 
     return (
       <div className={"result-header"}>
         {!embedded && <Header changeColorOnResize={false} />}
         <div className={"container"}>
           {!isPlesk && this.renderConfigForm()}
           {isSpeedKitComparison && (
-            <div className="text-center" style={{ padding: '0px 16px' }}>
-              <div className="flex justify-center" style={{ alignItems: 'center' }}>
-                <h4>{isSpeedKitInstalledCorrectly(configAnalysis, isWordPress) ? (
-                  "Thank you for using Speed Kit " + (isWordPress ? '' : speedKitVersion)) : (
-                  "Thank you for installing Speed Kit, the configuration is not done yet. Please see below for more information."
-                )}</h4>
+            <div className="text-center" style={{ padding: "0px 16px" }}>
+              <div
+                className="flex justify-center"
+                style={{ alignItems: "center" }}
+              >
+                <h4>
+                  {isSpeedKitInstalledCorrectly(configAnalysis, isWordPress)
+                    ? "Thank you for using Speed Kit " +
+                      (isWordPress ? "" : speedKitVersion)
+                    : "Thank you for installing Speed Kit, the configuration is not done yet. Please see below for more information."}
+                </h4>
               </div>
             </div>
           )}
@@ -70,8 +72,8 @@ class ResultHeader extends Component {
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default ResultHeader
+export default ResultHeader;