Added basic filter for actor boob size.

assets/components/actors/actors.vue

@@ -123,12 +123,6 @@
 			</ul>
 		</nav>
 
-		<Pagination
-			ref="pagination"
-			:items-total="totalCount"
-			:items-per-page="limit"
-		/>
-
 		<div class="tiles">
 			<Actor
 				v-for="actor in actors"
@@ -383,10 +377,8 @@ export default {
 }
 
 .filter-section {
-	&:not(:last-child) {
 	margin: 0 0 .5rem 0;
 }
-}
 
 .filter-label {
 	display: flex;
@@ -412,20 +404,28 @@ export default {
 			color: var(--enabled);
 		}
 
-		.range-toggle::-webkit-slider-thumb {
+		.range-toggle {
+			background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--enabled-background) calc(.75rem + 1px));
+
+			&::-webkit-slider-thumb {
 				background: var(--enabled);
 			}
 		}
+	}
 
 	&.off {
 		.range-label.off {
 			color: var(--disabled);
 		}
 
-		.range-toggle::-webkit-slider-thumb {
+		.range-toggle {
+			background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--disabled-background) calc(.75rem + 1px));
+
+			&::-webkit-slider-thumb {
 				background: var(--disabled);
 			}
 		}
+	}
 
 	.icon {
 		fill: var(--shadow);
@@ -465,26 +465,27 @@ export default {
 .range,
 .range-toggle {
 	flex-grow: 1;
-	height: 1rem;
+	height: 1.5rem;
 	appearance: none;
-	border-radius: .5rem;
+	padding: 2px;
+	border-radius: .75rem;
 	background: var(--shadow-hint);
 	cursor: pointer;
 
 	&::-webkit-slider-thumb {
 		appearance: none;
 		background: var(--primary);
-		width: 1rem;
+		width: 1.5rem;
-		height: 1rem;
+		height: 1.5rem;
-		border-radius: .5rem;
+		border-radius: .75rem;
 	}
 }
 
 .range-toggle {
-	background: radial-gradient(circle at center, var(--shadow-weak) 0, var(--shadow-weak) .5rem, var(--shadow-hint) .5rem);
+	background: radial-gradient(circle, var(--shadow-hint) .75rem, var(--shadow-hint) calc(.75rem + 1px));
 
 	&::-webkit-slider-thumb {
-		background: #aaa;
+		background: var(--shadow-hint);
 	}
 }
 

assets/components/tooltip/tooltip.vue

@@ -3,6 +3,7 @@
 		<div
 			ref="trigger"
 			class="trigger noselect"
+			@mouseenter="toggle"
 			@click.stop="toggle"
 		>
 			<slot />

assets/css/_theme.scss

@@ -39,7 +39,9 @@ $breakpoint4: 1500px;
     --success: #5c2;
 
 	--enabled: #5c2;
+	--enabled-background: rgba(0, 255, 0, .1);
 	--disabled: #c20;
+	--disabled-background: rgba(255, 0, 0, .1);
 }
 
 .light {

assets/js/actors/actions.js

@@ -272,15 +272,12 @@ function initActorActions(store, router) {
 			|| (gender === 'all' && ' ')
 			|| `gender: { equalTo: "${gender}" }`;
 
-		const naturalBoobsFilter = (naturalBoobs && 'naturalBoobs: { equalTo: true }')
-			|| (naturalBoobs === false && 'naturalBoobs: { equalTo: false }')
-			|| '';
-
 		const { connection: { actors, totalCount } } = await graphql(`
             query Actors(
                 $limit: Int,
                 $offset: Int = 0,
                 $letter: String! = "",
+				$naturalBoobs: Boolean,
             ) {
 				connection: actorsConnection(
                     first: $limit,
@@ -292,9 +289,11 @@ function initActorActions(store, router) {
 						}
                         name: {
                             startsWith: $letter
+                        }
+						naturalBoobs: {
+							equalTo: $naturalBoobs
 						}
 						${genderFilter}
-						${naturalBoobsFilter}
                     }
                 ) {
 					totalCount

src/web/postgraphile.js

@@ -26,6 +26,7 @@ module.exports = postgraphile(
 		graphileBuildOptions: {
 			pgOmitListSuffix: true,
 			connectionFilterRelations: true,
+			connectionFilterAllowNullInput: true,
 		},
 		appendPlugins: [
 			PgSimplifyInflectorPlugin,