Skip to content

Commit 1a472f2

Browse files
mnyropmnyrop
authored
Merge pull request #43 from migrants-and-the-state/feature/working-mobile-view
working mobile view
2 parents 29063cc + 86eae9d commit 1a472f2

File tree

14 files changed

+166
-105
lines changed

14 files changed

+166
-105
lines changed

‎src/lib/components/Header.svelte‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,21 @@
44
</script>
55

66
<header>
7-
<div class="mb-20 bg-slate-900 px-12 py-2">
8-
<nav class="flex flex-row flex-wrap gap-4 md:gap-8">
9-
<Link class="text-xs !text-white" href={base}>Home</Link>
10-
<Link class="!text-white" href="{base}/about">About + Credits</Link>
11-
<Link class="!text-white" href="{base}/data-guide">Data Guide</Link>
12-
<OutboundLink class="!text-white" href="https://migrants-and-the-state.github.io/"
7+
<div class="mb-10 bg-slate-900 px-4 py-2 md:px-8 lg:px-36">
8+
<nav class="flex flex-row flex-wrap gap-2 md:gap-8">
9+
<Link class="pr-2 text-xs !text-white" href={base}>M/S Reading Room v1</Link>
10+
<Link class="pr-2 !text-white" href="{base}/about">About + Credits</Link>
11+
<Link class="pr-2 !text-white" href="{base}/data-guide">Data Guide</Link>
12+
<OutboundLink class="pr-2 !text-white" href="https://migrants-and-the-state.github.io/"
1313
>M/S Project</OutboundLink
1414
>
15-
<OutboundLink class="!text-white" href="https://github.com/migrants-and-the-state"
15+
<OutboundLink class="pr-2 !text-white" href="https://github.com/migrants-and-the-state"
1616
>GitHub</OutboundLink
1717
>
18+
<OutboundLink
19+
class="pr-2 !text-white"
20+
href="https://migrants-and-the-state.github.io/#contact">Contact</OutboundLink
21+
>
1822
</nav>
1923
</div>
2024
</header>

‎src/lib/components/InfoPane.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
};
2525
</script>
2626

27-
<div class="mb-6 flex w-full flex-wrap md:flex-nowrap md:gap-10">
27+
<div class="mb-8 flex w-full flex-wrap gap-4 md:flex-nowrap md:gap-10">
2828
<div class="my-6 basis-full md:basis-1/2">
29-
<p class="py-2">
29+
<p class="py-2 text-sm md:text-base">
3030
<a href="https://migrants-and-the-state.github.io/" target="_blank"
3131
>Migrants and the State (M/S)</a
3232
>
@@ -35,7 +35,7 @@
3535
prototype is designed to gather feedback on our current methods of enhancing A-file
3636
searchability and solicit ideas for future project development.
3737
</p>
38-
<p class="py-2">
38+
<p class="py-2 text-sm md:text-base">
3939
Below you can search for entire <span class="font-semibold">A-Files</span> or specific
4040
<span class="font-semibold">Pages</span>
4141
within them using both NARA-cataloged and experimentally-extracted metadata. Some pages have been
@@ -46,14 +46,14 @@
4646
<a href="{base}/data-guide">Data Guide</a>.
4747
</p>
4848
</div>
49-
<div class="basis-full md:basis-1/2">
49+
<div class="my-6 basis-full md:basis-1/2">
5050
<div class="mb-12 max-w-prose">
5151
<StructuredList condensed class="!mb-1">
5252
<StructuredListHead>
5353
<StructuredListRow head>
5454
<StructuredListCell head>Statistics</StructuredListCell>
55-
<StructuredListCell head>This v1-Sample</StructuredListCell>
56-
<StructuredListCell head>Full Corpus (Ongoing)</StructuredListCell>
55+
<StructuredListCell head>M/S Reading Room v1</StructuredListCell>
56+
<StructuredListCell head>M/S Full Corpus (Ongoing)</StructuredListCell>
5757
</StructuredListRow>
5858
</StructuredListHead>
5959
<StructuredListBody>

‎src/lib/components/search/AFile.svelte‎

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@
2121
let yearMin = 1800;
2222
let yearMax = 1980;
2323
24-
const countryCodeTableURL = 'https://docs.google.com/spreadsheets/d/1LfmR0QLmalz_6rJT_37QjRyFggsCXXOl5e24nOuw6XI/';
25-
const portCodeTableURL = 'https://docs.google.com/spreadsheets/d/1Zhs2RUElDE96EJmXGOCogfUdukj6mpbhWwsd6e2Sb34/edit?gid=1972875230#gid=1972875230';
24+
const countryCodeTableURL =
25+
'https://docs.google.com/spreadsheets/d/1LfmR0QLmalz_6rJT_37QjRyFggsCXXOl5e24nOuw6XI/';
26+
const portCodeTableURL =
27+
'https://docs.google.com/spreadsheets/d/1Zhs2RUElDE96EJmXGOCogfUdukj6mpbhWwsd6e2Sb34/edit?gid=1972875230#gid=1972875230';
2628
2729
$: isSearchInvalid = selectedFields.length === 0 && query.length > 0;
2830
$: cobSelected = selectedFields.includes('fields.cob.nara');
@@ -31,19 +33,21 @@
3133

