Clean up page header

This commit is contained in:
Gamebrary 2022-08-11 15:09:42 -07:00
parent 94c167d532
commit 0094175487
2 changed files with 5 additions and 113 deletions

View file

@ -1,79 +0,0 @@
<template lang="html">
<b-dropdown
v-if="game"
split
:split-to="{ name: 'game', params: { id: game.id, slug: game.slug }}"
split-class="p-0"
right
variant="dark"
>
<template #button-content>
<b-avatar variant="transparent" :src="gameCoverUrl" rounded />
<!-- <small class="text-white px-2 text-decoration-none">{{ game.name }}</small> -->
<small class="px-2 d-none d-md-inline text-nowrap">{{ game.name }}</small>
</template>
<!-- <b-button-group class="mx-1">
<b-button variant="info">
<i class="fa-solid fa-plus-minus" />
</b-button>
<b-button
size="small"
variant="info"
:to="{ name: 'game.progress', params: { id: game.id } }"
>
<i class="fa-solid fa-bars-progress" />
</b-button>
</b-button-group> -->
<b-dropdown-item @click="$bus.$emit('ADD_GAME', game.id)">
<i class="fa-solid fa-plus fa-fw" />
Add to list
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'game.tags', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-tags fa-fw" />
Tags
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'game.progress', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-bars-progress fa-fw" />
Track progress
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'game.notes', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-note-sticky fa-fw" />
Notes
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'game.news', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-newspaper fa-fw" />
News
</b-dropdown-item>
<b-dropdown-item :to="{ name: 'game.media', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-photo-film fa-fw" />
Images / Videos
</b-dropdown-item>
</b-dropdown>
</template>
<script>
import { getGameCoverUrl } from '@/utils';
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['game']),
gameCoverUrl() {
return getGameCoverUrl(this.game);
}
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
</style>

View file

@ -2,11 +2,8 @@
<header class="p-2 d-flex">
<home-button />
<portal-target name="pageTitle" slim />
<!-- <boards-dropdown v-if="board.id && isBoardPage" /> -->
<!-- <game-dropdown v-if="isGamePage" /> -->
<div class="global-actions">
<!-- TODO: rename target -->
<div class="align-items-center d-flex ml-auto">
<portal-target name="headerActions" />
<!-- <b-button v-if="user" class="mr-2" variant="success" :to="{ name: 'upgrade' }">
@ -14,7 +11,7 @@
</b-button> -->
<b-button
v-if="!isSearchPage"
v-if="showSearchButton"
variant="light"
class="mr-2"
:to="{ name: 'search' }"
@ -33,7 +30,7 @@
<b-button
v-else
class="mr-3"
variant="primary"
variant="dark"
:to="{ name: 'auth' }"
>
Login
@ -43,34 +40,20 @@
</template>
<script>
// import GameDropdown from '@/components/Game/GameDropdown';
import HomeButton from '@/components/Shared/HomeButton';
import { mapState } from 'vuex';
export default {
components: {
// GameDropdown,
HomeButton,
},
computed: {
...mapState(['board', 'boards', 'user', 'game']),
isBoardPage() {
return this.$route.name.startsWith('board');
},
isGamePage() {
return this.$route.name.startsWith('game');
},
isSearchPage() {
return this.$route.name === 'search';
},
showBoardName() {
return this.$route.name === 'board' && this.board?.name;
showSearchButton() {
return this.$route.name !== 'search';
},
},
};
@ -83,16 +66,4 @@ export default {
grid-template-columns: 65px 1fr;
z-index: 1;
}
.toolbar {
display: flex;
width: 100%;
align-items: center;
}
.global-actions {
margin-left: auto;
display: flex;
align-items: center;
}
</style>