oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

styling & spacing

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-03-01 15:04:41 +01:00
parent 6eaf2efd95
commit 07e8ac6f13
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 64 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/templates/Search/filterPrice.module.css
View File

@ -1,7 +1,12 @@
/* .filterList {
display: inline-flex;
float: left;
} */
.filterList,
div.filterList {
white-space: normal;
margin-bottom: 0;
}
.filter {
display: inline-block;
}
.filter,
button.filter,
@ -9,14 +14,14 @@ button.filter,
.filter:active,
.filter:focus {
border: 1px solid var(--border-color);
text-transform: uppercase;
border-radius: var(--border-radius);
margin-right: calc(var(--spacer) / 6);
margin-bottom: calc(var(--spacer) / 6);
color: var(--color-secondary);
background: var(--background-body);
/* the only thing not possible to overwrite button style="text" with more specifity of selectors, so sledgehammer */
padding: calc(var(--spacer) / 5) !important;
padding: calc(var(--spacer) / 6) !important;
}
.filter:hover,
@ -37,7 +42,3 @@ button.filter,
margin-left: calc(var(--spacer) / 6);
color: var(--background-body);
}
.filterList:first-of-type{
margin-bottom: calc(var(--spacer) / 6);
}

88
src/components/templates/Search/filterPrice.tsx
View File

@ -107,51 +107,49 @@ export default function FilterPrice({
}
return (
<div>
<div className={styles.filterList}>
{priceFilterItems.map((e, index) => {
const isSelected =
e.value === priceType || priceSelections.includes(e.value)
const selectFilter = cx({
[styles.selected]: isSelected,
[styles.filter]: true
})
return (
<Button
size="small"
style="text"
key={index}
className={selectFilter}
onClick={async () => {
handleSelectedFilter(isSelected, e.value)
}}
>
{e.display}
</Button>
)
})}
{serviceFilterItems.map((e, index) => {
const isSelected =
e.value === serviceType || serviceSelections.includes(e.value)
const selectFilter = cx({
[styles.selected]: isSelected,
[styles.filter]: true
})
return (
<Button
size="small"
style="text"
key={index}
className={selectFilter}
onClick={async () => {
handleSelectedFilter(isSelected, e.value)
}}
>
{e.display}
</Button>
)
})}
</div>
<div className={styles.filterList}>
{priceFilterItems.map((e, index) => {
const isSelected =
e.value === priceType || priceSelections.includes(e.value)
const selectFilter = cx({
[styles.selected]: isSelected,
[styles.filter]: true
})
return (
<Button
size="small"
style="text"
key={index}
className={selectFilter}
onClick={async () => {
handleSelectedFilter(isSelected, e.value)
}}
>
{e.display}
</Button>
)
})}
{serviceFilterItems.map((e, index) => {
const isSelected =
e.value === serviceType || serviceSelections.includes(e.value)
const selectFilter = cx({
[styles.selected]: isSelected,
[styles.filter]: true
})
return (
<Button
size="small"
style="text"
key={index}
className={selectFilter}
onClick={async () => {
handleSelectedFilter(isSelected, e.value)
}}
>
{e.display}
</Button>
)
})}
</div>
)
}

12
src/components/templates/Search/sort.module.css
View File

@ -1,11 +1,18 @@
.sortList {
align-self: flex-end;
padding: calc(var(--spacer) / 10);
padding: 0 calc(var(--spacer) / 10);
display: flex;
align-items: center;
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
background: var(--background-body);
overflow-y: auto;
}
@media (min-width: 40rem) {
.sortList {
align-self: flex-end;
overflow-y: unset;
}
}
.sortLabel {
@ -15,6 +22,7 @@
margin-right: calc(var(--spacer) / 1.5);
text-transform: uppercase;
color: var(--color-secondary);
font-size: var(--font-size-small);
}
.sorted {