Added heart button to search results. Changed warning page button design.

assets/components/container/warning.vue

@@ -129,18 +129,19 @@ export default {
 
 .button {
 	display: inline-flex;
+	flex-basis: 0;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	border: none;
-	font-size: 1.5rem;
 	padding: 0;
-	border: solid 2px transparent;
+	position: relative;
+	border-radius: 1rem;
 	color: var(--lighten-strong);
-	background: none;
 	cursor: pointer;
+	font-size: 1.5rem;
 	text-decoration: none;
-	flex-basis: 0;
+	transition: border .5s ease;
 
 	&.leave {
 		flex-direction: row;
@@ -158,12 +159,28 @@ export default {
 		flex-grow: 1;
 	}
 
-	&.straight {
-		border-color: var(--primary);
+	&.straight,
+	&.queer {
+		background: var(--darken-censor);
+
+		&:before {
+			content: '';
+			width: calc(100% + .3rem);
+			height: calc(100% + .25rem);
+			position: absolute;
+			z-index: -1;
+			border-radius: 1.1rem;
+			filter: blur(.5rem);
+			transition: filter .2s ease;
+		}
 	}
 
-	&.queer {
-		border-image: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff) 1;
+	&.straight:before {
+		background: var(--primary);
+	}
+
+	&.queer:before {
+		background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff);
 	}
 
 	&:not(:last-child) {
@@ -180,6 +197,11 @@ export default {
 		.icon {
 			fill: var(--text-light);
 		}
+
+		&.straight:before,
+		&.queer:before {
+			filter: blur(0);
+		}
 	}
 }
 

assets/components/search/search.vue

@@ -5,7 +5,7 @@
 			class="summary"
 		>Searching...</span>
 
-		<template v-if="!loader && actors.length > 0">
+		<template v-if="actors.length > 0">
 			<span class="summary">Found {{ actors.length }} actors for '{{ query }}'</span>
 
 			<div class="tiles">
@@ -18,7 +18,7 @@
 			</div>
 		</template>
 
-		<template v-if="!loader && releases.length > 0">
+		<template v-if="releases.length > 0">
 			<span class="summary">Found {{ releases.length }} releases for '{{ query }}'</span>
 
 			<Releases

assets/js/ui/actions.js

@@ -1,7 +1,8 @@
 import { graphql } from '../api';
+import { releaseFields } from '../fragments';
 import { curateRelease, curateActor } from '../curate';
 
-function initUiActions(_store, _router) {
+function initUiActions(store, _router) {
 	function setTagFilter({ commit }, filter) {
 		const tagFilter = Array.from(new Set(filter));
 
@@ -33,6 +34,8 @@ function initUiActions(_store, _router) {
             query SearchReleases(
                 $query: String!
                 $limit: Int = 20
+				$hasAuth: Boolean!
+				$userId: Int
             ) {
                 results: searchReleases(
                     query: $query
@@ -45,57 +48,7 @@ function initUiActions(_store, _router) {
 					}
                 ) {
 					release {
-						id
-						title
-						slug
-						date
-						url
-						isNew
-						entity {
-							id
-							slug
-							name
-							url
-							type
-							independent
-							parent {
-								id
-								slug
-								name
-								url
-								type
-							}
-						}
-						actors: releasesActors {
-							actor {
-								id
-								slug
-								name
-							}
-						}
-						tags: releasesTags(orderBy: TAG_BY_TAG_ID__PRIORITY_DESC) {
-							tag {
-								id
-								name
-								slug
-							}
-						}
-						poster: releasesPosterByReleaseId {
-							media {
-								id
-								thumbnail
-								lazy
-								isS3
-							}
-						}
-						covers: releasesCovers {
-							media {
-								id
-								thumbnail
-								lazy
-								isS3
-							}
-						}
+						${releaseFields}
 					}
 					rank
                 }
@@ -168,6 +121,8 @@ function initUiActions(_store, _router) {
         `, {
 			query,
 			limit,
+			hasAuth: !!store.state.auth.user,
+			userId: store.state.auth.user?.id,
 		});
 
 		return {