From 3c3be10c4eea3615542513f309af34b6cf80c02d Mon Sep 17 00:00:00 2001 From: DebaucheryLibrarian Date: Wed, 3 Jan 2024 02:52:41 +0100 Subject: [PATCH] Added country and birthday filters to actors page. --- assets/css/inputs.css | 16 ++- assets/css/style.css | 4 - assets/css/tooltip.css | 218 +++++++++++++++++++++++++++++- assets/img/flags/svg-basic/gp.svg | 7 + assets/img/flags/svg-basic/hm.svg | 195 ++++++++++++++++++++++++++ components/actors/tile.vue | 1 + components/filters/countries.vue | 8 +- components/header/header.vue | 2 + components/tooltip/tooltip.vue | 136 ++++++++++++++++++- package-lock.json | 124 ++++++++++------- package.json | 4 +- pages/actors/+Page.vue | 182 ++++++++++++++++++------- pages/actors/+onBeforeRender.js | 2 - public/img/flags/gp.svg | 7 + public/img/flags/hm.svg | 195 ++++++++++++++++++++++++++ renderer/app.js | 4 - renderer/container.vue | 16 ++- src/actors.js | 51 ++++++- src/countries.js | 21 ++- src/events.js | 3 + src/web/actors.js | 3 + 21 files changed, 1061 insertions(+), 138 deletions(-) create mode 100755 assets/img/flags/svg-basic/gp.svg create mode 100755 assets/img/flags/svg-basic/hm.svg create mode 100755 public/img/flags/gp.svg create mode 100755 public/img/flags/hm.svg create mode 100644 src/events.js diff --git a/assets/css/inputs.css b/assets/css/inputs.css index df85447..bc2c205 100644 --- a/assets/css/inputs.css +++ b/assets/css/inputs.css @@ -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; } diff --git a/assets/css/style.css b/assets/css/style.css index 10266a7..a622add 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -11,10 +11,6 @@ body, height: 100%; } -* { - box-sizing: border-box; -} - body { margin: 0; color: var(--text); diff --git a/assets/css/tooltip.css b/assets/css/tooltip.css index 1a7abe2..6173b5c 100644 --- a/assets/css/tooltip.css +++ b/assets/css/tooltip.css @@ -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 } diff --git a/assets/img/flags/svg-basic/gp.svg b/assets/img/flags/svg-basic/gp.svg new file mode 100755 index 0000000..24a8260 --- /dev/null +++ b/assets/img/flags/svg-basic/gp.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/img/flags/svg-basic/hm.svg b/assets/img/flags/svg-basic/hm.svg new file mode 100755 index 0000000..1ef69a8 --- /dev/null +++ b/assets/img/flags/svg-basic/hm.svg @@ -0,0 +1,195 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/actors/tile.vue b/components/actors/tile.vue index db320af..7c4b2d2 100644 --- a/components/actors/tile.vue +++ b/components/actors/tile.vue @@ -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); diff --git a/components/filters/countries.vue b/components/filters/countries.vue index 2d42bc1..2f6dc43 100755 --- a/components/filters/countries.vue +++ b/components/filters/countries.vue @@ -43,7 +43,7 @@ defineProps({ diff --git a/package-lock.json b/package-lock.json index 5541f93..04bda18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index ba43664..7c33f7f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pages/actors/+Page.vue b/pages/actors/+Page.vue index e3089cf..45fd844 100644 --- a/pages/actors/+Page.vue +++ b/pages/actors/+Page.vue @@ -57,19 +57,56 @@
- - - - +
+ + + + +
+ +
+ + +
+ +
+
@@ -147,44 +184,33 @@
- - + - - - Country - - - - + +
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); + } + } } diff --git a/pages/actors/+onBeforeRender.js b/pages/actors/+onBeforeRender.js index 59500ad..28fc3f0 100644 --- a/pages/actors/+onBeforeRender.js +++ b/pages/actors/+onBeforeRender.js @@ -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, diff --git a/public/img/flags/gp.svg b/public/img/flags/gp.svg new file mode 100755 index 0000000..24a8260 --- /dev/null +++ b/public/img/flags/gp.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/img/flags/hm.svg b/public/img/flags/hm.svg new file mode 100755 index 0000000..1ef69a8 --- /dev/null +++ b/public/img/flags/hm.svg @@ -0,0 +1,195 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/renderer/app.js b/renderer/app.js index 41c61d2..18f973d 100644 --- a/renderer/app.js +++ b/renderer/app.js @@ -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); diff --git a/renderer/container.vue b/renderer/container.vue index 984a0b2..f75e624 100644 --- a/renderer/container.vue +++ b/renderer/container.vue @@ -1,5 +1,8 @@ +import events from '#/src/events.js'; - +import Header from '../components/header/header.vue'; + +function blur() { + events.emit('blur'); +} +