mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-11 03:49:07 +00:00
Kevin
8e586811ec
* On every route change, update local variables from query params * ResultSection is keyed to query to force re-render * Resolved lint warnings * replace webpack w/ vite * update all imports with alias @ and scss * vite environment variables, also typed * upgraded eslint, defined new rules & added ignore comments * resolved linting issues * moved index.html to project root * updated dockerfile w/ build stage before runtime image definition * sign drone config
89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<torrent-search-results
|
|
:query="query"
|
|
:tmdb-id="tmdbId"
|
|
:class="{ truncated: truncated }"
|
|
><div
|
|
v-if="truncated"
|
|
class="load-more"
|
|
tabindex="0"
|
|
role="button"
|
|
@click="truncated = false"
|
|
@keydown.enter="truncated = false"
|
|
>
|
|
<icon-arrow-down />
|
|
</div>
|
|
</torrent-search-results>
|
|
|
|
<div class="edit-query-btn-container">
|
|
<seasonedButton @click="openInTorrentPage"
|
|
>View on torrent page</seasonedButton
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from "vue-router";
|
|
import { ref, defineProps, computed } from "vue";
|
|
import TorrentSearchResults from "@/components/torrent/TorrentSearchResults.vue";
|
|
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
|
|
import IconArrowDown from "@/icons/IconArrowDown.vue";
|
|
import type { Ref } from "vue";
|
|
|
|
interface Props {
|
|
query: string;
|
|
tmdbId?: number;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const router = useRouter();
|
|
|
|
const truncated: Ref<boolean> = ref(true);
|
|
|
|
function openInTorrentPage() {
|
|
if (!props.query?.length) {
|
|
router.push("/torrents");
|
|
return;
|
|
}
|
|
|
|
router.push({ path: "/torrents", query: { query: props.query } });
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:global(.truncated .torrent-table) {
|
|
position: relative;
|
|
max-height: 500px;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.load-more {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
bottom: 0rem;
|
|
width: 100%;
|
|
height: 3rem;
|
|
cursor: pointer;
|
|
background: linear-gradient(
|
|
to top,
|
|
var(--background-color) 20%,
|
|
var(--background-0) 100%
|
|
);
|
|
}
|
|
|
|
svg {
|
|
height: 30px;
|
|
fill: var(--text-color);
|
|
}
|
|
|
|
.edit-query-btn-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|