mirror of
https://github.com/romancm/gamebrary
synced 2024-12-24 10:03:07 +00:00
b392112b54
* Add advanced theme settings - header position - border-radius - list background - amount of games next to list title - settings section headlines * Linting * Linting: indent * keep options consistent switching from "hide this" and "display this" is bad UX. * Hide number of games in lists by default * reverse header position with css * border-radius * remove transparent background setting this will be handled by themes * only affect top/bottom settings on mobile
171 lines
3.2 KiB
Vue
171 lines
3.2 KiB
Vue
<!-- TODO: abstract styles, only add card specific styles in each component -->
|
|
<template lang="html">
|
|
<div v-if="gameId && games[gameId]" :class="gameCardClass">
|
|
<img
|
|
:src="coverUrl"
|
|
:alt="game.name"
|
|
@click="openDetails"
|
|
>
|
|
|
|
<div class="game-info">
|
|
<a
|
|
v-if="list.view !== 'covers'"
|
|
v-text="game.name"
|
|
@click="openDetails"
|
|
/>
|
|
|
|
<i class="fas fa-grip-vertical game-drag-handle" />
|
|
|
|
<game-progress
|
|
v-if="gameProgress"
|
|
small
|
|
:progress="gameProgress"
|
|
@click.native="openDetails"
|
|
/>
|
|
|
|
<game-rating
|
|
v-if="showGameRatings"
|
|
:rating="game.rating"
|
|
small
|
|
@click.native="openDetails"
|
|
/>
|
|
|
|
<i
|
|
v-if="note"
|
|
:title="note"
|
|
class="fas fa-sticky-note note"
|
|
@click="openDetails"
|
|
/>
|
|
|
|
<div v-if="hasTags" class="game-tags">
|
|
|
|
<div
|
|
v-for="({ games, hex, tagTextColor }, name) in tags"
|
|
v-if="games.includes(game.id)"
|
|
:key="name"
|
|
>
|
|
<tag
|
|
v-if="games.includes(game.id)"
|
|
:label="name"
|
|
:hex="hex"
|
|
:text-hex="tagTextColor"
|
|
readonly
|
|
@action="openTags"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import GameRating from '@/components/GameDetail/GameRating';
|
|
import GameProgress from '@/components/GameDetail/GameProgress';
|
|
import GameCardUtils from '@/components/GameCards/GameCard';
|
|
import Tag from '@/components/Tag';
|
|
|
|
export default {
|
|
components: {
|
|
GameRating,
|
|
GameProgress,
|
|
Tag,
|
|
},
|
|
|
|
mixins: [GameCardUtils],
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
|
@import "~styles/styles";
|
|
|
|
$gameCoverWidth: 80px;
|
|
|
|
.game-card {
|
|
background: var(--game-card-background);
|
|
margin-bottom: $gp / 2;
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: $gameCoverWidth auto;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
|
|
&.card-placeholder {
|
|
background: var(--game-card-background);
|
|
opacity: 0.3;
|
|
|
|
.game-card-options {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: $gameCoverWidth;
|
|
height: auto;
|
|
display: flex;
|
|
align-self: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.game-info {
|
|
padding: $gp / 2 $gp;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.game-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-top: $gp / 4;
|
|
}
|
|
|
|
.tag {
|
|
margin-right: $gp / 4;
|
|
}
|
|
|
|
i.tags {
|
|
position: absolute;
|
|
bottom: $gp * 1.5;
|
|
right: $gp / 4;
|
|
}
|
|
|
|
.game-rating, a {
|
|
display: inline-flex;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&:hover {
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
a {
|
|
cursor: pointer;
|
|
margin-right: $gp / 2;
|
|
color: var(--game-card-text-color);
|
|
}
|
|
}
|
|
|
|
.game-drag-handle {
|
|
@include drag-cursor;
|
|
position: absolute;
|
|
color: #e5e5e5;
|
|
right: $gp / 3;
|
|
top: $gp / 3;
|
|
|
|
&:hover {
|
|
color: #a5a2a2;
|
|
}
|
|
}
|
|
|
|
.game-tag {
|
|
margin-bottom: $gp / 3;
|
|
}
|
|
}
|
|
|
|
.note {
|
|
color: var(--note-color);
|
|
}
|
|
</style>
|
|
|