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

Updated app & header grid layout

Browse Source
This commit is contained in:
Kevin
2022-07-26 19:51:19 +02:00
parent 023b2cd86e
commit ae3b228cf5
8 changed files with 80 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/App.vue
View File

@@ -2,7 +2,10 @@
<div id="app">
<!-- Header and hamburger navigation -->
<NavigationHeader class="header"></NavigationHeader>
<NavigationIcons class="desktop-menu desktop-only" />
<div class="navigation-icons-gutter desktop-only">
<NavigationIcons />
</div>
<!-- Display the component assigned to the given route (default: home) -->
<router-view class="content" :key="$route.fullPath"></router-view>
@@ -37,36 +40,38 @@ export default {
#app {
display: grid;
// grid-template-columns: 90px 1fr 90px;
grid-template-rows: var(--header-size);
grid-template-columns: var(--header-size) 1fr;
}
.header {
position: fixed;
top: 0;
width: 100%;
grid-column: 1 / 3;
grid-row: 1;
z-index: 15;
}
.content {
grid-column: 2 / 3;
grid-row: 2;
z-index: 5;
@include mobile {
grid-column: 1 / 3;
grid-template-columns: 1fr;
}
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
.navigation-icons-gutter {
position: fixed;
height: 100vh;
margin: 0;
top: var(--header-size);
width: var(--header-size);
background-color: var(--background-color-secondary);
}
.content {
display: grid;
grid-column: 2 / 3;
grid-row: 2;
z-index: 5;
@include mobile {
grid-column: 1 / 3;
}
}
}
.desktop-menu {
grid-column: 1 / 2;
grid-row: 2;
width: var(--header-size);
position: fixed;
top: var(--header-size);
left: 0;
}
</style>

2
src/components/MoviePopup.vue
View File

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

14
src/components/NavigationHeader.vue
View File

