Commit 03155d0e authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Filters: add spacing below form labels

parent 3eee4132
......@@ -104,7 +104,7 @@ export const Filters = (props) => {
{/*radio buttons for selecting mode*/
<Grid item>
<FormGroup style={{width: "300px"}}>
<FormLabel component="legend">Search mode</FormLabel>
<FormLabel className={classes.formLabel} component="legend">Search mode</FormLabel>
<RadioGroup
name="searchMode"
value={input.mode}
......@@ -123,7 +123,7 @@ export const Filters = (props) => {
{/*checkboxes for filter by iDAI.objects category; only active in object search mode*/
input.mode === "objects" && <Grid item>
<FormGroup style={{width: "300px"}}>
<FormLabel component="legend" >Filter by iDAI.objects category</FormLabel>
<FormLabel className={classes.formLabel} component="legend" >Filter by iDAI.objects category</FormLabel>
<Autocomplete
multiple
value={input.arachneCategoriesCheckedIds.map( id => arachneCategories(t).find( catObj => catObj.id === id) )}
......@@ -152,7 +152,7 @@ export const Filters = (props) => {
/>
)}
renderInput={(params) =>
<TextField {...params} variant="outlined" label="iDAI.objects category" />
<TextField {...params} variant="outlined" label="iDAI.objects categories" />
}
disableCloseOnSelect
autoHighlight
......@@ -164,14 +164,15 @@ export const Filters = (props) => {
{/*input field for string query*/
<Grid item>
<FormGroup style={{width: "300px"}}>
<FormLabel component="legend">Filter by search term</FormLabel>
<FormLabel className={classes.formLabel} component="legend">Filter by search term</FormLabel>
<TextField
type="text"
variant="outlined"
size="small"
name="searchStr"
value={input.searchStr}
placeholder="*"
placeholder="Search terms"
label="Search terms"
onChange={event => {
dispatch({
type: "UPDATE_INPUT",
......@@ -197,7 +198,7 @@ export const Filters = (props) => {
{/*dropdown for filter by period; only active in object search mode*/
input.mode === "objects" && <Grid item>
<FormGroup style={{width: "300px"}}>
<FormLabel component="legend">Filter by period</FormLabel>
<FormLabel className={classes.formLabel} component="legend">Filter by period</FormLabel>
<Autocomplete
multiple
name="chronOntologyTerms"
......@@ -227,7 +228,7 @@ export const Filters = (props) => {
/>
)}
renderInput={(params) =>
<TextField {...params} label="iDAI.chronontology term" variant="outlined" /> //todo: überlagert sich mit anderem Label
<TextField {...params} label="iDAI.chronontology terms" variant="outlined" />
}
//autoSelect
autoHighlight
......@@ -241,7 +242,7 @@ export const Filters = (props) => {
{/*dropdown for filter by region; only active in site search mode*/
(input.mode === "sites" || input.mode === "sitesByRegion") && <Grid item>
<FormGroup style={{width: "300px"}}>
<FormLabel component="legend">Filter by region</FormLabel>
<FormLabel className={classes.formLabel} component="legend">Filter by region</FormLabel>
<Autocomplete
name="region"
value={input.gazetteerRegion}
......@@ -272,7 +273,9 @@ export const Filters = (props) => {
: (dispatch({type: "UPDATE_INPUT", payload: {field: "mode", value: "sitesByRegion"}}),
dispatch({type: "UPDATE_INPUT", payload: {field: "gazetteerRegion", value: newValue}}));
}}
renderInput={(params) => <TextField {...params} label="Filter by region" variant="outlined" />}
renderInput={(params) =>
<TextField {...params} label="Region name" variant="outlined" />
}
//autoSelect
disabled={(input.boundingBoxCorner1.length!==0 && input.boundingBoxCorner2.length!==0)}
size="small"
......@@ -283,7 +286,7 @@ export const Filters = (props) => {
{/*switch and input fields for filter by coordinates*/
<Grid item>
<FormGroup style={{width: "300px"}}>
<FormLabel>Filter by coordinates (bounding box)
<FormLabel className={classes.formLabel}>Filter by coordinate bounding box
<Tooltip title="Activate the switch to select a bounding box directly on the map. Click the map in two places to select first the north-east corner, then the south-west corner." arrow placement="right-start">
<Switch
name="drawBBox"
......@@ -348,7 +351,7 @@ export const Filters = (props) => {
{/*checkboxes for filter by catalogs; only active in object search mode*/
input.mode === "objects" && <Grid item>
<FormGroup style={{width: "300px"}}>
<FormLabel component="legend">Filter by catalogs</FormLabel>
<FormLabel className={classes.formLabel} component="legend">Filter by catalogs</FormLabel>
{/*//if there are non-public catalogs, tell users this by displaying the FormHelperText specified below
catalogs.map(catalog => catalog.public).includes(false)
&& <FormHelperText error>{t("Some catalogs are not yet publicly accessible")}</FormHelperText>
......@@ -393,7 +396,7 @@ export const Filters = (props) => {
/>
)}
renderInput={(params) =>
<TextField {...params} variant="outlined" label="Catalogs" />
<TextField className={classes.formLabel} {...params} variant="outlined" label="Catalog titles" />
}
disableCloseOnSelect
autoHighlight
......@@ -405,7 +408,7 @@ export const Filters = (props) => {
{/*dropdown for filter by iDAI.gazetteer provenance; only active in site search mode*/
(input.mode === "sites" || input.mode === "sitesByRegion") && <Grid item>
<FormGroup style={{width: "300px"}}>
<FormLabel component="legend">Filter by iDAI.gazetteer provenances</FormLabel>
<FormLabel className={classes.formLabel} component="legend">Filter by iDAI.gazetteer provenances</FormLabel>
<Autocomplete
multiple
value={input.gazetteerProvenanceCheckedTags.map( tag => gazetteerProvenances.find( gazProvTagObj => gazProvTagObj.tag === tag ) )}
......
......@@ -135,6 +135,9 @@ const useStyles = makeStyles(theme => ({
marginRight: "4px"
}
},
formLabel: {
marginBottom: theme.spacing(1)
},
dashboardBody: {
//height: "calc(100vh - 80px - 12px)"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment