From 7f903e370df9b770a96f1bf9dedd033bcea73e3c Mon Sep 17 00:00:00 2001
From: "Mr. Stallion" <mrstallion@nobody.nowhere.fauxemail.ext>
Date: Sat, 29 Jun 2019 16:28:47 -0500
Subject: [PATCH] Expand/minimize match report
---
site/character_page/character_page.vue | 32 ++++++++++++++++++++++++--
site/character_page/match-report.vue | 20 +++++++++++-----
2 files changed, 44 insertions(+), 8 deletions(-)
diff --git a/site/character_page/character_page.vue b/site/character_page/character_page.vue
index dfa1600..05d8cd1 100644
--- a/site/character_page/character_page.vue
+++ b/site/character_page/character_page.vue
@@ -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;
}
diff --git a/site/character_page/match-report.vue b/site/character_page/match-report.vue
index cc70bb1..64430e0 100644
--- a/site/character_page/match-report.vue
+++ b/site/character_page/match-report.vue
@@ -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) {