kittyfangs
/
fchat-rising
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Expand/minimize match report

This commit is contained in:
Mr. Stallion 2019-06-29 16:28:47 -05:00
parent 61a9a64ec8
commit 7f903e370d
2 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
site/character_page/character_page.vue
View File

@ -497,12 +497,40 @@
margin-bottom: 1rem; margin-bottom: 1rem;
padding-bottom: 0; padding-bottom: 0;
padding-top: 0.5rem; 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 { h3 {
font-size: 1.25rem; 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 { .scores {
float: left; float: left;
flex: 1; flex: 1;
@ -511,7 +539,7 @@
ul { ul {
padding: 0; padding: 0;
padding-left: 0.5rem; padding-left: 0rem;
list-style: none; list-style: none;
} }

20
site/character_page/match-report.vue
View File

@ -1,9 +1,12 @@
<template> <template>
<div id="match-report" :class="{'match-report': true, minimized: minimized}" v-if="(haveScores(characterMatch.you) || haveScores(characterMatch.them))"> <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"> <div class="scores you">
<h3>{{characterMatch.you.you.name}}</h3> <h3>
<img :src="avatarUrl(characterMatch.you.you.name)" class="thumbnail"/>
{{characterMatch.you.you.name}}
</h3>
<ul> <ul>
<li v-for="score in getScores(characterMatch.you)" v-if="shouldShowScore(score)" :class="getScoreClass(score)" v-html="score.description"></li> <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. vs.
</div> </div>
<div v-if="haveScores(characterMatch.them)" class="scores them"> <div class="scores them">
<h3>{{characterMatch.them.you.name}}</h3> <h3>
<img :src="avatarUrl(characterMatch.them.you.name)" class="thumbnail" />
{{characterMatch.them.you.name}}
</h3>
<ul> <ul>
<li v-for="score in getScores(characterMatch.them)" v-if="shouldShowScore(score)" :class="getScoreClass(score)" v-html="score.description"></li> <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 Vue from 'vue';
import { MatchReport, MatchResult, Score, Scoring } from './matcher'; import { MatchReport, MatchResult, Score, Scoring } from './matcher';
import * as _ from 'lodash'; import * as _ from 'lodash';
import * as Utils from '../utils';
@Component @Component
export default class MatchReportView extends Vue { export default class MatchReportView extends Vue {
@Prop({required: true}) @Prop({required: true})
readonly characterMatch!: MatchReport; readonly characterMatch!: MatchReport;
readonly avatarUrl = Utils.avatarURL;
minimized = false; minimized = false;
getScoreClass(score: Score) { getScoreClass(score: Score) {