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

Compare commits

merge into: KevinMidboe:master
Branches Tags
KevinMidboe:master KevinMidboe:feat/bottom-mobile-navigation KevinMidboe:drone-test KevinMidboe:feat/submit-file-deviation KevinMidboe:feat/apple-fullscreen
KevinMidboe:v1.0.0
...
pull from: KevinMidboe:feat/bottom-mobile-navigation
Branches Tags
KevinMidboe:master KevinMidboe:feat/bottom-mobile-navigation KevinMidboe:drone-test KevinMidboe:feat/submit-file-deviation KevinMidboe:feat/apple-fullscreen
KevinMidboe:v1.0.0

2 Commits
master ... feat/botto

Author SHA1 Message Date
Kevin Midboe
2665a27803 Lift mobile navigation some for chin height 2022-01-09 16:23:29 +01:00
Kevin Midboe
74b96225c6 Testing out bottom align mobile navigation content 2022-01-09 16:00:02 +01:00
9 changed files with 465 additions and 377 deletions
Expand all files Collapse all files

104
src/App.vue
View File

@@ -1,37 +1,32 @@
<template> <template>
<div id="app"> <div id="app">
<!-- Header and hamburger navigation --> <!-- Header and hamburger navigation -->
<navigation></navigation> <navigation></navigation>
<search-input v-model="query"></search-input>
<!-- Header with search field -->
<!-- TODO move this to the navigation component -->
<header class="header">
<search-input v-model="query"></search-input>
</header>
<!-- Movie popup that will show above existing rendered content --> <!-- Movie popup that will show above existing rendered content -->
<movie-popup v-if="moviePopupIsVisible" :id="popupID" :type="popupType"></movie-popup> <movie-popup
v-if="moviePopupIsVisible"
:id="popupID"
:type="popupType"
></movie-popup>
<darkmode-toggle /> <darkmode-toggle />
<!-- Display the component assigned to the given route (default: home) --> <!-- Display the component assigned to the given route (default: home) -->
<router-view class="content" :key="$route.fullPath"></router-view> <router-view class="content" :key="$route.fullPath"></router-view>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from "vue";
import Navigation from '@/components/Navigation' import Navigation from "@/components/Navigation";
import MoviePopup from '@/components/MoviePopup' import MoviePopup from "@/components/MoviePopup";
import SearchInput from '@/components/SearchInput' import SearchInput from "@/components/SearchInput";
import DarkmodeToggle from '@/components/ui/darkmodeToggle' import DarkmodeToggle from "@/components/ui/darkmodeToggle";
export default { export default {
name: 'app', name: "app",
components: { components: {
Navigation, Navigation,
MoviePopup, MoviePopup,
@@ -40,39 +35,42 @@ export default {
}, },
data() { data() {
return { return {
query: '', query: "",
moviePopupIsVisible: false, moviePopupIsVisible: false,
popupID: 0, popupID: 0,
popupType: 'movie' popupType: "movie"
} };
}, },
created(){ created() {
let that = this let that = this;
Vue.prototype.$popup = { Vue.prototype.$popup = {
get isOpen() { get isOpen() {
return that.moviePopupIsVisible return that.moviePopupIsVisible;
}, },
open: (id, type) => { open: (id, type) => {
this.popupID = id || this.popupID this.popupID = id || this.popupID;
this.popupType = type || this.popupType this.popupType = type || this.popupType;
this.moviePopupIsVisible = true this.moviePopupIsVisible = true;
console.log('opened') console.log("opened");
}, },
close: () => { close: () => {
this.moviePopupIsVisible = false this.moviePopupIsVisible = false;
console.log('closed') console.log("closed");
} }
} };
console.log('MoviePopup registered at this.$popup and has state: ', this.$popup.isOpen) console.log(
"MoviePopup registered at this.$popup and has state: ",
this.$popup.isOpen
);
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./src/scss/media-queries"; @import "./src/scss/media-queries";
@import "./src/scss/variables"; @import "./src/scss/variables";
.content { .content {
@include tablet-min{ @include tablet-min {
width: calc(100% - 95px); width: calc(100% - 95px);
margin-top: $header-size; margin-top: $header-size;
margin-left: 95px; margin-left: 95px;
@@ -86,38 +84,42 @@ export default {
@import "./src/scss/variables"; @import "./src/scss/variables";
@import "./src/scss/media-queries"; @import "./src/scss/media-queries";
*{ * {
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
height: 100%; height: 100%;
} }
body{ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Roboto', sans-serif; font-family: "Roboto", sans-serif;
line-height: 1.6; line-height: 1.6;
background: $background-color; background: $background-color;
color: $text-color; color: $text-color;
transition: background-color .5s ease, color .5s ease; transition: background-color 0.5s ease, color 0.5s ease;
&.hidden{ &.hidden {
overflow: hidden; overflow: hidden;
} }
} }
h1,h2,h3 { h1,
transition: color .5s ease; h2,
h3 {
transition: color 0.5s ease;
} }
a:any-link { a:any-link {
color: inherit; color: inherit;
} }
input, textarea, button{ input,
font-family: 'Roboto', sans-serif; textarea,
button {
font-family: "Roboto", sans-serif;
} }
figure{ figure {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
img{ img {
display: block; display: block;
// max-width: 100%; // max-width: 100%;
height: auto; height: auto;
@@ -127,16 +129,16 @@ img{
overflow: hidden; overflow: hidden;
} }
.wrapper{ .wrapper {
position: relative; position: relative;
} }
.header{ .header {
position: fixed; position: fixed;
z-index: 15; z-index: 15;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include tablet-min{ @include tablet-min {
width: calc(100% - 170px); width: calc(100% - 170px);
margin-left: 95px; margin-left: 95px;
border-top: 0; border-top: 0;
@@ -146,14 +148,16 @@ img{
} }
// router view transition // router view transition
.fade-enter-active, .fade-leave-active { .fade-enter-active,
.fade-leave-active {
transition-property: opacity; transition-property: opacity;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
.fade-enter-active { .fade-enter-active {
transition-delay: 0.25s; transition-delay: 0.25s;
} }
.fade-enter, .fade-leave-active { .fade-enter,
opacity: 0 .fade-leave-active {
opacity: 0;
} }
</style> </style>

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;

186
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,45 +98,45 @@ 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: var(--header-size);
z-index: 10; z-index: 10;
display: block; display: block;
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;
} }
&__logo { &__logo {
width: 55px; width: 95px;
height: $header-size; height: $header-size;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $background-nav-logo; background: $background-nav-logo;
@include tablet-min{
width: 95px; @include mobile-only {
align-items: flex-start;
padding-top: 0.5rem;
width: 55px;
} }
&-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 +150,12 @@ export default {
position: fixed; position: fixed;
width: 55px; width: 55px;
height: 50px; height: 50px;
top: 0; bottom: 1.5rem;
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 +187,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 +213,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 +242,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 +272,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 +321,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>

252
src/components/SearchInput.vue
View File

@@ -1,35 +1,42 @@
<template> <template>
<div> <!-- <div> -->
<div class="search"> <div class="search">
<input <input
ref="input" ref="input"
type="text" type="text"
placeholder="Search for movie or show" placeholder="Search for movie or show"
aria-label="Search input for finding a movie or show" aria-label="Search input for finding a movie or show"
autocorrect="off" autocorrect="off"
autocapitalize="off" autocapitalize="off"
tabindex="1" tabindex="1"
v-model="query" v-model="query"
@input="handleInput" @input="handleInput"
@click="focus = true" @click="focus = true"
@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>
</div>
<svg class="search-icon" fill="currentColor" @click="handleSubmit">
<use xlink:href="#iconSearch"></use>
</svg>
</div>
<!--
<transition name="fade"> <transition name="fade">
<div class="dropdown" v-if="!disabled && focus && query.length > 0"> <div class="dropdown" v-if="!disabled && focus && query.length > 0">
<div class="filter"> <div class="filter">
<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;
} }
@@ -324,16 +347,16 @@ hr {
display: flex; display: flex;
position: fixed; position: fixed;
flex-wrap: wrap; flex-wrap: wrap;
z-index: 5; z-index: 16;
border: 0; border: 0;
background-color: $background-color-secondary; background-color: $background-color-secondary;
// 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;
@@ -341,23 +364,26 @@ hr {
input { input {
display: block; display: block;
height: calc($header-size - 1.5rem);
width: 100%; width: 100%;
padding: 13px 0 13px 45px; padding: 13px 0 13px 45px;
outline: none; outline: none;
margin: 0; margin: 0;
margin-bottom: auto;
border: 0; border: 0;
background-color: $background-color-secondary; background-color: $background-color-secondary;
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 {
height: calc($header-size);
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 +393,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: 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;

11
src/scss/main.scss
View File

@@ -1,11 +1,10 @@
.noselect { .noselect {
-webkit-touch-callout: none; /* iOS Safari */ -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */ -khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */ -moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */ -ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently */ user-select: none; /* Non-prefixed version, currently */
} }
.end-section { .end-section {

14
src/scss/variables.scss
View File

@@ -18,12 +18,12 @@
--background-nav-logo: #081c24; --background-nav-logo: #081c24;
--color-green: #01d277; --color-green: #01d277;
--color-green-90: rgba(1, 210, 119, .9); --color-green-90: rgba(1, 210, 119, 0.9);
--color-green-70: rgba(1, 210, 119, .73); --color-green-70: rgba(1, 210, 119, 0.73);
--color-teal: #091c24; --color-teal: #091c24;
--color-black: #081c24; --color-black: #081c24;
--white: #fff; --white: #fff;
--white-70: rgba(255,255,255,0.7); --white-70: rgba(255, 255, 255, 0.7);
--color-warning: rgba(241, 188, 53, 0.7); --color-warning: rgba(241, 188, 53, 0.7);
--color-warning-highlight: #f1bc35; --color-warning-highlight: #f1bc35;
@@ -31,7 +31,7 @@
--color-success-text: #fff; --color-success-text: #fff;
--color-success-highlight: rgb(0, 100, 66); --color-success-highlight: rgb(0, 100, 66);
--color-error: rgba(220, 48, 35, 0.8); --color-error: rgba(220, 48, 35, 0.8);
--color-error-highlight: #DC3023; --color-error-highlight: #dc3023;
--header-size: 75px; --header-size: 75px;
} }
@@ -55,7 +55,7 @@
@include mobile-only { @include mobile-only {
:root { :root {
--header-size: 50px; --header-size: calc(50px + 1.5rem);
} }
} }
@@ -67,9 +67,9 @@ $green-90: var(--color-green-90);
$green-70: var(--color-green-70); $green-70: var(--color-green-70);
$teal: #091c24; $teal: #091c24;
$black: #081c24; $black: #081c24;
$black-80: rgba(0,0,0,0.8); $black-80: rgba(0, 0, 0, 0.8);
$white: #fff; $white: #fff;
$white-80: rgba(255,255,255,0.8); $white-80: rgba(255, 255, 255, 0.8);
$text-color: var(--text-color) !default; $text-color: var(--text-color) !default;
$text-color-70: var(--text-color-70) !default; $text-color-70: var(--text-color-70) !default;