From d61fa871d66d6237d7bca28bbd5a4535827abc01 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Thu, 26 Jul 2018 21:52:46 +0200
Subject: WinPickScatter: Improve alignments

---
 src/WinPickScatter.vue | 44 ++++++++++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/WinPickScatter.vue b/src/WinPickScatter.vue
index 107a67a..ae2cfc6 100644
--- a/src/WinPickScatter.vue
+++ b/src/WinPickScatter.vue
@@ -1,27 +1,35 @@
 <template>
   <section>
     <div class="block" v-show="hasTalents">
-      <b-radio v-model="yMetric" native-value="TotalWinner">
-        Win Rate
-      </b-radio>
-      <b-radio v-model="yMetric" native-value="TalentWinrateBase">
-        Level 1 Win Rate
-      </b-radio>
-      <b-radio v-model="yMetric" native-value="TalentWinrateMax">
-        Max Level Win Rate
-      </b-radio>
+      <b-field grouped group-multiline>
+        <label class="control label">Metric</label>
+        <p class="control">
+          <b-radio v-model="yMetric" native-value="TotalWinner">Win Rate</b-radio>
+        </p>
+        <p class="control">
+          <b-radio v-model="yMetric" native-value="TalentWinrateBase">Level 1 Win Rate</b-radio>
+        </p>
+        <p class="control">
+          <b-radio v-model="yMetric" native-value="TalentWinrateMax">Max Level Win Rate</b-radio>
+        </p>
+      </b-field>
     </div>
 
-    <b-field>
-      <b-checkbox v-model="fixedXRange">
-        Fixed Range
-      </b-checkbox>
-      <b-checkbox v-model="filterLowPickrate">
-        Include entries without enough data (statistics will be inaccurate)
-      </b-checkbox>
-    </b-field>
+    <div class="block">
+      <b-field grouped group-multiline>
+        <label class="control label">Options</label>
+        <p class="control">
+          <b-checkbox v-model="fixedXRange">Fixed Range</b-checkbox>
+        </p>
+        <p class="control">
+          <b-checkbox v-model="filterLowPickrate">Include entries without enough data</b-checkbox>
+        </p>
+      </b-field>
+    </div>
 
-    <div class="plotly" ref="graph"></div>
+    <div class="block">
+      <label class="label">Data</label>
+      <div class="plotly" ref="graph"></div>
     </div>
   </section>
 </template>
-- 
cgit v1.3.1