3234
<div class="max-w-[75ch] py-4">
3335
<p class="py-2">
34-
<AFileIcon class="inline" size="20" /> <span class="font-bold">A-Files</span> are individual immigration records, each identified by a unique registration number (A-Number). They contain all the documentation of a person's interactions with immigration bureaucracies.
36+
<AFileIcon class="inline" size="20" /> <span class="font-bold">A-Files</span> are individual immigration
37+
records, each identified by a unique registration number (A-Number). They contain all the documentation
38+
of a person's interactions with immigration bureaucracies.
3539
</p>
3640
<p class="py-2">Read more in the <Link href="{base}/data-guide">Data Guide</Link>.</p>
3741
</div>
3842

3943
<Form scope="afile" on:submit={handleSubmit}>
4044
<div class="py-4 font-bold">Search Within</div>
4145
<FormGroup legendText="Fields">
42-
<div class="flex flex-row justify-start">
43-
<div class="basis-1/3">
46+
<div class="flex flex-row flex-wrap justify-start">
47+
<div class="basis-full md:basis-1/3">
4448
<MultiSelect
4549
name="fields"
46-
label="Select fields"
50+
label="Select"
4751
selectionFeedback="fixed"
4852
itemToInput={(item) => ({ name: 'selectedFields', value: item.id })}
4953
bind:selectedIds={selectedFields}
@@ -52,20 +56,24 @@
5256
items={fields['afile'].filter((field) => field.search)}
5357
/>
5458
</div>
55-
<div class="basis-2/3">
59+
<div class="basis-full md:basis-2/3">
5660
<TextInput
5761
name="query"
5862
placeholder="Search..."
5963
invalidText="Select 1+ fields for the search"
6064
bind:value={query}
6165
invalid={isSearchInvalid}
6266
/>
63-
<div class='my-2 ml-4 text-xs opacity-7'>
67+
<div class="opacity-7 my-2 ml-4 text-xs">
6468
{#if cobSelected}
65-
* Please use the country code (see: <a target='_blank' href='{countryCodeTableURL}'>reference table</a>) to search Country of Birth (NARA).<br>
69+
* Please use the country code (see: <a target="_blank" href={countryCodeTableURL}
70+
>reference table</a
71+
>) to search Country of Birth (NARA).<br />
6672
{/if}
6773
{#if poeSelected}
68-
* Please use the port code (see: <a target='_blank' href='{portCodeTableURL}'>reference table</a>) to search Port of Entry (NARA).
74+
* Please use the port code (see: <a target="_blank" href={portCodeTableURL}
75+
>reference table</a
76+
>) to search Port of Entry (NARA).
6977
{/if}
7078
</div>
7179
</div>
@@ -76,39 +84,45 @@
7684

7785
<FormGroup>
7886
<RadioButtonGroup legendText="Sex (NARA)" name="limit_fields.sex.nara" selected="any">
79-
<RadioButton labelText="Any" value="any" />
80-
<RadioButton labelText="F" value="F" />
81-
<RadioButton labelText="M" value="M" />
87+
<div class="flex flex-row flex-wrap justify-start gap-2">
88+
<RadioButton labelText="Any" value="any" />
89+
<RadioButton labelText="F" value="F" />
90+
<RadioButton labelText="M" value="M" />
91+
</div>
8292
</RadioButtonGroup>
8393
</FormGroup>
8494

8595
<FormGroup>
8696
<RadioButtonGroup legendText="Sex (LLM)" name="limit_fields.sex.ms_sex_llm_v1" selected="any">
87-
<RadioButton labelText="Any" value="any" />
88-
<RadioButton labelText="Female" value="female" />
89-
<RadioButton labelText="Male" value="male" />
97+
<div class="flex flex-row flex-wrap justify-start gap-2">
98+
<RadioButton labelText="Any" value="any" />
99+
<RadioButton labelText="Female" value="female" />
100+
<RadioButton labelText="Male" value="male" />
101+
</div>
90102
</RadioButtonGroup>
91103
</FormGroup>
92104

93105
<FormGroup disabled legendText="Page Count">
94106
<div class="flex justify-start py-2">
95107
<div class="basis-1/2">
96108
<NumberInput
109+
allowEmpty
110+
name="range_min.page_count"
97111
inline
98112
helperText="Minimum"
99-
value="0"
100-
min="0"
113+
min="1"
101114
max="1000"
102115
invalidText="Number must be between 0 and 1000."
103116
/>
104117
</div>
105118
<div class="basis-1/2">
106119
<NumberInput
107120
inline
121+
allowEmpty
122+
name="range_max.page_count"
108123
helperText="Maximum"
109-
value="1000"
110124
min="0"
111-
max="1000"
125+
max="2000"
112126
invalidText="Number must be between 0 and 1000."
113127
/>
114128
</div>
@@ -120,18 +134,18 @@
120134
<div class="basis-1/2">
121135
<NumberInput
122136
inline
137+
allowEmpty
123138
helperText="Start Year"
124-
value={yearMin}
125139
min={yearMin}
126140
max={yearMax}
127141
invalidText="Number must be between {yearMin} and {yearMax}."
128142
/>
129143
</div>
130-
<div class="basis-1/2">
144+
<div disabled class="basis-1/2">
131145
<NumberInput
132146
inline
147+
allowEmpty
133148
helperText="End Year"
134-
value={yearMax}
135149
min={yearMin}
136150
max={yearMax}
137151
invalidText="Number must be between {yearMin} and {yearMax}."
@@ -145,8 +159,8 @@
145159
<div class="basis-1/2">
146160
<NumberInput
147161
inline
162+
allowEmpty
148163
helperText="Start Year"
149-
value={yearMin}
150164
min={yearMin}
151165
max={yearMax}
152166
invalidText="Number must be between {yearMin} and {yearMax}."
@@ -155,8 +169,8 @@
155169
<div class="basis-1/2">
156170
<NumberInput
157171
inline
172+
allowEmpty
158173
helperText="End Year"
159-
value={yearMax}
160174
min={yearMin}
161175
max={yearMax}
162176
invalidText="Number must be between {yearMin} and {yearMax}."

‎src/lib/components/search/G325A.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@
3030
<Form scope="g325a" on:submit={handleSubmit}>
3131
<div class="py-4 font-bold">Search Within</div>
3232
<FormGroup legendText="Fields">
33-
<div class="flex flex-row justify-start">
34-
<div class="basis-1/3">
33+
<div class="flex flex-row flex-wrap justify-start">
34+
<div class="basis-full md:basis-1/3">
3535
<MultiSelect
3636
name="fields"
37-
label="Select fields"
37+
label="Select"
3838
selectionFeedback="fixed"
3939
itemToInput={(item) => ({ name: 'selectedFields', value: item.id })}
4040
bind:selectedIds={selectedFields}
@@ -43,7 +43,7 @@
4343
items={fields['g325a'].filter((field) => field.search)}
4444
/>
4545
</div>
46-
<div class="basis-2/3">
46+
<div class="basis-full md:basis-2/3">
4747
<TextInput
4848
name="query"
4949
placeholder="Search..."

‎src/lib/components/search/NatCert.svelte‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@
3939
<Form scope="natcert" on:submit={handleSubmit}>
4040
<div class="py-4 font-bold">Search Within</div>
4141
<FormGroup legendText="Fields">
42-
<div class="flex flex-row justify-start">
43-
<div class="basis-1/3">
42+
<div class="flex flex-row flex-wrap justify-start">
43+
<div class="basis-full md:basis-1/3">
4444
<MultiSelect
4545
name="fields"
46-
label="Select fields"
46+
label="Select"
4747
selectionFeedback="fixed"
4848
itemToInput={(item) => ({ name: 'selectedFields', value: item.id })}
4949
bind:selectedIds={selectedFields}
@@ -52,7 +52,7 @@
5252
items={fields['natcert'].filter((field) => field.search)}
5353
/>
5454
</div>
55-
<div class="basis-2/3">
55+
<div class="basis-full md:basis-2/3">
5656
<TextInput
5757
name="query"
5858
placeholder="Search..."
@@ -71,12 +71,14 @@
7171
name="limit_fields.certificate_naturalization.marital_status.marital_status_llm_v1"
7272
selected="any"
7373
>
74-
<RadioButton labelText="Any" value="any" />
75-
<RadioButton labelText="Single" value="single" />
76-
<RadioButton labelText="Married" value="married" />
77-
<RadioButton labelText="Divorced" value="divorced" />
78-
<RadioButton labelText="Widowed" value="widowed" />
79-
<RadioButton labelText="N.A" value="n.a" />
74+
<div class="flex flex-row flex-wrap justify-start gap-2">
75+
<RadioButton labelText="Any" value="any" />
76+
<RadioButton labelText="Single" value="single" />
77+
<RadioButton labelText="Married" value="married" />
78+
<RadioButton labelText="Divorced" value="divorced" />
79+
<RadioButton labelText="Widowed" value="widowed" />
80+
<RadioButton labelText="N.A" value="n.a" />
81+
</div>
8082
</RadioButtonGroup>
8183
</FormGroup>
8284

‎src/lib/components/search/Page.svelte‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
<Form scope="page" on:submit={handleSubmit}>
3636
<div class="py-4 font-bold">Search Within</div>
3737
<FormGroup legendText="Fields">
38-
<div class="flex flex-row justify-start">
39-
<div class="basis-1/3">
38+
<div class="flex flex-row flex-wrap justify-start">
39+
<div class="basis-full md:basis-1/3">
4040
<MultiSelect
4141
name="fields"
42-
label="Select fields"
42+
label="Select"
4343
selectionFeedback="fixed"
4444
itemToInput={(item) => ({ name: 'selectedFields', value: item.id })}
4545
bind:selectedIds={selectedFields}
@@ -48,7 +48,7 @@
4848
items={fields['page'].filter((field) => field.search)}
4949
/>
5050
</div>
51-
<div class="basis-2/3">
51+
<div class="basis-full md:basis-2/3">
5252
<TextInput
5353
name="query"
5454
placeholder="Search..."
@@ -68,19 +68,23 @@
6868
name="limit_fields.doctype.ms_doctype_v1"
6969
selected="any"
7070
>
71-
<RadioButton labelText="Any" value="any" />
72-
<RadioButton labelText="Form" value="form" />
73-
<RadioButton labelText="Letter" value="letter" />
74-
<RadioButton labelText="Photograph" value="photograph" />
75-
<RadioButton labelText="Misc" value="misc" />
71+
<div class="flex flex-row flex-wrap justify-start gap-2">
72+
<RadioButton labelText="Any" value="any" />
73+
<RadioButton labelText="Form" value="form" />
74+
<RadioButton labelText="Letter" value="letter" />
75+
<RadioButton labelText="Photograph" value="photograph" />
76+
<RadioButton labelText="Misc" value="misc" />
77+
</div>
7678
</RadioButtonGroup>
7779
</FormGroup>
7880

7981
<FormGroup>
8082
<RadioButtonGroup legendText="Sex (LLM)" name="limit_fields.sex.ms_sex_llm_v1" selected="any">
81-
<RadioButton labelText="Any" value="any" />
82-
<RadioButton labelText="Female" value="female" />
83-
<RadioButton labelText="Male" value="male" />
83+
<div class="flex flex-row flex-wrap justify-start gap-2">
84+
<RadioButton labelText="Any" value="any" />
85+
<RadioButton labelText="Female" value="female" />
86+
<RadioButton labelText="Male" value="male" />
87+
</div>
8488
</RadioButtonGroup>
8589
</FormGroup>
8690

‎src/lib/components/search/forms/ButtonControls.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
export let isSearchInvalid;
55
</script>
66

7-
<ButtonSet>
8-
<Button href="javascript:window.location.reload(true)" kind="secondary">Reset</Button>
7+
<ButtonSet class="flex flex-row flex-wrap">
8+
<!-- <Button href="javascript:window.location.reload(true)" kind="secondary">Reset</Button> -->
99
{#if isSearchInvalid}
1010
<Button disabled type="submit">Submit</Button>
1111
{:else}

‎src/lib/search.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export async function search(scope, searchParams) {
4949
.then((response) => response.json())
5050
.then((data) => {
5151
miniSearch.addAll(data);
52-
let options = { prefix: true, combineWith: 'AND', fuzzy: 0.2 };
52+
let options = { prefix: true, combineWith: 'AND' };
5353
if (Object.keys(limitParams).length > 0) {
5454
options.filter = (result) => {
5555
let res = Object.entries(limitParams).every(([key, value]) => {
@@ -75,9 +75,11 @@ export function handleSubmit(event) {
7575
localStorage.setItem('formReferrer', window.location.href);
7676
const scope = event.target.attributes['scope'].value;
7777
const data = new FormData(event.target);
78-
const cleanData = {};
78+
const cleanData = {
79+
query: data.get('query')
80+
};
7981
data.forEach((value, key) => {
80-
if (!key.startsWith('limit') || value !== 'any') {
82+
if (value !== 'any' && value !== '') {
8183
cleanData[key] = value;
8284
}
8385
});

0 commit comments

Comments
 (0)