@@ -9,11 +9,11 @@
<SearchInput />
<Hamburger />
<Hamburger class="mobile-only" />
<NavigationIcon class="desktop-only" :route="profileRoute" />
<div class="nav__list mobile-only" :class="{ open: isOpen }">
<div class="navigation-icons-grid mobile-only" :class="{ open: isOpen }">
<NavigationIcons>
<NavigationIcon :route="profileRoute" />
</NavigationIcons>
@@ -22,7 +22,7 @@
</template>
<script>
import storage from "@/storage";
import { mapGetters, mapActions } from "vuex";
import TmdbLogo from "../icons/tmdb-logo";
import IconProfile from "../icons/IconProfile";
import IconProfileLock from "../icons/IconProfileLock";
@@ -32,7 +32,6 @@ import SearchInput from "@/components/SearchInput";
import NavigationIcons from "src/components/NavigationIcons";
import NavigationIcon from "src/components/ui/NavigationIcon";
import Hamburger from "@/components/ui/Hamburger";
import { mapGetters, mapActions } from "vuex";
export default {
components: {
@@ -46,11 +45,6 @@ export default {
IconActivity,
Hamburger
},
data() {
return {
listTypes: storage.homepageLists
};
},
computed: {
...mapGetters("user", ["loggedIn"]),
...mapGetters("hamburger", ["isOpen"]),
@@ -112,7 +106,7 @@ nav {
}
}
.nav__list {
.navigation-icons-grid {
display: flex;
flex-wrap: wrap;
position: fixed;

47
src/components/NavigationIcons.vue
View File

@@ -32,44 +32,25 @@ export default {
},
data() {
return {
routes: [],
activeRoute: null
};
},
watch: {
$route() {
this.activeRoute = window.location.pathname;
}
},
created() {
this.activeRoute = window.location.pathname;
this.routes = this.getAvailableRoutes();
},
methods: {
getAvailableRoutes() {
return [
routes: [
{
title: "Requests",
route: "/list/requests",
apiPath: "/v2/requests",
icon: IconInbox
},
{
title: "Now Playing",
route: "/list/now_playing",
apiPath: "/v2/movie/now_playing",
icon: IconNowPlaying
},
{
title: "Popular",
route: "/list/popular",
apiPath: "/v2/movie/popular",
icon: IconPopular
},
{
title: "Upcoming",
route: "/list/upcoming",
apiPath: "/v2/movie/upcoming",
icon: IconUpcoming
},
{
@@ -84,8 +65,17 @@ export default {
requiresAuth: true,
icon: IconSettings
}
];
],
activeRoute: null
};
},
watch: {
$route() {
this.activeRoute = window.location.pathname;
}
},
created() {
this.activeRoute = window.location.pathname;
}
};
</script>
@@ -94,17 +84,20 @@ export default {
@import "src/scss/media-queries";
.navigation-icons {
display: inline-flex;
flex-direction: column;
margin: 0;
display: grid;
grid-column: 1fr;
padding-left: 0;
height: 100%;
margin: 0;
background-color: var(--background-color-secondary);
z-index: 15;
width: 100%;
@include desktop {
grid-template-rows: var(--header-size);
}
@include mobile {
flex-wrap: wrap;
flex-direction: row;
grid-template-columns: 1fr 1fr;
}
}
</style>

14
src/components/Person.vue
View File

@@ -54,7 +54,7 @@
:detail="`Credited in ${movieCredits.length} movies`"
v-if="credits"
>
<Cast :cast="movieCredits" />
<CastList :cast="movieCredits" />
</MovieDetail>
<MovieDetail
@@ -62,7 +62,7 @@
:detail="`Credited in ${showCredits.length} shows`"
v-if="credits"
>
<Cast :cast="showCredits" />
<CastList :cast="showCredits" />
</MovieDetail>
</div>
</section>
@@ -70,10 +70,10 @@
<script>
import img from "@/directives/v-image";
import Cast from "./Cast";
import MovieDetail from "./ui/MovieDetail";
import MovieDescription from "./ui/MovieDescription";
import LoadingPlaceholder from "./ui/LoadingPlaceholder";
import CastList from "@/components/CastList";
import MovieDetail from "@/components/movie/Detail";
import MovieDescription from "@/components/movie/Description";
import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
import { getPerson, getPersonCredits } from "@/api";
@@ -92,7 +92,7 @@ export default {
components: {
MovieDetail,
MovieDescription,
Cast,
CastList,
LoadingPlaceholder
},
directives: { img: img }, // TODO decide to remove or use

1
src/components/ResultsList.vue
View File

@@ -67,6 +67,7 @@ export default {
&.shortList {
overflow: auto;
grid-auto-flow: column;
max-width: 100vw;
@include noscrollbar;

19
src/components/ui/NavigationIcon.vue
View File

@@ -2,9 +2,7 @@
<router-link
:to="{ path: route.route }"
:key="route.title"
v-if="
route.requiresAuth == undefined || (route.requiresAuth && userLoggedIn)
"
v-if="route.requiresAuth == undefined || (route.requiresAuth && loggedIn)"
>
<li class="navigation-link" :class="{ active: route.route == active }">
<component class="navigation-icon" :is="route.icon"></component>
@@ -14,6 +12,8 @@
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "NavigationIcons",
props: {
@@ -27,9 +27,7 @@ export default {
}
},
computed: {
userLoggedIn() {
return localStorage.getItem("token") ? true : false;
}
...mapGetters("user", ["loggedIn"])
}
};
</script>
@@ -40,21 +38,14 @@ export default {
.navigation-link {
display: grid;
place-items: center;
height: var(--header-size);
min-height: var(--header-size);
list-style: none;
padding: 1rem 0.15rem;
margin: 0;
text-align: center;
background-color: var(--background-color-secondary);
transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
fill 0.3s ease, background-color 0.5s ease;
@include mobile {
height: 90px;
padding: 1rem;
width: 50vw;
}
&:hover {
transform: scale(1.05);
}

20
src/routes.js
View File

@@ -8,51 +8,51 @@ let routes = [
{
name: "home",
path: "/",
component: resolve => require(["./components/Home.vue"], resolve)
component: resolve => require(["./pages/Home.vue"], resolve)
},
{
name: "activity",
path: "/activity",
meta: { requiresAuth: true },
component: resolve => require(["./components/ActivityPage.vue"], resolve)
component: resolve => require(["./pages/ActivityPage.vue"], resolve)
},
{
name: "profile",
path: "/profile",
meta: { requiresAuth: true },
component: resolve => require(["./components/Profile.vue"], resolve)
component: resolve => require(["./pages/Profile.vue"], resolve)
},
{
name: "list",
path: "/list/requests",
component: resolve => require(["./components/RequestPage.vue"], resolve)
component: resolve => require(["./pages/RequestPage.vue"], resolve)
},
{
name: "list",
path: "/list/:name",
component: resolve => require(["./components/ListPage.vue"], resolve)
component: resolve => require(["./pages/ListPage.vue"], resolve)
},
{
name: "search",
path: "/search",
component: resolve => require(["./components/SearchPage.vue"], resolve)
component: resolve => require(["./pages/SearchPage.vue"], resolve)
},
{
name: "register",
path: "/register",
component: resolve => require(["./components/Register.vue"], resolve)
component: resolve => require(["./pages/Register.vue"], resolve)
},
{
name: "settings",
path: "/settings",
meta: { requiresAuth: true },
component: resolve => require(["./components/Settings.vue"], resolve)
component: resolve => require(["./pages/Settings.vue"], resolve)
},
{
name: "signin",
path: "/signin",
alias: "/login",
component: resolve => require(["./components/Signin.vue"], resolve)
component: resolve => require(["./pages/Signin.vue"], resolve)
},
// {
// name: 'user-requests',
@@ -64,7 +64,7 @@ let routes = [
{
name: "404",
path: "/404",
component: resolve => require(["./components/404.vue"], resolve)
component: resolve => require(["./pages/404.vue"], resolve)
},
{
path: "*",