5421a64b65
## Issue 4945: Simplify / revamp search filters for odysee (and lbry.tv) ## Changes - Tweaked the "claim type = file | channel | everything" a little to hopefully make it more intuitive. - Added "Sort By". - Added "Upload Date". - Fixed the affected files to handle both Desktop and Odysee. - Tweaked the layout to be more condensed so that we can see some results as we change the filter. - Added animations. - Added "Exact match" option that helps user to surround with quotes.
118 lines
1.9 KiB
SCSS
118 lines
1.9 KiB
SCSS
.search__header {
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-l);
|
|
|
|
.placeholder {
|
|
background-color: var(--color-placeholder-background);
|
|
}
|
|
}
|
|
|
|
.search__options {
|
|
margin-top: var(--spacing-s);
|
|
padding-left: var(--spacing-m);
|
|
|
|
transition: all 0.3s ease-out;
|
|
|
|
// These will be expanded by 'search__options--expanded'.
|
|
max-height: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
|
|
.search__legend {
|
|
font-weight: var(--font-weight-bold);
|
|
font-size: var(--font-small);
|
|
margin-bottom: var(--spacing-s);
|
|
padding: var(--spacing-xxs);
|
|
}
|
|
|
|
fieldset:not(:first-child) {
|
|
margin-top: var(--spacing-m);
|
|
}
|
|
|
|
table {
|
|
line-height: 1.5;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
td:nth-of-type(1) {
|
|
width: 20%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.claim-type-filter {
|
|
display: inline-block;
|
|
}
|
|
|
|
.close-button {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.close-button--visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.filter-values {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.button-toggle {
|
|
margin-right: 0;
|
|
}
|
|
|
|
select {
|
|
@media (min-width: $breakpoint-small) {
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
.icon--help {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.button--close {
|
|
position: unset;
|
|
align-self: center;
|
|
margin-left: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.media-types {
|
|
margin-top: var(--spacing-s);
|
|
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.radio,
|
|
.checkbox {
|
|
display: inline-block;
|
|
margin-top: 0;
|
|
|
|
&:not(:first-of-type) {
|
|
margin-left: var(--spacing-m);
|
|
}
|
|
}
|
|
}
|
|
|
|
.search__options--expanded {
|
|
max-height: 400px; // how to not hardcode this :(
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.search__top-link {
|
|
margin-top: var(--spacing-s);
|
|
font-weight: var(--font-weight-body);
|
|
}
|
|
|
|
.search__top-links {
|
|
margin-bottom: 0;
|
|
margin-top: var(--spacing-xs);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
margin-top: 0;
|
|
}
|
|
}
|