KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Testing out bottom align mobile navigation content

Browse Source
This commit is contained in:
Kevin
2022-01-09 16:00:02 +01:00
parent f180b7f39b
commit 74b96225c6
6 changed files with 370 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/ListHeader.vue
View File

@@ -1,12 +1,17 @@
<template> <template>
<header :class="{ 'sticky': sticky }"> <header :class="{ sticky: sticky }">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
<div v-if="info instanceof Array" class="flex flex-direction-column"> <div v-if="info instanceof Array" class="flex flex-direction-column">
<span v-for="item in info" class="info">{{ item }}</span> <span v-for="item in info" class="info">{{ item }}</span>
</div> </div>
<span v-else class="info">{{ info }}</span> <span v-else class="info">{{ info }}</span>
<router-link v-if="link" :to="link" class='view-more' :aria-label="`View all ${title}`"> <router-link
v-if="link"
:to="link"
class="view-more"
:aria-label="`View all ${title}`"
>
View All View All
</router-link> </router-link>
</header> </header>
@@ -33,31 +38,38 @@ export default {
required: false required: false
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './src/scss/variables'; @import "./src/scss/variables";
@import './src/scss/media-queries'; @import "./src/scss/media-queries";
@import './src/scss/main'; @import "./src/scss/main";
header { header {
width: 100%; width: 100%;
min-height: 80px; min-height: 45px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
@include tablet-min {
min-height: 65px;
}
&.sticky { &.sticky {
background-color: $background-color; background-color: $background-color;
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
top: $header-size; top: 0;
z-index: 4; z-index: 4;
@include tablet-min {
top: $header-size;
}
} }
h2 { h2 {
@@ -72,16 +84,16 @@ header {
.view-more { .view-more {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 300; font-weight: 300;
letter-spacing: .5px; letter-spacing: 0.5px;
color: $text-color-70; color: $text-color-70;
text-decoration: none; text-decoration: none;
transition: color .5s ease; transition: color 0.5s ease;
cursor: pointer; cursor: pointer;
&:after{ &:after {
content: " →"; content: " →";
} }
&:hover{ &:hover {
color: $text-color; color: $text-color;
} }
} }
@@ -89,18 +101,17 @@ header {
.info { .info {
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
letter-spacing: .5px; letter-spacing: 0.5px;
color: $text-color; color: $text-color;
text-decoration: none; text-decoration: none;
text-align: right; text-align: right;
} }
@include tablet-min { @include tablet-min {
padding-left: 1.25rem;; padding-left: 1.25rem;
} }
@include desktop-lg-min { @include desktop-lg-min {
padding-left: 1.75rem; padding-left: 1.75rem;
} }
} }
</style> </style>

108
src/components/ListPage.vue
View File

@@ -1,6 +1,5 @@
<template> <template>
<div> <div class="page-container">
<list-header :title="listTitle" :info="info" :sticky="true" /> <list-header :title="listTitle" :info="info" :sticky="true" />
<results-list :results="results" v-if="results" /> <results-list :results="results" v-if="results" />
@@ -13,96 +12,107 @@
</div> </div>
</template> </template>
<script> <script>
import ListHeader from '@/components/ListHeader' import ListHeader from "@/components/ListHeader";
import ResultsList from '@/components/ResultsList' import ResultsList from "@/components/ResultsList";
import SeasonedButton from '@/components/ui/SeasonedButton' import SeasonedButton from "@/components/ui/SeasonedButton";
import Loader from '@/components/ui/Loader' import Loader from "@/components/ui/Loader";
import { getTmdbMovieListByName, getRequests } from '@/api' import { getTmdbMovieListByName, getRequests } from "@/api";
import store from '@/store' import store from "@/store";
export default { export default {
components: { ListHeader, ResultsList, SeasonedButton, Loader }, components: { ListHeader, ResultsList, SeasonedButton, Loader },
data() { data() {
return { return {
legalTmdbLists: [ 'now_playing', 'upcoming', 'popular' ], legalTmdbLists: ["now_playing", "upcoming", "popular"],
results: [], results: [],
page: 1, page: 1,
totalPages: 0, totalPages: 0,
totalResults: 0, totalResults: 0,
loading: true loading: true
} };
}, },
computed: { computed: {
listTitle() { listTitle() {
if (this.results.length === 0) if (this.results.length === 0) return "";
return ''
const routeListName = this.$route.params.name const routeListName = this.$route.params.name;
console.log('routelistname', routeListName) console.log("routelistname", routeListName);
return routeListName.includes('_') ? routeListName.split('_').join(' ') : routeListName return routeListName.includes("_")
? routeListName.split("_").join(" ")
: routeListName;
}, },
info() { info() {
if (this.results.length === 0) if (this.results.length === 0) return [null, null];
return [null, null] return [this.pageCount, this.resultCount];
return [this.pageCount, this.resultCount]
}, },
resultCount() { resultCount() {
const loadedResults = this.results.length const loadedResults = this.results.length;
const totalResults = this.totalResults < 10000 ? this.totalResults : '∞' const totalResults = this.totalResults < 10000 ? this.totalResults : "∞";
return `${loadedResults} of ${totalResults} results` return `${loadedResults} of ${totalResults} results`;
}, },
pageCount() { pageCount() {
return `Page ${this.page} of ${this.totalPages}` return `Page ${this.page} of ${this.totalPages}`;
} }
}, },
methods: { methods: {
loadMore() { loadMore() {
console.log(this.$route) console.log(this.$route);
this.loading = true; this.loading = true;
this.page++ this.page++;
window.history.replaceState({}, 'search', `/#/${this.$route.fullPath}?page=${this.page}`) window.history.replaceState(
this.init() {},
"search",
`/#/${this.$route.fullPath}?page=${this.page}`
);
this.init();
}, },
init() { init() {
const routeListName = this.$route.params.name const routeListName = this.$route.params.name;
if (routeListName === 'request') { if (routeListName === "request") {
getRequests(this.page) getRequests(this.page).then(results => {
.then(results => { this.results = this.results.concat(...results.results);
this.results = this.results.concat(...results.results) this.page = results.page;
this.page = results.page this.totalPages = results.total_pages;
this.totalPages = results.total_pages this.totalResults = results.total_results;
this.totalResults = results.total_results });
})
} else if (this.legalTmdbLists.includes(routeListName)) { } else if (this.legalTmdbLists.includes(routeListName)) {
getTmdbMovieListByName(routeListName, this.page) getTmdbMovieListByName(routeListName, this.page).then(results => {
.then(results => { this.results = this.results.concat(...results.results);
this.results = this.results.concat(...results.results) this.page = results.page;
this.page = results.page this.totalPages = results.total_pages;
this.totalPages = results.total_pages this.totalResults = results.total_results;
this.totalResults = results.total_results });
})
} else { } else {
// TODO handle if list is not found // TODO handle if list is not found
console.log('404 this is not a tmdb list') console.log("404 this is not a tmdb list");
} }
this.loading = false this.loading = false;
} }
}, },
created() { created() {
if (this.results.length === 0) if (this.results.length === 0) this.init();
this.init()
store.dispatch('documentTitle/updateTitle', `${this.$router.history.current.name} ${this.$route.params.name}`) store.dispatch(
"documentTitle/updateTitle",
`${this.$router.history.current.name} ${this.$route.params.name}`
);
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries";
@include mobile-only {
.page-container {
margin-top: 1rem;
}
}
.fullwidth-button { .fullwidth-button {
width: 100%; width: 100%;
margin: 1rem 0; margin: 1rem 0;

175
src/components/Navigation.vue
View File

@@ -1,78 +1,93 @@
<template> <template>
<div> <nav class="nav">
<nav class="nav"> <router-link
<router-link class="nav__logo" :to="{name: 'home'}" exact title="Vue.js — TMDb App"> class="nav__logo"
<svg class="nav__logo-image"> :to="{ name: 'home' }"
<use xlink:href="#svgLogo"></use> exact
</svg> title="Vue.js — TMDb App"
</router-link> >
<svg class="nav__logo-image">
<use xlink:href="#svgLogo"></use>
</svg>
</router-link>
<div class="nav__hamburger" @click="toggleNav"> <div class="nav__hamburger" @click="toggleNav">
<div v-for="_ in 3" class="bar"></div> <div v-for="_ in 3" class="bar"></div>
</div> </div>
<ul class="nav__list"> <ul class="nav__list">
<li class="nav__item" v-for="item in listTypes"> <li class="nav__item" v-for="item in listTypes">
<router-link class="nav__link" :to="'/list/' + item.route"> <router-link class="nav__link" :to="'/list/' + item.route">
<div class="nav__link-wrap"> <div class="nav__link-wrap">
<svg class="nav__link-icon"> <svg class="nav__link-icon">
<use :xlink:href="'#icon_' + item.route"></use> <use :xlink:href="'#icon_' + item.route"></use>
</svg> </svg>
<span class="nav__link-title">{{ item.title }}</span> <span class="nav__link-title">{{ item.title }}</span>
</div> </div>
</router-link> </router-link>
</li> </li>
<li class="nav__item nav__item--profile"> <li class="nav__item mobile-only"></li>
<router-link class="nav__link nav__link--profile" :to="{name: 'signin'}" v-if="!userLoggedIn">
<div class="nav__link-wrap">
<svg class="nav__link-icon">
<use xlink:href="#iconLogin"></use>
</svg>
<span class="nav__link-title">Sign in</span>
</div>
</router-link>
<router-link class="nav__link nav__link--profile" :to="{name: 'profile'}" v-if="userLoggedIn"> <li class="nav__item nav__item--profile">
<div class="nav__link-wrap"> <router-link
<svg class="nav__link-icon"> class="nav__link nav__link--profile"
<use xlink:href="#iconLogin"></use> :to="{ name: 'signin' }"
</svg> v-if="!userLoggedIn"
<span class="nav__link-title">Profile</span> >
</div> <div class="nav__link-wrap">
</router-link> <svg class="nav__link-icon">
</li> <use xlink:href="#iconLogin"></use>
</ul> </svg>
</nav> <span class="nav__link-title">Sign in</span>
</div>
</router-link>
<div class="spacer"></div> <router-link
</div> class="nav__link nav__link--profile"
:to="{ name: 'profile' }"
v-if="userLoggedIn"
>
<div class="nav__link-wrap">
<svg class="nav__link-icon">
<use xlink:href="#iconLogin"></use>
</svg>
<span class="nav__link-title">Profile</span>
</div>
</router-link>
</li>
</ul>
</nav>
</template> </template>
<script> <script>
import storage from '@/storage' import storage from "@/storage";
export default { export default {
data(){ data() {
return { return {
listTypes: storage.homepageLists, listTypes: storage.homepageLists,
userLoggedIn: localStorage.getItem('token') ? true : false userLoggedIn: localStorage.getItem("token") ? true : false
} };
}, },
methods: { methods: {
setUserStatus(){ setUserStatus() {
this.userLoggedIn = localStorage.getItem('token') ? true : false; this.userLoggedIn = localStorage.getItem("token") ? true : false;
}, },
toggleNav(){ toggleNav() {
document.querySelector('.nav__hamburger').classList.toggle('nav__hamburger--active'); document
document.querySelector('.nav__list').classList.toggle('nav__list--active'); .querySelector(".nav__hamburger")
.classList.toggle("nav__hamburger--active");
document
.querySelector(".nav__list")
.classList.toggle("nav__list--active");
} }
}, },
created(){ created() {
// TODO move this to state manager // TODO move this to state manager
eventHub.$on('setUserStatus', this.setUserStatus); eventHub.$on("setUserStatus", this.setUserStatus);
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -83,17 +98,10 @@ export default {
width: 30px; width: 30px;
} }
.spacer {
@include mobile-only {
width: 100%;
height: $header-size;
}
}
.nav { .nav {
transition: background .5s ease; transition: background 0.5s ease;
position: fixed; position: fixed;
top: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 50px; height: 50px;
@@ -102,7 +110,9 @@ export default {
color: $text-color; color: $text-color;
background-color: $background-color-secondary; background-color: $background-color-secondary;
@include tablet-min{ @include tablet-min {
top: 0;
bottom: unset;
width: 95px; width: 95px;
height: 100vh; height: 100vh;
} }
@@ -113,15 +123,15 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $background-nav-logo; background: $background-nav-logo;
@include tablet-min{ @include tablet-min {
width: 95px; width: 95px;
} }
&-image{ &-image {
width: 35px; width: 35px;
height: 31px; height: 31px;
fill: $green; fill: $green;
transition: transform 0.5s ease; transition: transform 0.5s ease;
@include tablet-min{ @include tablet-min {
width: 45px; width: 45px;
height: 40px; height: 40px;
} }
@@ -135,12 +145,12 @@ export default {
position: fixed; position: fixed;
width: 55px; width: 55px;
height: 50px; height: 50px;
top: 0; bottom: 0;
right: 0; right: 0;
cursor: pointer; cursor: pointer;
z-index: 10; z-index: 10;
border-left: 1px solid $background-color; border-left: 1px solid $background-color;
@include tablet-min{ @include tablet-min {
display: none; display: none;
} }
.bar { .bar {
@@ -172,9 +182,9 @@ export default {
} }
} }
&--active { &--active {
.bar{ .bar {
&:nth-child(1), &:nth-child(1),
&:nth-child(3){ &:nth-child(3) {
width: 0; width: 0;
} }
&:nth-child(2) { &:nth-child(2) {
@@ -198,15 +208,21 @@ export default {
left: 0; left: 0;
top: 50px; top: 50px;
border-top: 1px solid $background-color; border-top: 1px solid $background-color;
@include mobile-only { @include mobile-only {
display: flex; display: flex;
position: absolute;
top: unset;
bottom: var(--header-size);
height: min-content;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 0; font-size: 0;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
background-color: $background-95; background-color: $background-95;
text-align: left; text-align: left;
&--active{
&--active {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
@@ -221,15 +237,15 @@ export default {
} }
} }
&__item { &__item {
transition: background .5s ease, color .5s ease, border .5s ease; transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
background-color: $background-color-secondary; background-color: $background-color-secondary;
color: $text-color-70; color: $text-color-70;
@include mobile-only { @include mobile-only {
flex: 0 0 50%; flex: 0 0 33.3%;
text-align: center; text-align: center;
border-bottom: 1px solid $background-color; border-bottom: 1px solid $background-color;
&:nth-child(odd){ &:nth-child(odd) {
border-right: 1px solid $background-color; border-right: 1px solid $background-color;
&:last-child { &:last-child {
@@ -251,7 +267,8 @@ export default {
border-left: 1px solid $background-color; border-left: 1px solid $background-color;
} }
} }
&:hover, .is-active { &:hover,
.is-active {
color: $text-color; color: $text-color;
background-color: $background-color; background-color: $background-color;
} }
@@ -299,14 +316,14 @@ export default {
height: 20px; height: 20px;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
&-title { &-title {
margin-top: 5px; margin-top: 5px;
display: block; display: block;
width: 100%; width: 100%;
} }
&:hover &-icon, &.is-active &-icon { &:hover &-icon,
&.is-active &-icon {
fill: $text-color; fill: $text-color;
} }
} }

82
src/components/Search.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="page-container">
<list-header :title="title" :info="resultCount" :sticky="true" /> <list-header :title="title" :info="resultCount" :sticky="true" />
<results-list :results="results" /> <results-list :results="results" />
@@ -9,7 +9,9 @@
</div> </div>
<div class="notFound" v-if="results.length == 0 && loading == false"> <div class="notFound" v-if="results.length == 0 && loading == false">
<h1 class="notFound-title">No results for search: <b>{{ query }}</b></h1> <h1 class="notFound-title">
No results for search: <b>{{ query }}</b>
</h1>
</div> </div>
<loader v-if="loading" /> <loader v-if="loading" />
@@ -29,11 +31,11 @@
</style> </style>
<script> <script>
import { searchTmdb } from '@/api' import { searchTmdb } from "@/api";
import ListHeader from '@/components/ListHeader' import ListHeader from "@/components/ListHeader";
import ResultsList from '@/components/ResultsList' import ResultsList from "@/components/ResultsList";
import SeasonedButton from '@/components/ui/SeasonedButton' import SeasonedButton from "@/components/ui/SeasonedButton";
import Loader from '@/components/ui/Loader' import Loader from "@/components/ui/Loader";
export default { export default {
components: { ListHeader, ResultsList, SeasonedButton, Loader }, components: { ListHeader, ResultsList, SeasonedButton, Loader },
@@ -58,59 +60,74 @@ export default {
totalPages: 0, totalPages: 0,
results: [], results: [],
totalResults: [] totalResults: []
} };
}, },
computed: { computed: {
resultCount() { resultCount() {
const loadedResults = this.results.length const loadedResults = this.results.length;
const totalResults = this.totalResults < 10000 ? this.totalResults : '∞' const totalResults = this.totalResults < 10000 ? this.totalResults : "∞";
return `${loadedResults} of ${totalResults} results` return `${loadedResults} of ${totalResults} results`;
} }
}, },
methods: { methods: {
search(query=this.query, page=this.page, adult=this.adult, mediaType=this.mediaType) { search(
searchTmdb(query, page, adult, mediaType) query = this.query,
.then(this.parseResponse) page = this.page,
adult = this.adult,
mediaType = this.mediaType
) {
searchTmdb(query, page, adult, mediaType).then(this.parseResponse);
}, },
parseResponse(data) { parseResponse(data) {
if (this.results.length > 0) { if (this.results.length > 0) {
this.results.push(...data.results) this.results.push(...data.results);
} else { } else {
this.results = data.results this.results = data.results;
} }
this.totalPages = data.total_pages this.totalPages = data.total_pages;
this.totalResults = data.total_results || data.results.length this.totalResults = data.total_results || data.results.length;
this.loading = false this.loading = false;
}, },
loadMore() { loadMore() {
this.page++ this.page++;
window.history.replaceState({}, 'search', `/#/search?query=${this.query}&page=${this.page}`) window.history.replaceState(
this.search() {},
"search",
`/#/search?query=${this.query}&page=${this.page}`
);
this.search();
} }
}, },
created() { created() {
const { query, page, adult, media_type } = this.$route.query const { query, page, adult, media_type } = this.$route.query;
if (!query) { if (!query) {
// abort // abort
console.error('abort, no query') console.error("abort, no query");
} }
this.query = decodeURIComponent(query) this.query = decodeURIComponent(query);
this.page = page || 1 this.page = page || 1;
this.adult = adult || this.adult this.adult = adult || this.adult;
this.mediaType = media_type || this.mediaType this.mediaType = media_type || this.mediaType;
this.title = `Search results: ${this.query}` this.title = `Search results: ${this.query}`;
this.search() this.search();
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries";
@include mobile-only {
.page-container {
margin-top: 1rem;
}
}
.fullwidth-button { .fullwidth-button {
width: 100%; width: 100%;
margin: 1rem 0; margin: 1rem 0;
@@ -118,5 +135,4 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
</style> </style>

209
src/components/SearchInput.vue
View File

@@ -15,9 +15,12 @@
@keydown.escape="handleEscape" @keydown.escape="handleEscape"
@keyup.enter="handleSubmit" @keyup.enter="handleSubmit"
@keydown.up="navigateUp" @keydown.up="navigateUp"
@keydown.down="navigateDown" /> @keydown.down="navigateDown"
/>
<svg class="search-icon" fill="currentColor" @click="handleSubmit"><use xlink:href="#iconSearch"></use></svg> <svg class="search-icon" fill="currentColor" @click="handleSubmit">
<use xlink:href="#iconSearch"></use>
</svg>
</div> </div>
<transition name="fade"> <transition name="fade">
@@ -26,10 +29,14 @@
<h2>Filter your search:</h2> <h2>Filter your search:</h2>
<div class="filter-items"> <div class="filter-items">
<toggle-button :options="searchTypes" :selected.sync="selectedSearchType" /> <toggle-button
:options="searchTypes"
:selected.sync="selectedSearchType"
/>
<label>Adult <label
<input type="checkbox" value="adult" v-model="adult"> >Adult
<input type="checkbox" value="adult" v-model="adult" />
</label> </label>
</div> </div>
</div> </div>
@@ -37,49 +44,57 @@
<hr /> <hr />
<div class="dropdown-results" v-if="elasticSearchResults.length"> <div class="dropdown-results" v-if="elasticSearchResults.length">
<ul v-for="(item, index) in elasticSearchResults" <ul
@click="openResult(item, index + 1)" v-for="(item, index) in elasticSearchResults"
:class="{ active: index + 1 === selectedResult}"> @click="openResult(item, index + 1)"
:class="{ active: index + 1 === selectedResult }"
{{ item.name }} >
{{
item.name
}}
</ul> </ul>
</div> </div>
<div v-else class="dropdown"> <div v-else class="dropdown">
<div class="dropdown-results"> <div class="dropdown-results">
<h2 class="not-found">No results for query: <b>{{ query }}</b></h2> <h2 class="not-found">
No results for query: <b>{{ query }}</b>
</h2>
</div> </div>
</div> </div>
<seasoned-button class="end-section" fullWidth="true" <seasoned-button
@click="focus = false" :active="elasticSearchResults.length + 1 === selectedResult"> class="end-section"
fullWidth="true"
@click="focus = false"
:active="elasticSearchResults.length + 1 === selectedResult"
>
close close
</seasoned-button> </seasoned-button>
</div> </div>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import SeasonedButton from '@/components/ui/SeasonedButton' import SeasonedButton from "@/components/ui/SeasonedButton";
import ToggleButton from '@/components/ui/ToggleButton'; import ToggleButton from "@/components/ui/ToggleButton";
import { elasticSearchMoviesAndShows } from '@/api' import { elasticSearchMoviesAndShows } from "@/api";
import config from '@/config.json' import config from "@/config.json";
export default { export default {
name: 'SearchInput', name: "SearchInput",
components: { components: {
SeasonedButton, SeasonedButton,
ToggleButton ToggleButton
}, },
props: ['value'], props: ["value"],
data() { data() {
return { return {
adult: true, adult: true,
searchTypes: ['all', 'movie', 'show', 'person'], searchTypes: ["all", "movie", "show", "person"],
selectedSearchType: 'all', selectedSearchType: "all",
query: this.value, query: this.value,
focus: false, focus: false,
@@ -87,144 +102,150 @@ export default {
scrollListener: undefined, scrollListener: undefined,
scrollDistance: 0, scrollDistance: 0,
elasticSearchResults: [], elasticSearchResults: [],
selectedResult: 0, selectedResult: 0
} };
}, },
watch: { watch: {
focus: function(val) { focus: function (val) {
if (val === true) { if (val === true) {
window.addEventListener('scroll', this.disableFocus) window.addEventListener("scroll", this.disableFocus);
} else { } else {
window.removeEventListener('scroll', this.disableFocus) window.removeEventListener("scroll", this.disableFocus);
this.scrollDistance = 0 this.scrollDistance = 0;
} }
}, },
adult: function(value) { adult: function (value) {
this.handleInput() this.handleInput();
} }
}, },
beforeMount() { beforeMount() {
const elasticUrl = config.ELASTIC_URL const elasticUrl = config.ELASTIC_URL;
if (elasticUrl === undefined || elasticUrl === false || elasticUrl === '') { if (elasticUrl === undefined || elasticUrl === false || elasticUrl === "") {
this.disabled = true this.disabled = true;
} }
}, },
beforeDestroy() { beforeDestroy() {
console.log('scroll eventlistener not removed, destroying!') console.log("scroll eventlistener not removed, destroying!");
window.removeEventListener('scroll', this.disableFocus) window.removeEventListener("scroll", this.disableFocus);
}, },
methods: { methods: {
navigateDown() { navigateDown() {
this.focus = true this.focus = true;
this.selectedResult++ this.selectedResult++;
}, },
navigateUp() { navigateUp() {
this.focus = true this.focus = true;
this.selectedResult-- this.selectedResult--;
const input = this.$refs.input; const input = this.$refs.input;
const textLength = input.value.length const textLength = input.value.length;
setTimeout(() => { setTimeout(() => {
input.focus() input.focus();
input.setSelectionRange(textLength, textLength + 1) input.setSelectionRange(textLength, textLength + 1);
}, 1) }, 1);
}, },
openResult(item, index) { openResult(item, index) {
this.selectedResult = index; this.selectedResult = index;
this.$popup.open(item.id, item.type) this.$popup.open(item.id, item.type);
}, },
handleInput(e){ handleInput(e) {
this.selectedResult = 0 this.selectedResult = 0;
this.$emit('input', this.query); this.$emit("input", this.query);
if (! this.focus) { if (!this.focus) {
this.focus = true; this.focus = true;
} }
elasticSearchMoviesAndShows(this.query) elasticSearchMoviesAndShows(this.query).then(resp => {
.then(resp => { const data = resp.hits.hits;
const data = resp.hits.hits
let results = data.map(item => { let results = data.map(item => {
const index = item._index.slice(0, -1) const index = item._index.slice(0, -1);
if (index === 'movie' || item._source.original_title) { if (index === "movie" || item._source.original_title) {
return { return {
name: item._source.original_title, name: item._source.original_title,
id: item._source.id, id: item._source.id,
adult: item._source.adult, adult: item._source.adult,
type: 'movie' type: "movie"
} };
} else if (index === 'show' || item._source.original_name) { } else if (index === "show" || item._source.original_name) {
return { return {
name: item._source.original_name, name: item._source.original_name,
id: item._source.id, id: item._source.id,
adult: item._source.adult, adult: item._source.adult,
type: 'show' type: "show"
} };
} }
}) });
results = this.removeDuplicates(results) results = this.removeDuplicates(results);
this.elasticSearchResults = results this.elasticSearchResults = results;
}) });
}, },
removeDuplicates(searchResults) { removeDuplicates(searchResults) {
let filteredResults = [] let filteredResults = [];
searchResults.map(result => { searchResults.map(result => {
const numberOfDuplicates = filteredResults.filter(filterItem => filterItem.id == result.id) const numberOfDuplicates = filteredResults.filter(
filterItem => filterItem.id == result.id
);
if (numberOfDuplicates.length >= 1) { if (numberOfDuplicates.length >= 1) {
return null return null;
} }
filteredResults.push(result) filteredResults.push(result);
}) });
if (this.adult == false) { if (this.adult == false) {
filteredResults = filteredResults.filter(result => result.adult == false) filteredResults = filteredResults.filter(
result => result.adult == false
);
} }
return filteredResults return filteredResults;
}, },
handleSubmit() { handleSubmit() {
let searchResults = this.elasticSearchResults let searchResults = this.elasticSearchResults;
if (this.selectedResult > searchResults.length) { if (this.selectedResult > searchResults.length) {
this.focus = false this.focus = false;
this.selectedResult = 0 this.selectedResult = 0;
} else if (this.selectedResult > 0) { } else if (this.selectedResult > 0) {
const resultItem = searchResults[this.selectedResult - 1] const resultItem = searchResults[this.selectedResult - 1];
this.$popup.open(resultItem.id, resultItem.type) this.$popup.open(resultItem.id, resultItem.type);
} else { } else {
const encodedQuery = encodeURI(this.query.replace('/ /g, "+"')) const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'));
const media_type = this.selectedSearchType !== 'all' ? this.selectedSearchType : null const media_type =
this.$router.push({ name: 'search', query: { query: encodedQuery, adult: this.adult, media_type }}); this.selectedSearchType !== "all" ? this.selectedSearchType : null;
this.focus = false this.$router.push({
this.selectedResult = 0 name: "search",
query: { query: encodedQuery, adult: this.adult, media_type }
});
this.focus = false;
this.selectedResult = 0;
} }
}, },
handleEscape() { handleEscape() {
if (this.$popup.isOpen) { if (this.$popup.isOpen) {
console.log('THIS WAS FUCKOING OPEN!') console.log("THIS WAS FUCKOING OPEN!");
} else { } else {
this.focus = false this.focus = false;
} }
}, },
disableFocus(_) { disableFocus(_) {
this.focus = false this.focus = false;
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "./src/scss/variables";
@import "./src/scss/media-queries"; @import "./src/scss/media-queries";
@import './src/scss/main'; @import "./src/scss/main";
.fade-enter-active { .fade-enter-active {
transition: opacity .2s; transition: opacity 0.2s;
} }
.fade-leave-active { .fade-leave-active {
transition: opacity .2s; transition: opacity 0.2s;
} }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0; opacity: 0;
@@ -311,7 +332,9 @@ hr {
overflow: hidden; overflow: hidden;
color: $text-color-50; color: $text-color-50;
&.active, &:hover, &:active { &.active,
&:hover,
&:active {
color: $text-color; color: $text-color;
border-bottom: 2px solid $text-color; border-bottom: 2px solid $text-color;
} }
@@ -330,10 +353,10 @@ hr {
// TODO check if this is for mobile // TODO check if this is for mobile
width: calc(100% - 110px); width: calc(100% - 110px);
top: 0; bottom: 0;
right: 55px; right: 55px;
@include tablet-min{ @include tablet-min {
position: relative; position: relative;
width: 100%; width: 100%;
right: 0px; right: 0px;
@@ -350,14 +373,14 @@ hr {
font-weight: 300; font-weight: 300;
font-size: 19px; font-size: 19px;
color: $text-color; color: $text-color;
transition: background-color .5s ease, color .5s ease; transition: background-color 0.5s ease, color 0.5s ease;
@include tablet-min { @include tablet-min {
padding: 13px 30px 13px 60px; padding: 13px 30px 13px 60px;
} }
} }
&-icon{ &-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: $text-color-50; fill: $text-color-50;
@@ -367,7 +390,7 @@ hr {
left: 15px; left: 15px;
top: 15px; top: 15px;
@include tablet-min{ @include tablet-min {
top: 27px; top: 27px;
left: 25px; left: 25px;
} }

26
src/components/ui/darkmodeToggle.vue
View File

@@ -1,42 +1,38 @@
<template> <template>
<div class="darkToggle"> <div class="darkToggle">
<span @click="toggleDarkmode()">{{ darkmodeToggleIcon }}</span> <span @click="toggleDarkmode()">{{ darkmodeToggleIcon }}</span>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
darkmode: this.supported darkmode: this.supported
} };
}, },
methods: { methods: {
toggleDarkmode() { toggleDarkmode() {
this.darkmode = !this.darkmode; this.darkmode = !this.darkmode;
document.body.className = this.darkmode ? 'dark' : 'light' document.body.className = this.darkmode ? "dark" : "light";
}, },
supported() { supported() {
const computedStyle = window.getComputedStyle(document.body) const computedStyle = window.getComputedStyle(document.body);
if (computedStyle['colorScheme'] != null) if (computedStyle["colorScheme"] != null)
return computedStyle.colorScheme.includes('dark') return computedStyle.colorScheme.includes("dark");
return false return false;
} }
}, },
computed: { computed: {
darkmodeToggleIcon() { darkmodeToggleIcon() {
return this.darkmode ? '🌝' : '🌚' return this.darkmode ? "🌝" : "🌚";
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries";
.darkToggle { .darkToggle {
height: 25px; height: 25px;
width: 25px; width: 25px;
@@ -49,6 +45,10 @@ export default {
right: 0; right: 0;
z-index: 10; z-index: 10;
@include mobile-only {
margin-bottom: 3.5rem;
}
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;