All questions / Subject browser page improve #4

This commit is contained in:
MrFry 2020-03-23 15:38:28 +01:00
parent 38c6f67963
commit 55e3788b29
6 changed files with 69 additions and 14 deletions

View file

@ -215,15 +215,6 @@ a {
color: black;
}
.searchBar {
margin: 10px;
width: 100%;
color: white;
background-color: #212127;
border: none;
font-size: 18px;
}
.subjItem:hover:not(.activeSubjItem) {
background-color: #555;
color: white;

View file

@ -4,6 +4,7 @@ import fetch from 'unfetch'
import LoadingIndicator from '../components/LoadingIndicator.js'
import QuestionSearchResult from '../components/QuestionSearchResult.js'
import styles from './allQuestions.module.css'
import constants from '../constants.json'
export default function AllQuestions (props) {
@ -23,14 +24,22 @@ export default function AllQuestions (props) {
if (data) {
return (
<div>
<div>
<div className={styles.searchContainer}>
<input
placeholder='Keresés...'
className='searchBar'
className={styles.searchBar}
type='text'
value={searchTerm}
onChange={(e) => { setSearchTerm(e.target.value) }}
/>
<button
onClick={() => {
setSearchTerm('')
}}
className={styles.clearButton}
>
X
</button>
</div>
<hr />
<div>

View file

@ -0,0 +1,22 @@
.searchBar {
margin: 10px;
color: white;
background-color: #212127;
border: none;
font-size: 18px;
flex-grow: 1;
}
.searchContainer {
width: 100%;
display: flex;
}
.clearButton {
width: 80px;
background-color: var(--background-color);
color: white;
font-size: 23px;
cursor: pointer;
border: none;
}

View file

@ -7,6 +7,7 @@
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
}
.motdHeader {

View file

@ -5,9 +5,10 @@ import LoadingIndicator from '../components/LoadingIndicator.js'
import Subject from '../components/Subject.js'
import SubjectSelector from '../components/SubjectSelector.js'
import styles from './subjectBrowser.module.css'
import constants from '../constants.json'
export default function AllQuestions (props) {
export default function SubjectBrowser (props) {
const [data, setData] = useState(null)
const [activeSubjName, setActiveSubjName] = useState('')
const [searchTerm, setSearchTerm] = useState('')
@ -30,14 +31,22 @@ export default function AllQuestions (props) {
return (
<div>
<div>
<div className={styles.searchContainer}>
<input
placeholder='Keresés...'
className='searchBar'
className={styles.searchBar}
type='text'
value={searchTerm}
onChange={(e) => { setSearchTerm(e.target.value) }}
/>
<button
onClick={() => {
setSearchTerm('')
}}
className={styles.clearButton}
>
X
</button>
</div>
<SubjectSelector
data={data}

View file

@ -0,0 +1,23 @@
.searchBar {
margin: 10px;
color: white;
background-color: #212127;
border: none;
font-size: 18px;
flex-grow: 1;
}
.searchContainer {
width: 100%;
display: flex;
}
.clearButton {
width: 80px;
background-color: var(--background-color);
color: white;
font-size: 23px;
cursor: pointer;
border: none;
}