🧹 moved files around

This commit is contained in:
2022-07-26 20:18:12 +02:00
parent fe162eb081
commit d585af2193
22 changed files with 83 additions and 157 deletions

View File

@@ -10,25 +10,25 @@
<!-- Display the component assigned to the given route (default: home) -->
<router-view class="content" :key="$route.fullPath"></router-view>
<!-- Movie popup that will show above existing rendered content -->
<movie-popup></movie-popup>
<!-- Popup that will show above existing rendered content -->
<popup />
<darkmode-toggle />
</div>
</template>
<script>
import NavigationHeader from "@/components/NavigationHeader";
import NavigationIcons from "@/components/NavigationIcons";
import MoviePopup from "@/components/MoviePopup";
import DarkmodeToggle from "@/components/ui/darkmodeToggle";
import NavigationHeader from "@/components/header/NavigationHeader";
import NavigationIcons from "@/components/header/NavigationIcons";
import Popup from "@/components/Popup";
import DarkmodeToggle from "@/components/ui/DarkmodeToggle";
export default {
name: "app",
components: {
NavigationHeader,
NavigationIcons,
MoviePopup,
Popup,
DarkmodeToggle
}
};

View File

@@ -1,5 +1,5 @@
<template>
<header :class="{ sticky: sticky }">
<header>
<h2>{{ prettify }}</h2>
<h3>{{ subtitle }}</h3>
@@ -34,11 +34,6 @@ export default {
required: false,
default: null
},
sticky: {
type: Boolean,
required: false,
default: true
},
info: {
type: [String, Array],
required: false
@@ -77,15 +72,12 @@ header {
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.75rem;
background-color: $background-color;
&.sticky {
background-color: $background-color;
position: sticky;
position: -webkit-sticky;
top: $header-size;
z-index: 1;
}
position: sticky;
position: -webkit-sticky;
top: $header-size;
z-index: 1;
h2 {
font-size: 1.4rem;
@@ -125,6 +117,7 @@ header {
@include tablet-min {
padding-left: 1.25rem;
}
@include desktop-lg-min {
padding-left: 1.75rem;
}

View File

@@ -11,8 +11,8 @@
<script>
import { mapActions, mapGetters } from "vuex";
import Movie from "./movie/Movie";
import Person from "./Person";
import Movie from "@/components/popup/Movie";
import Person from "@/components/popup/Person";
export default {
components: { Movie, Person },

View File

@@ -5,7 +5,7 @@
class="results"
:class="{ shortList: shortList }"
>
<movies-list-item
<results-list-item
v-for="(movie, index) in results"
:key="`${movie.type}-${movie.id}-${index}`"
:movie="movie"
@@ -17,10 +17,10 @@
</template>
<script>
import MoviesListItem from "@/components/MoviesListItem";
import ResultsListItem from "@/components/ResultsListItem";
export default {
components: { MoviesListItem },
components: { ResultsListItem },
props: {
results: {
type: Array,

View File

@@ -177,67 +177,4 @@ export default {
font-weight: 400;
}
}
.no-image {
background-color: var(--text-color);
color: var(--background-color);
width: 100%;
height: 383px;
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 1.5rem;
width: 70%;
text-align: center;
text-transform: uppercase;
}
&:hover {
transform: scale(1);
}
}
</style>
<style lang="scss" scoped>
@import "src/scss/variables";
.progress {
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 0.8rem;
> progress {
width: 95%;
}
> span {
position: absolute;
font-size: 1rem;
line-height: 1.4rem;
color: $white;
}
progress {
border-radius: 4px;
height: 1.4rem;
}
progress::-webkit-progress-bar {
background-color: rgba($black, 0.55);
border-radius: 4px;
}
progress::-webkit-progress-value {
background-color: $green-70;
border-radius: 4px;
}
progress::-moz-progress-bar {
/* style rules */
background-color: green;
}
}
</style>

View File

@@ -1,6 +1,6 @@
<template>
<div ref="resultSection" class="resultSection">
<list-header v-bind="{ title, info, shortList }" :sticky="true" />
<list-header v-bind="{ title, info, shortList }" />
<div
v-if="!loadedPages.includes(1) && loading == false"

View File

@@ -23,14 +23,14 @@
<script>
import { mapGetters, mapActions } from "vuex";
import TmdbLogo from "../icons/tmdb-logo";
import IconProfile from "../icons/IconProfile";
import IconProfileLock from "../icons/IconProfileLock";
import IconSettings from "../icons/IconSettings";
import IconActivity from "../icons/IconActivity";
import SearchInput from "@/components/SearchInput";
import NavigationIcons from "src/components/NavigationIcons";
import NavigationIcon from "src/components/ui/NavigationIcon";
import TmdbLogo from "@/icons/tmdb-logo";
import IconProfile from "@/icons/IconProfile";
import IconProfileLock from "@/icons/IconProfileLock";
import IconSettings from "@/icons/IconSettings";
import IconActivity from "@/icons/IconActivity";
import SearchInput from "@/components/header/SearchInput";
import NavigationIcons from "src/components/header/NavigationIcons";
import NavigationIcon from "src/components/header/NavigationIcon";
import Hamburger from "@/components/ui/Hamburger";
export default {

View File

@@ -15,7 +15,7 @@
import { mapGetters, mapActions } from "vuex";
export default {
name: "NavigationIcons",
name: "NavigationIcon",
props: {
active: {
type: String,

View File

@@ -11,13 +11,13 @@
</template>
<script>
import NavigationIcon from "./ui/NavigationIcon";
import IconInbox from "../icons/IconInbox";
import IconNowPlaying from "../icons/IconNowPlaying";
import IconPopular from "../icons/IconPopular";
import IconUpcoming from "../icons/IconUpcoming";
import IconSettings from "../icons/IconSettings";
import IconActivity from "../icons/IconActivity";
import NavigationIcon from "@/components/header/NavigationIcon";
import IconInbox from "@/icons/IconInbox";
import IconNowPlaying from "@/icons/IconNowPlaying";
import IconPopular from "@/icons/IconPopular";
import IconUpcoming from "@/icons/IconUpcoming";
import IconSettings from "@/icons/IconSettings";
import IconActivity from "@/icons/IconActivity";
export default {
name: "NavigationIcons",

View File

@@ -44,7 +44,7 @@
<script>
import { mapActions, mapGetters } from "vuex";
import SeasonedButton from "@/components/ui/SeasonedButton";
import AutocompleteDropdown from "@/components/AutocompleteDropdown";
import AutocompleteDropdown from "@/components/header/AutocompleteDropdown";
import IconSearch from "src/icons/IconSearch";
import IconClose from "src/icons/IconClose";

View File

@@ -26,35 +26,35 @@
<div class="movie__wrap movie__wrap--main">
<!-- SIDEBAR ACTIONS -->
<div class="movie__actions" v-if="movie">
<sidebar-list-element :active="matched" :disabled="true">
<action-button :active="matched" :disabled="true">
<IconThumbsUp v-if="matched" />
<IconThumbsDown v-else />
{{ !matched ? "Not yet available" : "Already available 🎉" }}
</sidebar-list-element>
</action-button>
<sidebar-list-element @click="sendRequest" :active="requested">
<action-button @click="sendRequest" :active="requested">
<transition name="fade" mode="out-in">
<div v-if="!requested" key="request"><IconRequest /></div>
<div v-else key="requested"><IconRequested /></div>
</transition>
{{ !requested ? `Request ${this.type}?` : "Already requested" }}
</sidebar-list-element>
</action-button>
<sidebar-list-element v-if="plexId && matched" @click="openInPlex">
<action-button v-if="plexId && matched" @click="openInPlex">
<IconPlay />
Open and watch in plex now!
</sidebar-list-element>
</action-button>
<sidebar-list-element
<action-button
v-if="credits && credits.cast && credits.cast.length"
:active="showCast"
@click="() => (showCast = !showCast)"
>
<IconProfile class="icon" />
{{ showCast ? "Hide cast" : "Show cast" }}
</sidebar-list-element>
</action-button>
<sidebar-list-element
<action-button
v-if="admin === true"
@click="showTorrents = !showTorrents"
:active="showTorrents"
@@ -64,12 +64,12 @@
<span v-if="numberOfTorrentResults" class="meta">{{
numberOfTorrentResults
}}</span>
</sidebar-list-element>
</action-button>
<sidebar-list-element @click="openTmdb">
<action-button @click="openTmdb">
<IconInfo />
See more info
</sidebar-list-element>
</action-button>
</div>
<!-- Loading placeholder -->
@@ -93,33 +93,29 @@
<loading-placeholder :count="5" />
</div>
<MovieDescription
<Description
v-if="!loading && movie && movie.overview"
:description="movie.overview"
/>
<div class="movie__details" v-if="movie">
<MovieDetail
<Detail
v-if="movie.year"
title="Release date"
:detail="movie.year"
/>
<MovieDetail
v-if="movie.rating"
title="Rating"
:detail="movie.rating"
/>
<MovieDetail
<Detail v-if="movie.rating" title="Rating" :detail="movie.rating" />
<Detail
v-if="movie.type == 'show'"
title="Seasons"
:detail="movie.seasons"
/>
<MovieDetail
<Detail
v-if="movie.genres && movie.genres.length"
title="Genres"
:detail="movie.genres.join(', ')"
/>
<MovieDetail
<Detail
v-if="
movie.production_status &&
movie.production_status !== 'Released'
@@ -127,7 +123,7 @@
title="Production status"
:detail="movie.production_status"
/>
<MovieDetail
<Detail
v-if="movie.runtime"
title="Runtime"
:detail="humanMinutes(movie.runtime)"
@@ -141,9 +137,9 @@
class="movie__admin"
v-if="showCast && credits && credits.cast && credits.cast.length"
>
<MovieDetail title="cast">
<Detail title="cast">
<CastList :cast="credits.cast" />
</MovieDetail>
</Detail>
</div>
</div>
@@ -172,9 +168,9 @@ import IconBinoculars from "@/icons/IconBinoculars";
import IconPlay from "@/icons/IconPlay";
import TorrentList from "@/components/TorrentList";
import CastList from "@/components/CastList";
import MovieDetail from "@/components/movie/Detail";
import MovieDescription from "@/components/movie/Description";
import SidebarListElement from "@/components/ui/sidebarListElem";
import Detail from "@/components/popup/Detail";
import ActionButton from "@/components/popup/ActionButton";
import Description from "@/components/popup/Description";
import store from "@/store";
import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
@@ -201,8 +197,9 @@ export default {
}
},
components: {
MovieDescription,
MovieDetail,
Description,
Detail,
ActionButton,
IconProfile,
IconThumbsUp,
IconThumbsDown,
@@ -213,8 +210,7 @@ export default {
IconPlay,
TorrentList,
CastList,
LoadingPlaceholder,
SidebarListElement
LoadingPlaceholder
},
directives: { img: img }, // TODO decide to remove or use
data() {

View File

@@ -37,33 +37,33 @@
</div>
<div v-if="person">
<MovieDetail v-if="age" title="Age" :detail="age" />
<Detail v-if="age" title="Age" :detail="age" />
<MovieDetail
<Detail
v-if="person"
title="Born"
:detail="person.place_of_birth ? person.place_of_birth : '(Not found)'"
/>
<MovieDetail v-if="person.biography" title="Biography">
<MovieDescription :description="person.biography" />
</MovieDetail>
<Detail v-if="person.biography" title="Biography">
<Description :description="person.biography" />
</Detail>
<MovieDetail
<Detail
title="movies"
:detail="`Credited in ${movieCredits.length} movies`"
v-if="credits"
>
<CastList :cast="movieCredits" />
</MovieDetail>
</Detail>
<MovieDetail
<Detail
title="shows"
:detail="`Credited in ${showCredits.length} shows`"
v-if="credits"
>
<CastList :cast="showCredits" />
</MovieDetail>
</Detail>
</div>
</section>
</template>
@@ -71,8 +71,8 @@
<script>
import img from "@/directives/v-image";
import CastList from "@/components/CastList";
import MovieDetail from "@/components/movie/Detail";
import MovieDescription from "@/components/movie/Description";
import Detail from "@/components/popup/Detail";
import Description from "@/components/popup/Description";
import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
import { getPerson, getPersonCredits } from "@/api";
@@ -90,8 +90,8 @@ export default {
}
},
components: {
MovieDetail,
MovieDescription,
Detail,
Description,
CastList,
LoadingPlaceholder
},

View File

@@ -39,7 +39,7 @@
import { mapGetters, mapActions } from "vuex";
import ListHeader from "@/components/ListHeader";
import ResultsList from "@/components/ResultsList";
import Settings from "@/pages/Settings";
import Settings from "@/pages/SettingsPage";
import Activity from "@/pages/ActivityPage";
import SeasonedButton from "@/components/ui/SeasonedButton";

View File

@@ -20,7 +20,7 @@ let routes = [
name: "profile",
path: "/profile",
meta: { requiresAuth: true },
component: resolve => require(["./pages/Profile.vue"], resolve)
component: resolve => require(["./pages/ProfilePage.vue"], resolve)
},
{
name: "list",
@@ -40,19 +40,19 @@ let routes = [
{
name: "register",
path: "/register",
component: resolve => require(["./pages/Register.vue"], resolve)
component: resolve => require(["./pages/RegisterPage.vue"], resolve)
},
{
name: "settings",
path: "/settings",
meta: { requiresAuth: true },
component: resolve => require(["./pages/Settings.vue"], resolve)
component: resolve => require(["./pages/SettingsPage.vue"], resolve)
},
{
name: "signin",
path: "/signin",
alias: "/login",
component: resolve => require(["./pages/Signin.vue"], resolve)
component: resolve => require(["./pages/SigninPage.vue"], resolve)
},
// {
// name: 'user-requests',