adds print view, fixes card sizes, types are now imported
koehr
4 years ago
parent
59de19b63c
commit
749ab36ac1
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="switch">
|
||||
<input :id="id" class="checkbox" type="checkbox" :checked="value" @change="$emit('input', !value)" />
|
||||
<label :for="id">
|
||||
<div class="switch-label-text">{{ label }}</div>
|
||||
<div class="switch-elements-wrapper">
|
||||
<div class="switch-elements">
|
||||
<div class="switch-element off"><slot name="off">NO</slot></div>
|
||||
<div class="switch-element btn"></div>
|
||||
<div class="switch-element on"><slot name="on">YES</slot></div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component
|
||||
export default class FlipSwitch extends Vue {
|
||||
@Prop() public readonly id!: string
|
||||
@Prop() public readonly value!: boolean
|
||||
@Prop() public readonly label!: string
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.switch > input {
|
||||
display: none;
|
||||
}
|
||||
.switch .switch-elements-wrapper {
|
||||
height: 2em;
|
||||
width: 4em;
|
||||
border: 4px solid black;
|
||||
border-radius: 2em;
|
||||
background-color: black;
|
||||
overflow: hidden;
|
||||
}
|
||||
.switch .switch-elements {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
transition: transform .2s ease-in;
|
||||
}
|
||||
.switch .switch-element {
|
||||
height: 1.8em;
|
||||
width: 1.8em;
|
||||
margin: .1em;
|
||||
line-height: 1.8em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.switch .btn {
|
||||
background-color: gray;
|
||||
border-radius: 5em;
|
||||
}
|
||||
|
||||
input.checkbox:checked + label .switch-elements-wrapper > .switch-elements {
|
||||
transform: translate(-2em, 0);
|
||||
}
|
||||
input.checkbox:checked + label .switch-elements-wrapper {
|
||||
box-shadow: 0 0 15px 2px green;
|
||||
}
|
||||
</style>
|
||||
@ -1,46 +0,0 @@
|
||||
interface KV<V> {
|
||||
[key: string]: V;
|
||||
}
|
||||
|
||||
interface ContentBlock {
|
||||
type: string;
|
||||
data: object;
|
||||
}
|
||||
|
||||
interface CardContent {
|
||||
time: number;
|
||||
blocks: ContentBlock[];
|
||||
version: string;
|
||||
}
|
||||
|
||||
interface Card {
|
||||
id: string;
|
||||
name: string;
|
||||
count: number;
|
||||
tags: string[];
|
||||
icon: string;
|
||||
content: CardContent;
|
||||
backIcon?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
interface Deck {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
color: string;
|
||||
icon: string;
|
||||
cards: Card[];
|
||||
cardWidth: number;
|
||||
cardHeight: number;
|
||||
titleFontSize?: number;
|
||||
}
|
||||
|
||||
interface Settings {
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface StoredStuff {
|
||||
decks: Deck[];
|
||||
defaults: Settings;
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
export const enum PageSize {
|
||||
A4 = '210mm 297mm',
|
||||
USLetter = '8.5in 11in',
|
||||
JISB4 = '182mm 257mm',
|
||||
A3 = '297mm 420mm',
|
||||
A5 = '148mm 210mm',
|
||||
USLegal = '8.5in 14in',
|
||||
USLedger = '11in 17in',
|
||||
JISB5 = '257mm 364mm'
|
||||
}
|
||||
|
||||
export const enum CardSize {
|
||||
Poker = '89x64',
|
||||
Bridge = '89x57'
|
||||
}
|
||||
|
||||
export const enum Arrangement {
|
||||
DoubleSided = 'doublesided',
|
||||
FrontOnly = 'frontonly',
|
||||
SideBySide = 'sidebyside'
|
||||
}
|
||||
|
||||
export interface KV<V> {
|
||||
[key: string]: V;
|
||||
}
|
||||
|
||||
export interface ContentBlock {
|
||||
type: string;
|
||||
data: object;
|
||||
}
|
||||
|
||||
export interface CardContent {
|
||||
time: number;
|
||||
blocks: ContentBlock[];
|
||||
version: string;
|
||||
}
|
||||
|
||||
export interface Card {
|
||||
id: string;
|
||||
name: string;
|
||||
count: number;
|
||||
tags: string[];
|
||||
icon: string;
|
||||
content: CardContent;
|
||||
backIcon?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface Deck {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
color: string;
|
||||
icon: string;
|
||||
cards: Card[];
|
||||
cardSize: CardSize;
|
||||
}
|
||||
|
||||
export interface Settings {
|
||||
color: string;
|
||||
}
|
||||
|
||||
export interface StoredStuff {
|
||||
decks: Deck[];
|
||||
defaults: Settings;
|
||||
}
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<main id="print-view" name="print-view" :class="{ loading, 'not-found': notFound }" :style="pageSizeCSS">
|
||||
<div class="page">
|
||||
<header>Page 1</header>
|
||||
<p>foo bar baz</p>
|
||||
<ol>
|
||||
<li :key="`c${i}`" v-for="(card, i) in deck.cards">{{ card.title }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="page">
|
||||
<header>Page 2</header>
|
||||
<p>foo bar baz</p>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { Deck } from '../types'
|
||||
import { iconPath } from '../lib'
|
||||
|
||||
@Component
|
||||
export default class PrintDeck extends Vue {
|
||||
private loading = true
|
||||
private notFound = false
|
||||
private deck: Deck | null = null
|
||||
|
||||
private size = '210mm 297mm'
|
||||
private landscape = false // TODO: not yet implemented
|
||||
|
||||
private mounted () {
|
||||
const currentDeckId = this.$route.params.id
|
||||
this.deck = this.$storage.findDeck(currentDeckId)
|
||||
if (this.deck === null) this.notFound = true
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
private get deckIcon () {
|
||||
if (this.deck === null) return ''
|
||||
return iconPath(this.deck.icon)
|
||||
}
|
||||
|
||||
private get pageSizeCSS () {
|
||||
const [w, h] = this.size.split(' ')
|
||||
|
||||
return {
|
||||
'--width': w,
|
||||
'--height': h,
|
||||
'--size': this.size
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@page {
|
||||
margin: 0;
|
||||
size: var(--size);
|
||||
}
|
||||
#print-view > .page {
|
||||
display: block;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
margin: 5mm auto;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
@media print {
|
||||
html,body {
|
||||
background-color: gray;
|
||||
}
|
||||
#app > .home-link {
|
||||
display: none;
|
||||
}
|
||||
#print-view > .page {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue