Expand/minimize match report
This commit is contained in:
parent
61a9a64ec8
commit
7f903e370d
|
@ -497,12 +497,40 @@
|
|||
margin-bottom: 1rem;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0.5rem;
|
||||
max-width: 25rem;
|
||||
|
||||
.thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&.minimized {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
|
||||
.vs, .scores {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.minimize-btn {
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: 0.5rem;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
padding: 0.4rem;
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 4px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.scores {
|
||||
float: left;
|
||||
flex: 1;
|
||||
|
@ -511,7 +539,7 @@
|
|||
|
||||
ul {
|
||||
padding: 0;
|
||||
padding-left: 0.5rem;
|
||||
padding-left: 0rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,9 +1,12 @@
|
|||
<template>
|
||||
<div id="match-report" :class="{'match-report': true, minimized: minimized}" v-if="(haveScores(characterMatch.you) || haveScores(characterMatch.them))">
|
||||
<a @click="toggleMinimize()"><i :class="{fa: true, 'fa-plus': minimized, 'fa-minus': !minimized}"></i></a>
|
||||
<a class="minimize-btn" @click="toggleMinimize()"><i :class="{fa: true, 'fa-plus': minimized, 'fa-minus': !minimized}"></i></a>
|
||||
|
||||
<div v-if="haveScores(characterMatch.you)" class="scores you">
|
||||
<h3>{{characterMatch.you.you.name}}</h3>
|
||||
<div class="scores you">
|
||||
<h3>
|
||||
<img :src="avatarUrl(characterMatch.you.you.name)" class="thumbnail"/>
|
||||
{{characterMatch.you.you.name}}
|
||||
</h3>
|
||||
|
||||
<ul>
|
||||
<li v-for="score in getScores(characterMatch.you)" v-if="shouldShowScore(score)" :class="getScoreClass(score)" v-html="score.description"></li>
|
||||
|
@ -14,8 +17,11 @@
|
|||
vs.
|
||||
</div>
|
||||
|
||||
<div v-if="haveScores(characterMatch.them)" class="scores them">
|
||||
<h3>{{characterMatch.them.you.name}}</h3>
|
||||
<div class="scores them">
|
||||
<h3>
|
||||
<img :src="avatarUrl(characterMatch.them.you.name)" class="thumbnail" />
|
||||
{{characterMatch.them.you.name}}
|
||||
</h3>
|
||||
|
||||
<ul>
|
||||
<li v-for="score in getScores(characterMatch.them)" v-if="shouldShowScore(score)" :class="getScoreClass(score)" v-html="score.description"></li>
|
||||
|
@ -29,13 +35,15 @@
|
|||
import Vue from 'vue';
|
||||
import { MatchReport, MatchResult, Score, Scoring } from './matcher';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
import * as Utils from '../utils';
|
||||
|
||||
@Component
|
||||
export default class MatchReportView extends Vue {
|
||||
@Prop({required: true})
|
||||
readonly characterMatch!: MatchReport;
|
||||
|
||||
readonly avatarUrl = Utils.avatarURL;
|
||||
|
||||
minimized = false;
|
||||
|
||||
getScoreClass(score: Score) {
|
||||
|
|
Loading…
Reference in New Issue