From d2bfb487ba250eed9d506a2128f3d04eead0ae92 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 21 Oct 2019 18:12:57 +0200
Subject: [PATCH] fix: ranked stats container always same width even if LP are
 >= 1000

---
 client/src/components/SummonerLoader.vue | 22 +++++++--------
 client/src/components/SummonerRanked.vue | 34 +++++++++++++-----------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/client/src/components/SummonerLoader.vue b/client/src/components/SummonerLoader.vue
index 85ebe8e..7d5c385 100644
--- a/client/src/components/SummonerLoader.vue
+++ b/client/src/components/SummonerLoader.vue
@@ -9,17 +9,17 @@
           primary-color="#17314f"
           secondary-color="#2b6cb0"
         >
-          <rect x="2" y="23" rx="3" ry="3" width="164" height="31" />
-          <circle cx="49" cy="121" r="48" />
-          <rect x="119" y="75" rx="3" ry="3" width="123" height="31" />
-          <rect x="119" y="116" rx="3" ry="3" width="164" height="31" />
-          <rect x="136" y="179" rx="3" ry="3" width="80" height="80" />
-          <rect x="222" y="209" rx="3" ry="3" width="59" height="22" />
-          <rect x="309" y="186" rx="3" ry="3" width="75" height="19" />
-          <rect x="426" y="186" rx="3" ry="3" width="75" height="19" />
-          <rect x="310" y="213" rx="3" ry="3" width="75" height="10" />
-          <rect x="320" y="231" rx="3" ry="3" width="65" height="10" />
-          <rect x="436" y="213" rx="3" ry="3" width="65" height="10" />
+          <rect x="2" y="23" rx="3" ry="3" width="164" height="31" /> 
+          <circle cx="49" cy="121" r="48" /> 
+          <rect x="119" y="75" rx="3" ry="3" width="123" height="31" /> 
+          <rect x="119" y="116" rx="3" ry="3" width="164" height="31" /> 
+          <rect x="136" y="179" rx="3" ry="3" width="80" height="80" /> 
+          <rect x="222" y="209" rx="3" ry="3" width="59" height="22" /> 
+          <rect x="330" y="183" rx="3" ry="3" width="75" height="19" /> 
+          <rect x="458" y="185" rx="3" ry="3" width="75" height="19" /> 
+          <rect x="330" y="212" rx="3" ry="3" width="75" height="10" /> 
+          <rect x="340" y="232" rx="3" ry="3" width="65" height="10" /> 
+          <rect x="468" y="218" rx="3" ry="3" width="65" height="10" />
         </content-loader>
       </div>
 
diff --git a/client/src/components/SummonerRanked.vue b/client/src/components/SummonerRanked.vue
index ad18b2a..c2148ed 100644
--- a/client/src/components/SummonerRanked.vue
+++ b/client/src/components/SummonerRanked.vue
@@ -25,30 +25,32 @@
     </div>
 
     <div class="mt-1 text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div>
-    <div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg">
-      <div class="flex items-center">
+    <div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg" style="width: 430px;">
+      <div class="flex items-center w-1/2">
         <div
           class="w-20 h-20 bg-blue-1000"
           :style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
         ></div>
         <div class="ml-2 text-xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
       </div>
-      <div class="ml-10 mt-2 font-extrabold uppercase leading-none">
-        <div class="text-teal-500 text-base">Record</div>
-        <div class="flex">
-          <div class="mt-2 text-sm leading-tight text-right">
-            <div>{{ selectedLeague.wins }}</div>
-            <div>{{ selectedLeague.losses }}</div>
-          </div>
-          <div class="ml-2 mt-2 text-sm leading-tight">
-            <div class="text-teal-500">Wins</div>
-            <div class="text-red-300">Losses</div>
+      <div class="flex justify-between w-1/2">
+        <div class="mt-2 font-extrabold uppercase leading-none">
+          <div class="text-teal-500 text-base">Record</div>
+          <div class="flex">
+            <div class="mt-2 text-sm leading-tight text-right">
+              <div>{{ selectedLeague.wins }}</div>
+              <div>{{ selectedLeague.losses }}</div>
+            </div>
+            <div class="ml-2 mt-2 text-sm leading-tight">
+              <div class="text-teal-500">Wins</div>
+              <div class="text-red-300">Losses</div>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="ml-10 mt-2 font-extrabold">
-        <div class="text-teal-500 text-base uppercase">Winrate</div>
-        <div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</div>
+        <div class="mt-2 font-extrabold">
+          <div class="text-teal-500 text-base uppercase">Winrate</div>
+          <div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</div>
+        </div>
       </div>
     </div>
   </div>