Skip to content

Commit 2cefdaa

Browse files
bjoernuhligbjoernuhlig
committed
add results styles
1 parent 143f5df commit 2cefdaa

File tree

2 files changed

+104
-63
lines changed

2 files changed

+104
-63
lines changed

‎src/pages/health/components/PreferencesFilter.tsx

+13-35
Original file line numberDiff line numberDiff line change
@@ -23,47 +23,41 @@ li {
2323
2424
ul {
2525
padding-inline-start: 0;
26-
margin-inline-start: 0;
2726
}
2827
29-
3028
label {
3129
user-select: none;
3230
}
3331
34-
35-
3632
label input[role="switch"] {
37-
opacity: 0;
38-
// position: relative;
39-
33+
opacity: 0;
4034
}
4135
4236
label input[role="switch"] ~ .state {
4337
display: inline-block;
44-
// user-select: none;
4538
}
4639
4740
label input[role="switch"] ~ .state > .container {
4841
position: relative;
49-
top: 2px;
42+
display: flex;
43+
justify-content: center;
44+
top: 0em;
5045
display: inline-block;
5146
border: 1px solid black;
5247
opacity: 0.6;
53-
width: 40px;
54-
height: 15px;
55-
left: -1.5rem;
56-
border-radius: 11px;
48+
width: calc(2em + 4px);
49+
height: calc(1em + 4px);
50+
left: -1.25rem;
51+
border-radius: 1em;
5752
}
5853
5954
label input[role="switch"] ~ .state > .container > .position {
6055
position: relative;
61-
top: 0px;
62-
left: 3px;
56+
left: 2px;
6357
display: inline-block;
64-
border-radius: 9px;
65-
width: 14px;
66-
height: 14px;
58+
border-radius: 0.5em;
59+
width: calc(1em - 2px);
60+
height: calc(1em - 2px);
6761
background: black;
6862
6963
}
@@ -77,27 +71,11 @@ label input[role="switch"]:checked ~ .state > span.off {
7771
}
7872
7973
label input[role="switch"]:checked ~ .state > .container > .position {
80-
left: 25px;
74+
left: 1.1em;
8175
border-color: green;
8276
background: green;
8377
opacity: 1;
8478
}
85-
86-
// // label.focus,
87-
// // label:hover {
88-
// // padding: 2px 2px 4px 4px;
89-
// // border-width: 2px;
90-
// // outline: none;
91-
// // background-color: #def;
92-
// // cursor: pointer;
93-
// // }
94-
95-
// // label.focus span.container,
96-
// // label:hover span.container {
97-
// // background-color: white;
98-
// // }
99-
100-
10179
`;
10280

10381

‎src/pages/health/index.tsx

+91-28
Original file line numberDiff line numberDiff line change
@@ -39,26 +39,77 @@ import PreferencesFilter from "./components/PreferencesFilter";
3939
4040
*/
4141

42+
43+
export const HealthSeachResultsSection = styled.section`
44+
left: 0;
45+
bottom: 0;
46+
padding : 1rem;
47+
background-color: pink;
48+
// position: relative;
49+
50+
ul.search-results-list {
51+
list-style-type: none;
52+
list-style-position: outside;
53+
// padding-inline-start: 5%;
54+
overflow-y: auto;
55+
overflow-x: hidden;
56+
height: 40vh;
57+
width: 100%;
58+
}
4259
60+
li {
61+
margin-bottom: 0.9rem;
62+
}
63+
`;
64+
65+
export const SearchResult = styled.article`
66+
width: 95%;
67+
height: fit-content;
68+
background-color: beige;
69+
border-radius: 0.5rem;
70+
padding: 0.15rem;
71+
h3, p {
72+
margin: 0.2rem;
73+
margin-bottom: 0.35rem;
74+
}
75+
`;
76+
77+
export const SearchResultHeading = styled.h3`
78+
font-size: 1rem;
79+
font-weight: 500;
80+
line-height: 1.2;
81+
height: 2rem;
82+
width: 70%;
83+
background-color: #e5cccc;
84+
border-radius: 0.5rem;
85+
padding-left: 0.6rem;
86+
padding-top: 0.4rem;
87+
`;
4388

44-
// export const HealthSearchFilter = styled.section`
45-
// background-color: skyblue;
46-
// position: absolute;
47-
// height: fit-content;
48-
// width: 100vw;
49-
// margin-inline: auto;
50-
// `;
89+
export const SearchResultdescription = styled.p`
90+
font-size: 1rem;
91+
line-height: 1.2;
92+
margin: 0;
93+
padding: 0;
94+
height: 5rem;
95+
background-color: #e5cccc;
96+
border-radius: 0.5rem;
97+
padding-left: 0.6rem;
98+
padding-top: 0.4rem;
99+
`;
51100

52-
// export const HealthSeachResults = styled.section`
53-
// // top: auto;
54-
// left: 0;
55-
// bottom: 0;
56-
// background-color: pink;
57-
// position: relative;
58-
// // width: fit-content;
59-
// margin-inline: auto;
60-
// box-shadow: 0 0 20px rgba(69,86,104,0.25), 0 1px 5px rgba(69,86,104,0.1);
61-
// `;
101+
export const SearchResultAddress = styled.p`
102+
font-size: 1rem;
103+
line-height: 1.2;
104+
margin: 0;
105+
padding: 0;
106+
height: 2rem;
107+
background-color: #e7dbdb;
108+
border-radius: 0.5rem;
109+
padding-left: 0.6rem;
110+
padding-top: 0.4rem;
111+
width: min(25%, 70vw);
112+
`;
62113

63114

64115
const renderMockedJSONSearchResults = (data) => {
@@ -73,25 +124,33 @@ const renderMockedJSONSearchResults = (data) => {
73124
const renderMockedDetailedSearchResults = (data: MockData[]) => {
74125
// TODO Make h2 live region
75126
return (
76-
<section className="health-search-results">
127+
<HealthSeachResultsSection className="health-search-results">
77128
<h2>{data.length} {t`Search Results`}</h2>
78-
<ul>
129+
<ul className="search-results-list">
79130
{data.map((item: MockData) => {
80131
const name = typeof item.properties.name === 'string' ? item.properties.name : item.properties.name?.en ?? "Praxis Dr. Linker Platzhalter";
81132
const { street, city, house, postalCode, text } = item.properties.address || {};
133+
const description = item.properties.description?.en ?? "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
82134
return (
83135
<li key={item._id}>
84-
{JSON.stringify(name)}
85-
{JSON.stringify(street)}
86-
{JSON.stringify(city)}
87-
{JSON.stringify(house)}
88-
{JSON.stringify(postalCode)}
89-
{JSON.stringify(text)}
136+
<SearchResult>
137+
<SearchResultHeading>{JSON.stringify(name)}</SearchResultHeading>
138+
<SearchResultdescription>
139+
{JSON.stringify(description)}
140+
{/* <SearchResultAddress>
141+
{JSON.stringify(street + city + house + postalCode + text)}
142+
{JSON.stringify(city)}
143+
{JSON.stringify(house)}
144+
{JSON.stringify(postalCode)}
145+
{JSON.stringify(text)}
146+
{/* </SearchResultAddress> */}
147+
</SearchResultdescription>
148+
</SearchResult>
90149
</li>
91150
);
92151
})}
93152
</ul>
94-
</section>
153+
</HealthSeachResultsSection>
95154
);
96155

97156
}
@@ -118,7 +177,7 @@ const renderMockedSurveyForm = () => {
118177

119178

120179

121-
180+
// use useswr to import data from file
122181
export default function Page() {
123182
return (
124183
<React.Fragment>
@@ -138,7 +197,7 @@ const HealthSearchFilterSection = styled.section`
138197
padding: 1rem;
139198
display: grid;
140199
background-color: rgb(255, 255, 255, 0.95);
141-
h1, h2 {
200+
h1, h2, h3 {
142201
line-height: 1;
143202
font-weight: 400;
144203
display: flex;
@@ -152,6 +211,10 @@ const HealthSearchFilterSection = styled.section`
152211
font-size: 1.25rem;
153212
font-weight: 500;
154213
}
214+
h3 {
215+
font-size: 1rem;
216+
font-weight: 500;
217+
}
155218
`;
156219

157220
Page.getLayout = function getLayout(page: ReactElement) {

0 commit comments

Comments
 (0)