Responsive search result buttons

src/components/ResultSection/ResultSection.css

@@ -0,0 +1,47 @@
+
+h2 {
+    font-size: 36px;
+}
+
+.results-page-section {
+    display: flex;
+}
+
+.filters-container {
+    width: 30%;
+    height: 100%;
+    margin: 2%;
+    text-align: left;
+    border-left: 2px solid #00000015;
+    padding: 30px;
+}
+
+.filters-container>* {
+    margin-bottom: 30px;
+}
+
+
+.Experience-Level {
+    display: flex;
+    flex-direction: row;
+}
+
+.display-phone {
+    display: none;
+}
+
+@media (max-width: 720px) {
+
+    .filters-container {
+        width: 100%;
+        margin: auto;
+    }
+
+    .display-desktop {
+        display: none;
+    }
+
+    .display-phone {
+        display: block;
+    }
+}

src/components/ResultSection/ResultSection.js

@@ -0,0 +1,110 @@
+import React,{useState} from "react";
+import "./ResultSection.css";
+import ResultsBody from "../ResultsBody/ResultsBody";
+import SolidButton from "../SolidButton/SolidButton";
+import checkboxes from "../../data/checkboxes";
+import Checkbox from "../Checkbox/Checkbox";
+import DifficultyExplanation from '../DifficultyExplanation/DifficultyExplanation';
+
+import { useNavigate } from "react-router-dom";
+const ResultSection = (props) => {
+  const navigate = useNavigate();
+
+  const [checkedItems, setCheckedItems] = useState({});
+
+  const handleChange = (event, category, predicate) => {
+    setCheckedItems({
+        ...checkedItems, [event.target.name]: {
+            checked: event.target.checked,
+            category: category,
+            predicate: predicate,
+        }
+    });
+}
+  return (
+    <div>
+      <div className="results-page-section display-desktop">
+        <ResultsBody text={props.text} checkedItems={checkedItems} />
+        <div className="filters-container">
+          <SolidButton
+            text="Generate Pathway"
+            onClick={() => navigate("/quiz")}
+          />
+          {Object.keys(checkboxes).map((key) => (
+            <div className="filter-category">
+              <h3> {key} </h3>
+              {checkboxes[key].names.map((item) =>
+                key !== "Experience Level" ? (
+                  <div>
+                    <Checkbox
+                      name={item.name}
+                      checked={checkedItems[item.name]?.checked}
+                      onChange={(event) =>
+                        handleChange(event, key, checkboxes[key].predicate)
+                      }
+                    />
+                    <label key={item.name}>{item.name}</label>
+                  </div>
+                ) : (
+                  <div className="Experience-Level">
+                    <Checkbox
+                      name={item.name}
+                      checked={checkedItems[item.name]?.checked}
+                      onChange={(event) =>
+                        handleChange(event, key, checkboxes[key].predicate)
+                      }
+                    />
+                    <DifficultyExplanation difficulty={item.name} />
+                  </div>
+                )
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="results-page-section display-phone">
+        {props.SearchSelected ? (
+          <ResultsBody text={props.text} checkedItems={checkedItems} />
+        ) : (
+          <div className="filters-container">
+            <SolidButton
+              text="Generate Pathway"
+              onClick={() => navigate("/quiz")}
+            />
+            {Object.keys(checkboxes).map((key) => (
+              <div className="filter-category">
+                <h3> {key} </h3>
+                {checkboxes[key].names.map((item) =>
+                  key !== "Experience Level" ? (
+                    <div>
+                      <Checkbox
+                        name={item.name}
+                        checked={checkedItems[item.name]?.checked}
+                        onChange={(event) =>
+                          handleChange(event, key, checkboxes[key].predicate)
+                        }
+                      />
+                      <label key={item.name}>{item.name}</label>
+                    </div>
+                  ) : (
+                    <div className="Experience-Level">
+                      <Checkbox
+                        name={item.name}
+                        checked={checkedItems[item.name]?.checked}
+                        onChange={(event) =>
+                          handleChange(event, key, checkboxes[key].predicate)
+                        }
+                      />
+                      <DifficultyExplanation difficulty={item.name} />
+                    </div>
+                  )
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default ResultSection;

src/components/ResultsBody/ResultsBody.css

@@ -14,3 +14,9 @@ h2{
 }
 
 
+@media (max-width: 720px) {
+    .results-container{
+        width: 100%;
+        margin: 0%;
+    }
+}

src/components/SearchOptions/SearchOptions.css

@@ -0,0 +1,38 @@
+.result-selection {
+    display: flex;
+    width: 95%;
+    margin: auto;
+    justify-content: space-between;
+    margin-top:10px;
+}
+
+.result-button {
+    width: 110px;
+    border-radius: 15px;
+}
+.result-button> .text {
+    margin-top: 1px;
+    margin-bottom: 1px;
+}
+.result-nobackground-button {
+    width: 110px;
+    background-color: white;
+}
+
+.result-nobackground-button>.text {
+    font-weight: none;
+    color: black;
+    margin-top: 1px;
+    margin-bottom: 1px;
+}
+
+.result-nobackground-button:hover {
+    background-color: white;
+}
+
+
+@media (min-width: 720px) {
+    .result-selection {
+        display: none;
+    }
+}

src/components/SearchOptions/SearchOptions.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./SearchOptions.css";
+import SolidButton from "../../components/SolidButton/SolidButton";
+const SearchOptions = (props) => {
+
+  return (
+    <div className="result-selection">
+      <SolidButton
+        className={`result-${
+          props.SearchState ? "nobackground-":""
+        }button`}
+        text="Results"
+        onClick={props.onClick}
+      />
+
+      <SolidButton
+        className={`result-${
+          props.SearchState ?"" : "nobackground-"
+        }button`}
+        text="Filters"
+        onClick={props.onClick}
+      />
+    </div>
+  );
+
+};
+
+export default SearchOptions;

src/components/SolidButton/SolidButton.js

@@ -10,4 +10,4 @@ const SolidButton = props => {
     );
 }
 
-export default SolidButton;
+export default SolidButton; 

src/components/TeamCard/TeamCard.css

@@ -8,6 +8,7 @@
     border-radius: 15px;
     padding: 15px;
     text-align: start;
+
 }
 
 .card img {

src/pages/Results/Results.css

@@ -1,31 +1,9 @@
-.results-page-section {
-    display: flex;
-}
-
-.filters-container {
-    width: 30%;
-    height: 100%;
-    margin: 2%;
-    text-align: left;
-    border-left: 2px solid #00000015;
-    padding: 30px;
-}
-
-.filters-container > * {
-    margin-bottom: 30px;
-}
-
 h2 {
     font-size: 36px;
 }
-
 .filter-category {
     border: 2px solid #00000015;
     border-radius: 15px;
     padding: 15px;
 }
 
-.Experience-Level {
-    display: flex;
-    flex-direction: row;
-}

src/pages/Results/Results.js

@@ -1,71 +1,38 @@
 import React from 'react';
 import './Results.css';
-import ResultsBody from '../../components/ResultsBody/ResultsBody';
 import SearchandSuggested from '../../components/SearchandSuggested/SearchandSuggested';
-import { useNavigate, useParams } from 'react-router-dom';
+import {useParams } from 'react-router-dom';
 import { useState } from 'react';
-import checkboxes from '../../data/checkboxes';
-import Checkbox from '../../components/Checkbox/Checkbox';
-import SolidButton from '../../components/SolidButton/SolidButton';
 import PageHeader from '../../components/PageHeader/PageHeader';
+import SearchOptions from '../../components/SearchOptions/SearchOptions';
 import SearchingArt from '../../img/searching_art.svg';
-import DifficultyExplanation from '../../components/DifficultyExplanation/DifficultyExplanation';
+import ResultSection from '../../components/ResultSection/ResultSection';
 
 const Results = () => {
-    const navigate = useNavigate();
     const param = useParams();
     const [text, setText] = useState(decodeURIComponent(param.userText));
-    const [checkedItems, setCheckedItems] = useState({});
+    const [SearchSelected, setSearchSelected] = useState(true);
 
     const search = input => {
         console.log(`searched for ${input}`)
         setText(input);
     }
 
-    const handleChange = (event, category, predicate) => {
-        setCheckedItems({ ...checkedItems, [event.target.name]: {
-            checked: event.target.checked,
-            category: category,
-            predicate: predicate,
-        }});
-    }
-
     return (
         <div>
-            <PageHeader 
-                header="Search Results" 
-                subheader={<SearchandSuggested searchFunction={search} text={text}/>}
+
+            <PageHeader
+                header="Search Results"
+                subheader={<SearchandSuggested searchFunction={search} text={text} />}
                 img={SearchingArt}
             />
-            <div className="results-page-section">
-                <ResultsBody
-                    text={text}
-                    checkedItems={checkedItems}
-                />
-
-                <div className="filters-container">
-                    <SolidButton text="Generate Pathway" onClick={() => navigate("/quiz")}/>
-                    {Object.keys(checkboxes).map(key => (
-                        <div className="filter-category">
-                            <h3> {key} </h3>
-                            { checkboxes[key].names.map(item => ( key !== "Experience Level" ? 
-                                <div>
-                                    <Checkbox name={item.name} checked={checkedItems[item.name]?.checked} onChange={event => handleChange(event, key, checkboxes[key].predicate)} />
-                                    <label key={item.name}>
-                                        {item.name}
-                                    </label>
-                                </div>
-                                :
-                                <div className='Experience-Level'>
-                                    <Checkbox name={item.name} checked={checkedItems[item.name]?.checked} onChange={event => handleChange(event, key, checkboxes[key].predicate)} />
-                                    <DifficultyExplanation difficulty={item.name} />
-                                </div>
-                                ))
-                            }
-                        </div>
-                    ))}
-                </div>
-            </div>
+
+            <SearchOptions
+                SearchState={SearchSelected}
+                onClick={() => setSearchSelected(!SearchSelected)}
+            />
+
+           <ResultSection SearchSelected={SearchSelected} text={text}/>
         </div>
     )
 }