diff --git a/assets/components/actors/actors.vue b/assets/components/actors/actors.vue index 92802a25..f70768f4 100644 --- a/assets/components/actors/actors.vue +++ b/assets/components/actors/actors.vue @@ -58,6 +58,71 @@ + + String.fromCharCode(index + 97).toUpperCase())), + boobSize: 0, + naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1, }; }, computed: { @@ -147,6 +240,8 @@ export default { mounted, methods: { fetchActors, + updateFilters, + updateValue, }, }; @@ -200,7 +295,11 @@ export default { justify-content: center; align-items: center; padding: 0 1rem; - margin: 1rem 0; + margin: 0 0 1rem 0; + + &:first-child { + margin: 1rem 0; + } } .genders { @@ -260,6 +359,135 @@ export default { } } +.filter-trigger { + display: inline-flex; + align-items: center; + color: var(--shadow); + font-weight: bold; + + .icon { + fill: var(--shadow); + width: 1.5rem; + height: 1.5rem; + margin: 0 .5rem 0 0; + } + + &:hover { + color: var(--shadow-strong); + cursor: pointer; + + .icon { + fill: var(--shadow-strong); + } + } +} + +.filter-section { + &:not(:last-child) { + margin: 0 0 .5rem 0; + } +} + +.filter-label { + display: flex; + justify-content: center; + padding: 0 .5rem; + margin: .5rem 0 0 0; + color: var(--shadow); + font-weight: bold; + font-size: .9rem; + + .icon { + margin: 0 .5rem 0 0; + } +} + +.range-container { + display: flex; + align-items: center; + padding: .5rem 0; + + &.on { + .range-label.on { + color: var(--enabled); + } + + .range-toggle::-webkit-slider-thumb { + background: var(--enabled); + } + } + + &.off { + .range-label.off { + color: var(--disabled); + } + + .range-toggle::-webkit-slider-thumb { + background: var(--disabled); + } + } + + .icon { + fill: var(--shadow); + width: 1.5rem; + height: 1.5rem; + + &:hover { + fill: var(--shadow-strong); + } + } +} + +.range-label { + width: 1.5rem; + padding: 0 .5rem; + color: var(--shadow); + font-weight: bold; + font-size: .9rem; + + &.on { + text-align: right; + } + + &:hover { + cursor: pointer; + + &.on { + color: var(--enabled); + } + + &.off { + color: var(--disabled); + } + } +} + +.range, +.range-toggle { + flex-grow: 1; + height: 1rem; + appearance: none; + border-radius: .5rem; + background: var(--shadow-hint); + cursor: pointer; + + &::-webkit-slider-thumb { + appearance: none; + background: var(--primary); + width: 1rem; + height: 1rem; + border-radius: .5rem; + } +} + +.range-toggle { + background: radial-gradient(circle at center, var(--shadow-weak) 0, var(--shadow-weak) .5rem, var(--shadow-hint) .5rem); + + &::-webkit-slider-thumb { + background: #aaa; + } +} + @media(max-width: $breakpoint) { .genders { flex-direction: column; diff --git a/assets/components/container/container.vue b/assets/components/container/container.vue index 1c0af254..3c2b87f3 100644 --- a/assets/components/container/container.vue +++ b/assets/components/container/container.vue @@ -28,6 +28,7 @@
@@ -76,6 +77,10 @@ function resize(event) { this.events.emit('resize', event); } +function scroll(event) { + this.events.emit('scroll', event); +} + function scrollToTop() { this.$refs.content.scrollTop = 0; } @@ -112,6 +117,7 @@ export default { setConsent, blur, resize, + scroll, scrollToTop, }, }; diff --git a/assets/components/filters/filter-bar.vue b/assets/components/filters/filter-bar.vue index 67de1b1f..4089404f 100644 --- a/assets/components/filters/filter-bar.vue +++ b/assets/components/filters/filter-bar.vue @@ -126,43 +126,6 @@ export default {