Added country and birthday filters to actors page.
This commit is contained in:
parent
b59a6dc066
commit
3c3be10c4e
|
|
@ -14,6 +14,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.input-inline {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: solid 1px var(--grey-light-30);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: .5rem 1rem;
|
||||
border: none;
|
||||
|
|
@ -67,9 +74,9 @@
|
|||
}
|
||||
|
||||
.filter-section {
|
||||
width: 15rem;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.label-values {
|
||||
|
|
@ -175,13 +182,14 @@
|
|||
.filter-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .75rem .5rem .5rem .5rem;
|
||||
padding: .5rem 0 .25rem .5rem;
|
||||
color: var(--shadow);
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
|
||||
.label {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,6 @@ body,
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,216 @@
|
|||
.tooltip {}
|
||||
|
||||
.menu-item {
|
||||
.resize-observer[data-v-b329ee4c] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
padding: .5rem;
|
||||
overflow: hidden;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.resize-observer[data-v-b329ee4c] object {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.v-popper__popper {
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
outline: none;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.v-popper__popper.v-popper__popper--hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.v-popper__popper.v-popper__popper--shown {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s
|
||||
}
|
||||
|
||||
.v-popper__popper.v-popper__popper--skip-transition,
|
||||
.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper {
|
||||
transition: none !important
|
||||
}
|
||||
|
||||
.v-popper__backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none
|
||||
}
|
||||
|
||||
.v-popper__inner {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.v-popper__inner>div {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: inherit;
|
||||
max-height: inherit
|
||||
}
|
||||
|
||||
.v-popper__arrow-container {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px
|
||||
}
|
||||
|
||||
.v-popper__popper--arrow-overflow .v-popper__arrow-container,
|
||||
.v-popper__popper--no-positioning .v-popper__arrow-container {
|
||||
display: none
|
||||
}
|
||||
|
||||
.v-popper__arrow-inner,
|
||||
.v-popper__arrow-outer {
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.v-popper__arrow-inner {
|
||||
visibility: hidden;
|
||||
border-width: 7px
|
||||
}
|
||||
|
||||
.v-popper__arrow-outer {
|
||||
border-width: 6px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,
|
||||
.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner {
|
||||
left: -2px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,
|
||||
.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer {
|
||||
left: -1px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,
|
||||
.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer {
|
||||
border-bottom-width: 0;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner {
|
||||
top: -2px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container {
|
||||
top: 0
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,
|
||||
.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer {
|
||||
border-top-width: 0;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner {
|
||||
top: -4px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer {
|
||||
top: -6px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,
|
||||
.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner {
|
||||
top: -2px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,
|
||||
.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer {
|
||||
top: -1px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,
|
||||
.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer {
|
||||
border-left-width: 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner {
|
||||
left: -4px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer {
|
||||
left: -6px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container {
|
||||
right: -10px
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,
|
||||
.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer {
|
||||
border-right-width: 0;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important
|
||||
}
|
||||
|
||||
.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner {
|
||||
left: -2px
|
||||
}
|
||||
|
||||
.v-popper--theme-dropdown .v-popper__inner {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 0 6px 30px #0000001a
|
||||
}
|
||||
|
||||
.v-popper--theme-dropdown .v-popper__arrow-inner {
|
||||
visibility: visible;
|
||||
border-color: #fff
|
||||
}
|
||||
|
||||
.v-popper--theme-dropdown .v-popper__arrow-outer {
|
||||
border-color: #ddd
|
||||
}
|
||||
|
||||
.v-popper--theme-tooltip .v-popper__inner {
|
||||
background: rgba(0, 0, 0, .8);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 7px 12px 6px
|
||||
}
|
||||
|
||||
.v-popper--theme-tooltip .v-popper__arrow-outer {
|
||||
border-color: #000c
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gp" viewBox="0 0 640 480">
|
||||
<g fill-rule="evenodd" stroke-width="1pt">
|
||||
<path fill="#fff" d="M0 0h640v480H0z"/>
|
||||
<path fill="#00267f" d="M0 0h213.3v480H0z"/>
|
||||
<path fill="#f31830" d="M426.7 0H640v480H426.7z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 292 B |
|
|
@ -0,0 +1,195 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
height="341.34"
|
||||
width="512"
|
||||
sodipodi:docname="au.svg"
|
||||
xml:space="preserve"
|
||||
viewBox="0 0 512 341.34"
|
||||
y="0px"
|
||||
x="0px"
|
||||
id="Capa_1"
|
||||
version="1.1"><metadata
|
||||
id="metadata684"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs682" /><sodipodi:namedview
|
||||
inkscape:current-layer="Capa_1"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-x="0"
|
||||
inkscape:cy="170.67"
|
||||
inkscape:cx="256"
|
||||
inkscape:zoom="1.6386719"
|
||||
showgrid="false"
|
||||
id="namedview680"
|
||||
inkscape:window-height="1020"
|
||||
inkscape:window-width="1485"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
guidetolerance="10"
|
||||
gridtolerance="10"
|
||||
objecttolerance="10"
|
||||
borderopacity="1"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff" />
|
||||
<rect
|
||||
x="0"
|
||||
id="rect607"
|
||||
height="341.33701"
|
||||
width="512"
|
||||
style="fill:#0052b4"
|
||||
y="0.003000183" />
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g625">
|
||||
<path
|
||||
id="path609"
|
||||
d="m 223.397,255.996 c 0.273,-0.304 0.543,-0.609 0.813,-0.916 -0.27,0.308 -0.546,0.61 -0.82,0.916 z"
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon611"
|
||||
points="224.922,315.118 213.839,337.971 233.739,353.752 208.963,359.337 209.032,384.735 189.217,368.845 169.403,384.735 169.472,359.337 144.696,353.752 164.596,337.971 153.513,315.118 178.259,320.836 189.217,297.923 200.175,320.836 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon613"
|
||||
points="404.106,334.588 398.82,345.488 408.312,353.016 396.494,355.679 396.526,367.793 387.076,360.215 377.626,367.793 377.658,355.679 365.841,353.016 375.332,345.488 370.047,334.588 381.85,337.316 387.076,326.387 392.303,337.316 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon615"
|
||||
points="355.483,218.649 350.197,229.55 359.688,237.078 347.871,239.741 347.903,251.856 338.453,244.276 329.002,251.856 329.035,239.741 317.217,237.078 326.708,229.55 321.424,218.649 333.226,221.378 338.453,210.448 343.68,221.378 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon617"
|
||||
points="404.106,152.398 398.82,163.3 408.311,170.827 396.494,173.491 396.526,185.605 387.076,178.025 377.626,185.605 377.658,173.491 365.841,170.827 375.332,163.3 370.047,152.398 381.85,155.128 387.076,144.198 392.303,155.128 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon619"
|
||||
points="446.576,202.087 441.292,212.987 450.783,220.514 438.965,223.178 438.998,235.292 429.547,227.714 420.097,235.292 420.129,223.178 408.312,220.514 417.803,212.987 412.517,202.087 424.32,204.815 429.547,193.886 434.774,204.815 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon621"
|
||||
points="416.593,264.508 405.83,272.328 409.942,284.98 399.179,277.161 388.414,284.98 392.526,272.328 381.763,264.508 395.067,264.508 399.179,251.856 403.289,264.508 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon623"
|
||||
points="210.833,140.985 256,140.985 256,200.344 196.897,200.344 256,233.179 256,255.996 229.32,255.996 155.826,215.17 155.826,255.996 100.174,255.996 100.174,207.423 12.744,255.996 0,255.996 0,225.443 45.167,200.344 0,200.344 0,140.985 59.103,140.985 0,108.139 0,85.333 26.68,85.333 100.174,126.16 100.174,85.333 155.826,85.333 155.826,133.906 243.256,85.333 256,85.333 256,115.886 "
|
||||
style="fill:#f0f0f0" />
|
||||
</g>
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon627"
|
||||
points="112,154.662 0,154.662 0,186.662 112,186.662 112,255.996 144,255.996 144,186.662 256,186.662 256,154.662 144,154.662 144,85.33 112,85.33 "
|
||||
style="fill:#d80027" />
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon629"
|
||||
points="256,240.259 184.153,200.344 155.826,200.344 256,255.996 "
|
||||
style="fill:#0052b4" />
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon631"
|
||||
points="256,240.259 184.153,200.344 155.826,200.344 256,255.996 "
|
||||
style="fill:#f0f0f0" />
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g637">
|
||||
<polygon
|
||||
id="polygon633"
|
||||
points="256,240.259 184.153,200.344 155.826,200.344 256,255.996 "
|
||||
style="fill:#d80027" />
|
||||
<polygon
|
||||
id="polygon635"
|
||||
points="0,255.996 0,255.996 100.174,200.344 71.846,200.344 0,240.259 "
|
||||
style="fill:#d80027" />
|
||||
</g>
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon639"
|
||||
points="0,101.067 71.847,140.982 100.174,140.982 0,85.33 "
|
||||
style="fill:#0052b4" />
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon641"
|
||||
points="0,101.067 71.847,140.982 100.174,140.982 0,85.33 "
|
||||
style="fill:#f0f0f0" />
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g647">
|
||||
<polygon
|
||||
id="polygon643"
|
||||
points="0,101.067 71.847,140.982 100.174,140.982 0,85.33 "
|
||||
style="fill:#d80027" />
|
||||
<polygon
|
||||
id="polygon645"
|
||||
points="256,85.33 256,85.33 155.826,140.982 184.154,140.982 256,101.067 "
|
||||
style="fill:#d80027" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g649">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g651">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g653">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g655">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g657">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g659">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g661">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g663">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g665">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g667">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g669">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g671">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g673">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g675">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g677">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
|
|
@ -108,6 +108,7 @@ defineProps({
|
|||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 .5rem;
|
||||
color: var(--text-light);
|
||||
background: var(--shadow);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ defineProps({
|
|||
|
||||
<style scoped>
|
||||
.countries:not(:last-child) {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
border-bottom: solid 1px var(--shadow-weak-30);
|
||||
}
|
||||
|
||||
.country {
|
||||
|
|
@ -53,12 +53,12 @@ defineProps({
|
|||
overflow: hidden;
|
||||
|
||||
.flag {
|
||||
width: 2rem;
|
||||
padding: .25rem .5rem;
|
||||
width: 1.5rem;
|
||||
padding: .25rem .25rem .25rem .5rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: .25rem .5rem;;
|
||||
padding: .25rem .6rem;
|
||||
fill: var(--shadow);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
|
|||
display: flex;
|
||||
width: 8rem;
|
||||
height: 3rem;
|
||||
box-sizing: border-box;
|
||||
padding: .75rem;
|
||||
margin-right: 1rem;
|
||||
fill: var(--primary);
|
||||
|
|
@ -82,6 +83,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
|
|||
.nav-item .link {
|
||||
font-size: .9rem;
|
||||
color: var(--shadow-strong-10);
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,137 @@
|
|||
<template>
|
||||
<div class="tooltip">
|
||||
<slot name="tooltip" />
|
||||
<div class="tooltip-container">
|
||||
<div
|
||||
ref="handle"
|
||||
class="tooltip-handle"
|
||||
@click.stop="toggle"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="opened"
|
||||
class="tooltip-layer"
|
||||
>
|
||||
<div
|
||||
ref="tooltip"
|
||||
class="tooltip-wrapper"
|
||||
:style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
|
||||
>
|
||||
<div
|
||||
class="tooltip"
|
||||
@click="close"
|
||||
>
|
||||
<slot
|
||||
name="tooltip"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
nextTick,
|
||||
} from 'vue';
|
||||
|
||||
// import { useFloating } from '@floating-ui/vue';
|
||||
import { computePosition, shift } from '@floating-ui/dom';
|
||||
|
||||
import events from '#/src/events.js';
|
||||
|
||||
const handle = ref(null);
|
||||
const tooltip = ref(null);
|
||||
const opened = ref(false);
|
||||
|
||||
const position = ref({
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
},
|
||||
});
|
||||
|
||||
async function open() {
|
||||
events.emit('blur');
|
||||
opened.value = true;
|
||||
|
||||
await nextTick();
|
||||
|
||||
console.log(handle.value);
|
||||
|
||||
/*
|
||||
const { floatingStyles } = useFloating(handle, tooltip, {
|
||||
placement: props.placement,
|
||||
});
|
||||
|
||||
styles.value = floatingStyles.value;
|
||||
*/
|
||||
|
||||
const { x, y } = await computePosition(handle.value, tooltip.value, {
|
||||
placement: props.placement,
|
||||
middleware: [shift()],
|
||||
});
|
||||
|
||||
position.value.x = x;
|
||||
position.value.y = y;
|
||||
|
||||
console.log(x, y);
|
||||
|
||||
console.log('open!');
|
||||
}
|
||||
|
||||
function close() {
|
||||
console.log('close!');
|
||||
opened.value = false;
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (opened.value) {
|
||||
close();
|
||||
} else {
|
||||
open();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
events.on('blur', close);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
events.off('blur', close);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tooltip-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.tooltip-wrapper {
|
||||
width: max-content;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: .25rem;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
max-height: calc(100vh - .5rem);
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
"": {
|
||||
"version": "0.3.1",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.5.3",
|
||||
"@floating-ui/vue": "^1.0.2",
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"@vue/compiler-sfc": "^3.3.10",
|
||||
"@vue/server-renderer": "^3.3.10",
|
||||
|
|
@ -17,9 +19,9 @@
|
|||
"express": "^4.18.2",
|
||||
"express-promise-router": "^4.1.1",
|
||||
"express-query-boolean": "^2.0.0",
|
||||
"floating-vue": "^2.0.0-beta.24",
|
||||
"knex": "^3.1.0",
|
||||
"manticoresearch": "^4.0.0",
|
||||
"mitt": "^3.0.1",
|
||||
"nanoid": "^5.0.4",
|
||||
"pg": "^8.11.3",
|
||||
"sirv": "^2.0.3",
|
||||
|
|
@ -2447,11 +2449,12 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz",
|
||||
"integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==",
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
|
||||
"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.1.0"
|
||||
"@floating-ui/core": "^1.4.2",
|
||||
"@floating-ui/utils": "^0.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
|
|
@ -2459,6 +2462,40 @@
|
|||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
|
||||
"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
|
||||
},
|
||||
"node_modules/@floating-ui/vue": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
|
||||
"integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.4.5",
|
||||
"vue-demi": ">=0.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/vue/node_modules/vue-demi": {
|
||||
"version": "0.14.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
|
||||
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.13",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
|
||||
|
|
@ -4485,24 +4522,6 @@
|
|||
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/floating-vue": {
|
||||
"version": "2.0.0-beta.24",
|
||||
"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.24.tgz",
|
||||
"integrity": "sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "~1.1.1",
|
||||
"vue-resize": "^2.0.0-alpha.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@nuxt/kit": "^3.2.0",
|
||||
"vue": "^3.2.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@nuxt/kit": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
|
|
@ -5514,6 +5533,11 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||
},
|
||||
"node_modules/mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
@ -7679,14 +7703,6 @@
|
|||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vue-resize": {
|
||||
"version": "2.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
|
@ -9302,11 +9318,12 @@
|
|||
}
|
||||
},
|
||||
"@floating-ui/dom": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz",
|
||||
"integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==",
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
|
||||
"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
|
||||
"requires": {
|
||||
"@floating-ui/core": "^1.1.0"
|
||||
"@floating-ui/core": "^1.4.2",
|
||||
"@floating-ui/utils": "^0.1.3"
|
||||
}
|
||||
},
|
||||
"@floating-ui/utils": {
|
||||
|
|
@ -9314,6 +9331,23 @@
|
|||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
|
||||
"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
|
||||
},
|
||||
"@floating-ui/vue": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
|
||||
"integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
|
||||
"requires": {
|
||||
"@floating-ui/dom": "^1.4.5",
|
||||
"vue-demi": ">=0.13.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-demi": {
|
||||
"version": "0.14.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
|
||||
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@humanwhocodes/config-array": {
|
||||
"version": "0.11.13",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
|
||||
|
|
@ -10847,15 +10881,6 @@
|
|||
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
|
||||
"dev": true
|
||||
},
|
||||
"floating-vue": {
|
||||
"version": "2.0.0-beta.24",
|
||||
"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.24.tgz",
|
||||
"integrity": "sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==",
|
||||
"requires": {
|
||||
"@floating-ui/dom": "~1.1.1",
|
||||
"vue-resize": "^2.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
|
|
@ -11561,6 +11586,11 @@
|
|||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"mitt": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
|
||||
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
|
||||
},
|
||||
"mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
@ -12923,12 +12953,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"vue-resize": {
|
||||
"version": "2.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
|
||||
"requires": {}
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
"server:prod": "cross-env NODE_ENV=production node ./src/web/server"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.5.3",
|
||||
"@floating-ui/vue": "^1.0.2",
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"@vue/compiler-sfc": "^3.3.10",
|
||||
"@vue/server-renderer": "^3.3.10",
|
||||
|
|
@ -17,9 +19,9 @@
|
|||
"express": "^4.18.2",
|
||||
"express-promise-router": "^4.1.1",
|
||||
"express-query-boolean": "^2.0.0",
|
||||
"floating-vue": "^2.0.0-beta.24",
|
||||
"knex": "^3.1.0",
|
||||
"manticoresearch": "^4.0.0",
|
||||
"mitt": "^3.0.1",
|
||||
"nanoid": "^5.0.4",
|
||||
"pg": "^8.11.3",
|
||||
"sirv": "^2.0.3",
|
||||
|
|
|
|||
|
|
@ -57,19 +57,56 @@
|
|||
</ul>
|
||||
|
||||
<div class="filter">
|
||||
<RangeFilter
|
||||
label="age"
|
||||
:min="18"
|
||||
:max="100"
|
||||
:value="filters.age"
|
||||
:disabled="!filters.ageRequired"
|
||||
@enable="(checked) => updateFilter('ageRequired', checked, filters.ageRequired !== checked)"
|
||||
@input="(range) => updateFilter('age', range, false)"
|
||||
@change="(range) => updateFilter('age', range, true)"
|
||||
>
|
||||
<template #start><Icon icon="leaf" /></template>
|
||||
<template #end><Icon icon="tree3" /></template>
|
||||
</RangeFilter>
|
||||
<div class="filter-section">
|
||||
<RangeFilter
|
||||
label="age"
|
||||
:min="18"
|
||||
:max="100"
|
||||
:value="filters.age"
|
||||
:disabled="!filters.ageRequired"
|
||||
@enable="(checked) => updateFilter('ageRequired', checked, filters.ageRequired !== checked)"
|
||||
@input="(range) => updateFilter('age', range, false)"
|
||||
@change="(range) => updateFilter('age', range, true)"
|
||||
>
|
||||
<template #start><Icon icon="leaf" /></template>
|
||||
<template #end><Icon icon="tree3" /></template>
|
||||
</RangeFilter>
|
||||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-label">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="filters.dobRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateFilter('dobRequired', checked, true)"
|
||||
/>
|
||||
|
||||
<select
|
||||
v-model="filters.dobType"
|
||||
class="input select"
|
||||
@change="() => updateFilter('dobRequired', true, true)"
|
||||
>
|
||||
<option value="birthday">Birthday</option>
|
||||
<option value="dob">Date of birth</option>
|
||||
</select>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="input-container"
|
||||
@click="() => updateFilter('dobRequired', true, true)"
|
||||
>
|
||||
<input
|
||||
:value="filters.dob"
|
||||
:disabled="!filters.dobRequired"
|
||||
:max="maxDob"
|
||||
type="date"
|
||||
class="input"
|
||||
@change="(event) => updateFilter('dob', event.target.value, true)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter">
|
||||
|
|
@ -147,44 +184,33 @@
|
|||
</RangeFilter>
|
||||
</div>
|
||||
|
||||
<Tooltip class="filter">
|
||||
<span
|
||||
:class="{ enabled: filters.country }"
|
||||
class="filter-trigger"
|
||||
<div
|
||||
v-if="filteredCountries.length > 0"
|
||||
class="countries-container"
|
||||
>
|
||||
<input
|
||||
v-if="!filters.country"
|
||||
v-model="countryQuery"
|
||||
type="search"
|
||||
placeholder="Search country"
|
||||
class="input input-inline countries-search"
|
||||
>
|
||||
<img
|
||||
v-if="filters.country"
|
||||
:src="`/img/flags/${filters.country.toLowerCase()}.svg`"
|
||||
class="flag"
|
||||
>
|
||||
|
||||
<Icon
|
||||
v-else
|
||||
icon="earth2"
|
||||
/>Country
|
||||
</span>
|
||||
|
||||
<template #tooltip>
|
||||
<input
|
||||
v-model="countryQuery"
|
||||
placeholder="Search"
|
||||
class="input"
|
||||
>
|
||||
|
||||
<div class="countries-list">
|
||||
<Countries
|
||||
v-if="!countryQuery"
|
||||
v-if="!countryQuery && !filters.country && topCountries.length < filteredCountries.length"
|
||||
:countries="topCountries"
|
||||
:selected-country="country"
|
||||
:selected-country="filters.country"
|
||||
:update-value="updateFilter"
|
||||
/>
|
||||
|
||||
<Countries
|
||||
:countries="filteredCountries"
|
||||
:selected-country="country"
|
||||
:selected-country="filters.country"
|
||||
:update-value="updateFilter"
|
||||
/>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter">
|
||||
<Checkbox
|
||||
|
|
@ -210,6 +236,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import { format, subYears } from 'date-fns';
|
||||
|
||||
import navigate from '#/src/navigate.js';
|
||||
import { get } from '#/src/api.js';
|
||||
|
|
@ -218,7 +245,6 @@ import ActorTile from '#/components/actors/tile.vue';
|
|||
import Gender from '#/components/actors/gender.vue';
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
import RangeFilter from '#/components/filters/range.vue';
|
||||
import Tooltip from '#/components/tooltip/tooltip.vue';
|
||||
import Countries from '#/components/filters/countries.vue';
|
||||
|
||||
const { pageProps, urlParsed } = inject('pageContext');
|
||||
|
|
@ -230,12 +256,12 @@ const countries = ref(pageProps.countries);
|
|||
const countryQuery = ref('');
|
||||
|
||||
const topCountryAlpha2s = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
|
||||
const topCountries = computed(() => countries.value.filter((country) => topCountryAlpha2s.includes(country.alpha2)));
|
||||
const topCountries = computed(() => topCountryAlpha2s.map((alpha2) => countries.value.find((country) => country.alpha2 === alpha2)).filter(Boolean));
|
||||
const filteredCountries = computed(() => countries.value.filter((country) => new RegExp(countryQuery.value, 'i').test(country.name)));
|
||||
|
||||
actors.value = pageProps.actors;
|
||||
const maxDob = format(subYears(new Date(), 18), 'yyyy-MM-dd');
|
||||
|
||||
console.log(countries.value);
|
||||
actors.value = pageProps.actors;
|
||||
|
||||
const braSizes = 'ABCDEFGHIJKZ'.split('');
|
||||
const naturalBoobsValues = [true, undefined, false];
|
||||
|
|
@ -244,6 +270,10 @@ const filters = ref({
|
|||
gender: urlParsed.search.gender,
|
||||
ageRequired: !!urlParsed.search.age,
|
||||
age: urlParsed.search.age?.split(',').map((age) => Number(age)) || [18, 100],
|
||||
dobRequired: !!urlParsed.search.dob,
|
||||
dobType: urlParsed.search.dobt ? ({ bd: 'birthday', dob: 'dob' })[urlParsed.search.dobt] : 'birthday',
|
||||
dob: urlParsed.search.dob || format(subYears(new Date(), 21), 'yyyy-MM-dd'),
|
||||
country: urlParsed.search.c,
|
||||
braSizeRequired: !!urlParsed.search.cup,
|
||||
braSize: urlParsed.search.cup?.split(',') || ['A', 'Z'],
|
||||
naturalBoobs: urlParsed.search.nb ? urlParsed.search.nb === 'true' : undefined,
|
||||
|
|
@ -254,12 +284,17 @@ const filters = ref({
|
|||
avatarRequired: !!urlParsed.search.avatar,
|
||||
});
|
||||
|
||||
console.log(filters.value.dobType);
|
||||
|
||||
async function search() {
|
||||
const query = {
|
||||
q: q.value || undefined,
|
||||
gender: filters.value.gender || undefined,
|
||||
age: filters.value.ageRequired ? filters.value.age.join(',') : undefined,
|
||||
dob: filters.value.dobRequired ? filters.value.dob : undefined,
|
||||
dobt: filters.value.dobRequired ? ({ birthday: 'bd', dob: 'dob' })[filters.value.dobType] : undefined,
|
||||
cup: filters.value.braSizeRequired ? filters.value.braSize.join(',') : undefined,
|
||||
c: filters.value.country || undefined,
|
||||
nb: filters.value.naturalBoobs,
|
||||
height: filters.value.heightRequired ? filters.value.height.join(',') : undefined,
|
||||
weight: filters.value.weightRequired ? filters.value.weight.join(',') : undefined,
|
||||
|
|
@ -321,7 +356,6 @@ function updateFilter(prop, value, reload = true) {
|
|||
.filters {
|
||||
width: 17rem;
|
||||
flex-shrink: 0;
|
||||
padding: .5rem 0;
|
||||
border-right: solid 1px var(--shadow-weak-30);
|
||||
overflow-y: auto;
|
||||
|
||||
|
|
@ -331,7 +365,7 @@ function updateFilter(prop, value, reload = true) {
|
|||
}
|
||||
|
||||
.filter {
|
||||
padding: .5rem;
|
||||
padding: .5rem .25rem;
|
||||
border-bottom: solid 1px var(--shadow-weak-30);
|
||||
}
|
||||
|
||||
|
|
@ -394,7 +428,59 @@ function updateFilter(prop, value, reload = true) {
|
|||
}
|
||||
}
|
||||
|
||||
.countries {
|
||||
overflow: hidden;
|
||||
.select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.countries-container {
|
||||
border-bottom: solid 1px var(--shadow-weak-30);
|
||||
}
|
||||
|
||||
.countries-search {
|
||||
width: 100%;
|
||||
margin-bottom: .25rem;
|
||||
border-bottom: solid 1px var(--shadow-weak-40);
|
||||
}
|
||||
|
||||
.countries-list {
|
||||
max-height: 13rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
:deep(.country.selected) .country-name {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.filter-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--shadow);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon,
|
||||
.flag {
|
||||
fill: var(--shadow);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: -.1rem .75rem 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--shadow-strong);
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow-strong);
|
||||
}
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
color: var(--primary);
|
||||
|
||||
.icon {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@ import { fetchActors } from '#/src/actors.js';
|
|||
import { curateActorsQuery } from '#/src/web/actors.js';
|
||||
|
||||
export async function onBeforeRender(pageContext) {
|
||||
console.log(pageContext);
|
||||
|
||||
const {
|
||||
actors,
|
||||
countries,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gp" viewBox="0 0 640 480">
|
||||
<g fill-rule="evenodd" stroke-width="1pt">
|
||||
<path fill="#fff" d="M0 0h640v480H0z"/>
|
||||
<path fill="#00267f" d="M0 0h213.3v480H0z"/>
|
||||
<path fill="#f31830" d="M426.7 0H640v480H426.7z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 292 B |
|
|
@ -0,0 +1,195 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
height="341.34"
|
||||
width="512"
|
||||
sodipodi:docname="au.svg"
|
||||
xml:space="preserve"
|
||||
viewBox="0 0 512 341.34"
|
||||
y="0px"
|
||||
x="0px"
|
||||
id="Capa_1"
|
||||
version="1.1"><metadata
|
||||
id="metadata684"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs682" /><sodipodi:namedview
|
||||
inkscape:current-layer="Capa_1"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-x="0"
|
||||
inkscape:cy="170.67"
|
||||
inkscape:cx="256"
|
||||
inkscape:zoom="1.6386719"
|
||||
showgrid="false"
|
||||
id="namedview680"
|
||||
inkscape:window-height="1020"
|
||||
inkscape:window-width="1485"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
guidetolerance="10"
|
||||
gridtolerance="10"
|
||||
objecttolerance="10"
|
||||
borderopacity="1"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff" />
|
||||
<rect
|
||||
x="0"
|
||||
id="rect607"
|
||||
height="341.33701"
|
||||
width="512"
|
||||
style="fill:#0052b4"
|
||||
y="0.003000183" />
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g625">
|
||||
<path
|
||||
id="path609"
|
||||
d="m 223.397,255.996 c 0.273,-0.304 0.543,-0.609 0.813,-0.916 -0.27,0.308 -0.546,0.61 -0.82,0.916 z"
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon611"
|
||||
points="224.922,315.118 213.839,337.971 233.739,353.752 208.963,359.337 209.032,384.735 189.217,368.845 169.403,384.735 169.472,359.337 144.696,353.752 164.596,337.971 153.513,315.118 178.259,320.836 189.217,297.923 200.175,320.836 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon613"
|
||||
points="404.106,334.588 398.82,345.488 408.312,353.016 396.494,355.679 396.526,367.793 387.076,360.215 377.626,367.793 377.658,355.679 365.841,353.016 375.332,345.488 370.047,334.588 381.85,337.316 387.076,326.387 392.303,337.316 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon615"
|
||||
points="355.483,218.649 350.197,229.55 359.688,237.078 347.871,239.741 347.903,251.856 338.453,244.276 329.002,251.856 329.035,239.741 317.217,237.078 326.708,229.55 321.424,218.649 333.226,221.378 338.453,210.448 343.68,221.378 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon617"
|
||||
points="404.106,152.398 398.82,163.3 408.311,170.827 396.494,173.491 396.526,185.605 387.076,178.025 377.626,185.605 377.658,173.491 365.841,170.827 375.332,163.3 370.047,152.398 381.85,155.128 387.076,144.198 392.303,155.128 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon619"
|
||||
points="446.576,202.087 441.292,212.987 450.783,220.514 438.965,223.178 438.998,235.292 429.547,227.714 420.097,235.292 420.129,223.178 408.312,220.514 417.803,212.987 412.517,202.087 424.32,204.815 429.547,193.886 434.774,204.815 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon621"
|
||||
points="416.593,264.508 405.83,272.328 409.942,284.98 399.179,277.161 388.414,284.98 392.526,272.328 381.763,264.508 395.067,264.508 399.179,251.856 403.289,264.508 "
|
||||
style="fill:#f0f0f0" />
|
||||
<polygon
|
||||
id="polygon623"
|
||||
points="210.833,140.985 256,140.985 256,200.344 196.897,200.344 256,233.179 256,255.996 229.32,255.996 155.826,215.17 155.826,255.996 100.174,255.996 100.174,207.423 12.744,255.996 0,255.996 0,225.443 45.167,200.344 0,200.344 0,140.985 59.103,140.985 0,108.139 0,85.333 26.68,85.333 100.174,126.16 100.174,85.333 155.826,85.333 155.826,133.906 243.256,85.333 256,85.333 256,115.886 "
|
||||
style="fill:#f0f0f0" />
|
||||
</g>
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon627"
|
||||
points="112,154.662 0,154.662 0,186.662 112,186.662 112,255.996 144,255.996 144,186.662 256,186.662 256,154.662 144,154.662 144,85.33 112,85.33 "
|
||||
style="fill:#d80027" />
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon629"
|
||||
points="256,240.259 184.153,200.344 155.826,200.344 256,255.996 "
|
||||
style="fill:#0052b4" />
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon631"
|
||||
points="256,240.259 184.153,200.344 155.826,200.344 256,255.996 "
|
||||
style="fill:#f0f0f0" />
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g637">
|
||||
<polygon
|
||||
id="polygon633"
|
||||
points="256,240.259 184.153,200.344 155.826,200.344 256,255.996 "
|
||||
style="fill:#d80027" />
|
||||
<polygon
|
||||
id="polygon635"
|
||||
points="0,255.996 0,255.996 100.174,200.344 71.846,200.344 0,240.259 "
|
||||
style="fill:#d80027" />
|
||||
</g>
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon639"
|
||||
points="0,101.067 71.847,140.982 100.174,140.982 0,85.33 "
|
||||
style="fill:#0052b4" />
|
||||
<polygon
|
||||
transform="translate(0,-85.33)"
|
||||
id="polygon641"
|
||||
points="0,101.067 71.847,140.982 100.174,140.982 0,85.33 "
|
||||
style="fill:#f0f0f0" />
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g647">
|
||||
<polygon
|
||||
id="polygon643"
|
||||
points="0,101.067 71.847,140.982 100.174,140.982 0,85.33 "
|
||||
style="fill:#d80027" />
|
||||
<polygon
|
||||
id="polygon645"
|
||||
points="256,85.33 256,85.33 155.826,140.982 184.154,140.982 256,101.067 "
|
||||
style="fill:#d80027" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g649">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g651">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g653">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g655">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g657">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g659">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g661">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g663">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g665">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g667">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g669">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g671">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g673">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g675">
|
||||
</g>
|
||||
<g
|
||||
transform="translate(0,-85.33)"
|
||||
id="g677">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
|
|
@ -1,10 +1,8 @@
|
|||
import { createSSRApp, h } from 'vue';
|
||||
import FloatingVue from 'floating-vue';
|
||||
|
||||
import { setPageContext } from './usePageContext.js';
|
||||
|
||||
import '../assets/css/style.css';
|
||||
import 'floating-vue/dist/style.css';
|
||||
|
||||
import Container from './container.vue';
|
||||
import Link from '../components/link/link.vue';
|
||||
|
|
@ -32,8 +30,6 @@ function createApp(Page, pageProps, pageContext) {
|
|||
|
||||
app.provide('pageContext', pageContext);
|
||||
|
||||
app.use(FloatingVue);
|
||||
|
||||
app.component('Link', Link);
|
||||
app.component('Icon', Icon);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div
|
||||
class="container"
|
||||
@click="blur"
|
||||
>
|
||||
<Header />
|
||||
|
||||
<div class="content">
|
||||
|
|
@ -9,11 +12,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import Header from '../components/header/header.vue';
|
||||
</script>
|
||||
import events from '#/src/events.js';
|
||||
|
||||
<style>
|
||||
</style>
|
||||
import Header from '../components/header/header.vue';
|
||||
|
||||
function blur() {
|
||||
events.emit('blur');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -106,13 +106,17 @@ function buildQuery(filters) {
|
|||
});
|
||||
}
|
||||
|
||||
if (filters.gender) {
|
||||
query.bool.must.push({
|
||||
equals: {
|
||||
gender: filters.gender,
|
||||
},
|
||||
});
|
||||
}
|
||||
['gender', 'country'].forEach((attribute) => {
|
||||
if (filters[attribute]) {
|
||||
console.log(attribute, filters[attribute]);
|
||||
|
||||
query.bool.must.push({
|
||||
equals: {
|
||||
[attribute]: filters[attribute],
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
['age', 'height', 'weight'].forEach((attribute) => {
|
||||
if (filters[attribute]) {
|
||||
|
|
@ -127,6 +131,39 @@ function buildQuery(filters) {
|
|||
}
|
||||
});
|
||||
|
||||
if (filters.dateOfBirth && filters.dobType === 'dateOfBirth') {
|
||||
query.bool.must.push({
|
||||
equals: {
|
||||
date_of_birth: Math.floor(filters.dateOfBirth.getTime() / 1000),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (filters.dateOfBirth && filters.dobType === 'birthday') {
|
||||
expressions.month_of_birth = 'month(date_of_birth)';
|
||||
expressions.day_of_birth = 'day(date_of_birth)';
|
||||
|
||||
const month = filters.dateOfBirth.getMonth() + 1;
|
||||
const day = filters.dateOfBirth.getDate();
|
||||
|
||||
query.bool.must.push({
|
||||
bool: {
|
||||
must: [
|
||||
{
|
||||
equals: {
|
||||
month_of_birth: month,
|
||||
},
|
||||
},
|
||||
{
|
||||
equals: {
|
||||
day_of_birth: day,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (filters.cup) {
|
||||
expressions.cup_in_range = `regex(cup, '^[${filters.cup[0]}-${filters.cup[1]}]')`;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,28 @@ import knex from './knex.js';
|
|||
function curateCountry(countryEntry) {
|
||||
return {
|
||||
name: countryEntry.name,
|
||||
alias: countryEntry.alias,
|
||||
alpha2: countryEntry.alpha2,
|
||||
code: countryEntry.code,
|
||||
};
|
||||
}
|
||||
|
||||
export async function fetchCountriesByAlpha2(alpha2s) {
|
||||
const entries = await knex('countries').whereIn('alpha2', alpha2s);
|
||||
export async function fetchCountriesByAlpha2(alpha2s, options = {}) {
|
||||
const entries = await knex('countries')
|
||||
.whereIn('alpha2', alpha2s)
|
||||
.orderBy(knex.raw('coalesce(alias, name)'));
|
||||
|
||||
return entries.map((entry) => curateCountry(entry));
|
||||
if (options.preserveOrder) {
|
||||
return alpha2s.map((alpha2) => {
|
||||
const countryEntry = entries.find((entry) => entry.alpha2 === alpha2);
|
||||
|
||||
if (!countryEntry) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return curateCountry(countryEntry);
|
||||
}).filter(Boolean);
|
||||
}
|
||||
|
||||
return entries.map((countryEntry) => curateCountry(countryEntry));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import mitt from 'mitt';
|
||||
|
||||
export default mitt();
|
||||
|
|
@ -7,7 +7,10 @@ export function curateActorsQuery(query) {
|
|||
query: query.q,
|
||||
gender: query.gender,
|
||||
age: query.age?.split(',').map((age) => Number(age)),
|
||||
dateOfBirth: query.dob && new Date(query.dob),
|
||||
dobType: ({ dob: 'dateOfBirth', bd: 'birthday' })[query.dobt] || 'birthday',
|
||||
cup: query.cup?.split(','),
|
||||
country: query.c,
|
||||
naturalBoobs: query.nb,
|
||||
height: query.height?.split(',').map((height) => Number(height)),
|
||||
weight: query.weight?.split(',').map((weight) => Number(weight)),
|
||||
|
|
|
|||
Loading…
Reference in New Issue