From c3344534a870a2cf9a66543915079e44630f7638 Mon Sep 17 00:00:00 2001
From: Knut Ahlers <knut@ahlers.me>
Date: Sat, 21 Nov 2020 03:06:06 +0100
Subject: [PATCH] Re-sort overlay

---
 overlay.html | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/overlay.html b/overlay.html
index 5e59caf..8eb2eba 100644
--- a/overlay.html
+++ b/overlay.html
@@ -23,20 +23,28 @@
         type="dark"
         variant="primary"
       >
+        <!-- Channel Brand -->
         <b-navbar-brand href="#"><i class="fab fa-twitch"></i> Luziferus</b-navbar-brand>
+
+        <!-- Left aligned nav items -->
         <b-navbar-nav>
+          <!-- Followers -->
+          <b-nav-text class="mx-2" v-if="store.followers && store.followers.count">
+            <i class="fas fa-users"></i> {{ store.followers.count }} / {{ nextFollowers }}
+          </b-nav-text>
           <b-nav-text class="mx-2" v-if="store.followers && store.followers.last">
             <i class="fad fa-user"></i> {{ store.followers.last }}
           </b-nav-text>
-          <b-nav-text class="mx-2" v-if="store.followers && store.followers.count">
-            <i class="fas fa-users"></i> {{ store.followers.count }} / {{ nextFollowers }}
+
+          <!-- Subs -->
+          <b-nav-text class="mx-2" v-if="store.subs && store.subs.count">
+            <i class="fas fa-users-crown"></i> {{ store.subs.count }} / {{ nextSubs }}
           </b-nav-text>
           <b-nav-text class="mx-2" v-if="store.subs && store.subs.last">
             <i class="fad fa-user-crown"></i> {{ store.subs.last }} <span v-if="store.subs.lastDuration > 1">(x{{ store.subs.lastDuration }})<span>
           </b-nav-text>
-          <b-nav-text class="mx-2" v-if="store.subs && store.subs.count">
-            <i class="fas fa-users-crown"></i> {{ store.subs.count }} / {{ nextSubs }}
-          </b-nav-text>
+
+          <!-- Donations -->
           <b-nav-text class="mx-2" v-if="store.donation && store.donation.last_donator">
             <i class="fas fa-donate"></i> {{ store.donation.last_donator }}: {{ store.donation.last_amount.toFixed(2) }} &euro;
           </b-nav-text>
@@ -44,9 +52,12 @@
 
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
+          <!-- Icons -->
           <b-nav-text>
             <i :class="[ icon.class, 'ml-2' ].join(' ')" v-for="icon in icons" :key="icon.class"></i>&ZeroWidthSpace;
           </b-nav-text>
+
+          <!-- Clock -->
           <b-nav-text class="ml-2 clock text-center">{{ clock }}</b-nav-text>
         </b-navbar-nav>
       </b-navbar>