Flexbox + show referral

app/http/endpoints/root/index.go

@@ -18,8 +18,10 @@ func IndexHandler(ctx *gin.Context) {
 	}
 
 	ctx.HTML(200, "main/index", gin.H{
-		"name":    store.Get("name").(string),
+		"name":         store.Get("name").(string),
-		"baseurl": config.Conf.Server.BaseUrl,
+		"baseurl":      config.Conf.Server.BaseUrl,
-		"avatar":  store.Get("avatar").(string),
+		"avatar":       store.Get("avatar").(string),
+		"referralShow": config.Conf.Referral.Show,
+		"referralLink": config.Conf.Referral.Link,
 	})
 }

app/http/endpoints/root/whitelabel.go

@@ -38,5 +38,7 @@ func WhitelabelHandler(ctx *gin.Context) {
 		"name":    store.Get("name").(string),
 		"baseurl": config.Conf.Server.BaseUrl,
 		"avatar":  store.Get("avatar").(string),
+		"referralShow": config.Conf.Referral.Show,
+		"referralLink": config.Conf.Referral.Link,
 	})
 }

config/config.go

@@ -18,6 +18,7 @@ type (
 		Bot             Bot
 		Redis           Redis
 		Cache           Cache
+		Referral        Referral
 	}
 
 	Server struct {
@@ -68,6 +69,11 @@ type (
 	Cache struct {
 		Uri string
 	}
+
+	Referral struct {
+		Show bool
+		Link string
+	}
 )
 
 var (
@@ -113,6 +119,7 @@ func fromEnvvar() {
 	oauthId, _ := strconv.ParseUint(os.Getenv("OAUTH_ID"), 10, 64)
 	redisPort, _ := strconv.Atoi(os.Getenv("REDIS_PORT"))
 	redisThreads, _ := strconv.Atoi(os.Getenv("REDIS_THREADS"))
+	showReferral, _ := strconv.ParseBool(os.Getenv("REFERRAL_SHOW"))
 
 	Conf = Config{
 		Admins:          admins,
@@ -156,5 +163,9 @@ func fromEnvvar() {
 		Cache: Cache{
 			Uri: os.Getenv("CACHE_URI"),
 		},
+		Referral: Referral{
+			Show: showReferral,
+			Link: os.Getenv("REFERRAL_LINK"),
+		},
 	}
 }

envvars.md

@@ -21,4 +21,6 @@
 - REDIS_PORT
 - REDIS_PASSWORD
 - REDIS_THREADS
-- CACHE_URI
+- CACHE_URI
+- REFERRAL_SHOW
+- REFERRAL_LINK

public/static/css/style.css

@@ -26,16 +26,55 @@ html > ::-webkit-scrollbar {
     display: none;
 }
 
-.sidebar {
+.csidebar {
-    display: inline-flex;
+    display: flex;
+    flex-direction: column;
     height: 100%;
     width: 16.6%;
-    background-color: #4C566A;
+    background-color: #272727;
     float: left;
     background-size: cover;
     overflow-x: hidden !important;
 }
 
+.sidebar-element {
+    display: flex;
+    align-items: center;
+    flex-basis: 100%;
+    width: 100%;
+    cursor: pointer;
+    padding: 5px 0 5px 0;
+}
+
+.sidebar-element:hover {
+    background-color: #121212;
+    transition: background-color 0.5s ease;
+}
+
+#referral-image {
+    max-height: 70px;
+    max-width: 90%;
+}
+
+.sidebar-element > a {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    color: white !important;
+    font-size: 18px;
+    margin-left: 2%;
+}
+
+.sidebar-text {
+    margin-left: 4%;
+    display: flex;
+    align-items: center;
+}
+
+#sidebar-nav {
+    flex: 1;
+}
+
 .sidebar-bottom {
     position: absolute !important;
     width: 100%;
@@ -45,6 +84,20 @@ html > ::-webkit-scrollbar {
     color: white !important;
 }
 
+.super-container {
+    display: flex;
+}
+
+.content {
+    width: 100%;
+}
+
+.content-container {
+    display: flex;
+    width: 100%;
+    margin: 4%;
+}
+
 .filterCard {
     cursor: pointer;
 }

public/templates/includes/sidebar.tmpl

@@ -1,33 +1,40 @@
 {{define "sidebar"}}
-  <div class="sidebar" id="sidebar-gradient">
+  <div class="csidebar" id="sidebar-gradient">
-    <div class="sidebar-wrapper">
+    <div class="sidebar-container" id="sidebar-nav">
-      <ul class="nav">
+      <div class="sidebar-element">
-        <li class="nav-item sidebar-bottom">
+        <a href="/">
-          <a href="/">
+          <i class="fas fa-server"></i>
-            <i class="fas fa-server"></i>
+          <span class="sidebar-text">Servers</span>
-            <p>Servers</p>
+        </a>
-          </a>
+      </div>
-        </li>
+      <div class="sidebar-element">
-        <li class="nav-item sidebar-bottom" style="top: 60px">
+        <a href="/whitelabel">
-          <a href="/whitelabel">
+          <i class="fas fa-robot"></i>
-            <i class="fas fa-robot"></i>
+          <span class="sidebar-text">Whitelabel</span>
-            <p>Whitelabel</p>
+        </a>
-          </a>
+      </div>
-        </li>
 
-        <li class="nav-item sidebar-bottom" style="bottom: 60px">
+      {{if .referralShow}}
-          <a href="/logout" onclick="clearLocalStorage();">
+        <div class="sidebar-element">
-            <i class="fas fa-sign-out-alt"></i>
+          <a href="{{.referralLink}}" style="justify-content: center; padding: 10px 0 10px 0 !important; margin: 0 !important;">
-            <p>Logout</p>
+            <img src="/assets/img/referral.png" alt="Referral" id="referral-image" />
           </a>
-        </li>
+        </div>
-        <li class="nav-item sidebar-bottom" style="bottom: 10px">
+      {{end}}
-          <a href="#">
+    </div>
-            <i id="avatar-sidebar"></i>
+    <div class="sidebar-container" style="margin-bottom: 2%">
-            <p>{{.name}}</p>
+      <div class="sidebar-element">
-          </a>
+        <a href="/logout" onclick="clearLocalStorage();">
-        </li>
+          <i class="sidebar-icon fas fa-sign-out-alt"></i>
-      </ul>
+          <span class="sidebar-text">Logout</span>
+        </a>
+      </div>
+      <div class="sidebar-element">
+        <a>
+          <i id="avatar-sidebar"></i>
+          <span class="sidebar-text">{{.name}}</span>
+        </a>
+      </div>
     </div>
   </div>
 {{end}}

public/templates/layouts/main.tmpl

@@ -6,12 +6,13 @@
   <body>
     <div class="wrapper">
       {{template "sidebar" .}}
-      {{template "sidebar" .}}
+      <div class="super-container">
-      <div class="main-panel">
         {{template "loadingscreen" .}}
         <script src="/assets/js/modalbackdrop.js"></script>
         {{template "notifymodal" .}}
-        {{template "content" .}}
+        <div class="content-container">
+          {{template "content" .}}
+        </div>
       </div>
     </div>
   </body>

public/templates/views/index.tmpl

@@ -1,28 +1,22 @@
 {{define "content"}}
   <div class="content">
-    <div class="container-fluid">
+    <div class="card">
-      <div class="row">
+      <div class="card-header">
-        <div class="col-md-12">
+        <h4 class="card-title">Servers</h4>
-          <div class="card">
+      </div>
-            <div class="card-header">
+      <div class="card-body" id="card">
-              <h4 class="card-title">Servers</h4>
+        <div class="card-body table-responsive">
+          <div class="flex-container" id="guild-container">
+            <div class="guild" onclick="invite();" id="invite-container">
+              <i class="fas fa-plus fa-2x guild-icon-fa"></i>
+              <span class="guild-name">Invite to your server</span>
             </div>
-            <div class="card-body" id="card">
+          </div>
-              <div class="card-body table-responsive">
-                <div class="flex-container" id="guild-container">
-                  <div class="guild" onclick="invite();" id="invite-container">
-                    <i class="fas fa-plus fa-2x guild-icon-fa"></i>
-                    <span class="guild-name">Invite to your server</span>
-                  </div>
-                </div>
 
-                <div class="flex-container" id="refresh-container">
+          <div class="flex-container" id="refresh-container">
-                  <button class="btn btn-primary btn-fill" onclick="refreshGuilds()">
+            <button class="btn btn-primary btn-fill" onclick="refreshGuilds()">
-                    <i class="fas fa-sync"></i> Refresh list
+              <i class="fas fa-sync"></i> Refresh list
-                  </button>
+            </button>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -30,97 +24,97 @@
   </div>
 
   <script>
-    async function getPermissionLevel(guildId) {
+      async function getPermissionLevel(guildId) {
-      const res = await axios.get('/user/permissionlevel?guilds=' + guildId);
+          const res = await axios.get('/user/permissionlevel?guilds=' + guildId);
-      if (res.status !== 200 || !res.data.success) {
+          if (res.status !== 200 || !res.data.success) {
-        showToast('Error', res.data.error);
+              showToast('Error', res.data.error);
-        return;
+              return;
-      }
-
-      return res.data.levels;
-    }
-
-    async function goto(guildId) {
-      const permissionLevels = await getPermissionLevel(guildId);
-      if (permissionLevels[guildId] === 2) {
-        window.location.href = `/manage/${guildId}/settings`;
-      } else {
-        window.location.href = `/manage/${guildId}/logs`;
-      }
-    }
-
-    function invite() {
-      window.location.href = 'https:\/\/invite.ticketsbot.net';
-    }
-
-    async function loadData() {
-      const res = await axios.get('/user/guilds');
-
-      const container = document.getElementById('guild-container');
-
-      for (guild of res.data) {
-        const guildContainer = document.createElement('div');
-        guildContainer.classList.add('guild');
-
-        if (guild.icon === undefined || guild.icon === null || guild.icon === "") {
-          const icon = document.createElement('i');
-          icon.classList.add('fas', 'fa-question', 'guild-icon-fa');
-          guildContainer.appendChild(icon);
-        } else {
-          const icon = document.createElement('img');
-          icon.classList.add('guild-icon');
-
-          if (guild.icon.startsWith('a_')) {
-            icon.src = `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.gif?size=256`;
-          } else {
-            icon.src = `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=256`;
           }
 
-          guildContainer.appendChild(icon);
+          return res.data.levels;
-        }
-
-        const nameContainer = document.createElement('div');
-
-        const name = document.createElement('span');
-        name.classList.add('guild-name');
-        name.appendChild(document.createTextNode(guild.name));
-        nameContainer.appendChild(name);
-
-        guildContainer.appendChild(nameContainer);
-
-        const guildId = guild.id
-        guildContainer.onclick = async () => {
-          await goto(guildId)
-        };
-
-        container.insertBefore(guildContainer, container.children[container.children.length - 1]);
       }
-    }
 
-    async function refreshGuilds() {
+      async function goto(guildId) {
-      await withLoadingScreen(async () => {
+          const permissionLevels = await getPermissionLevel(guildId);
-        const res = await axios.post('/user/guilds/reload');
+          if (permissionLevels[guildId] === 2) {
-        if (res.status !== 200) {
+              window.location.href = `/manage/${guildId}/settings`;
-          notifyError(res.data.error);
+          } else {
-          return;
+              window.location.href = `/manage/${guildId}/logs`;
-        }
+          }
+      }
 
-        if (!res.data.success && res.data['reauthenticate_required'] === true) {
+      function invite() {
-          window.location.href = "/login";
+          window.location.href = 'https:\/\/invite.ticketsbot.net';
-          return;
+      }
-        }
 
-        const inviteContainer = document.getElementById('invite-container');
+      async function loadData() {
-        document.getElementById('guild-container').innerHTML = ``;
+          const res = await axios.get('/user/guilds');
-        document.getElementById('guild-container').appendChild(inviteContainer);
 
-        await loadData();
+          const container = document.getElementById('guild-container');
+
+          for (guild of res.data) {
+              const guildContainer = document.createElement('div');
+              guildContainer.classList.add('guild');
+
+              if (guild.icon === undefined || guild.icon === null || guild.icon === "") {
+                  const icon = document.createElement('i');
+                  icon.classList.add('fas', 'fa-question', 'guild-icon-fa');
+                  guildContainer.appendChild(icon);
+              } else {
+                  const icon = document.createElement('img');
+                  icon.classList.add('guild-icon');
+
+                  if (guild.icon.startsWith('a_')) {
+                      icon.src = `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.gif?size=256`;
+                  } else {
+                      icon.src = `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=256`;
+                  }
+
+                  guildContainer.appendChild(icon);
+              }
+
+              const nameContainer = document.createElement('div');
+
+              const name = document.createElement('span');
+              name.classList.add('guild-name');
+              name.appendChild(document.createTextNode(guild.name));
+              nameContainer.appendChild(name);
+
+              guildContainer.appendChild(nameContainer);
+
+              const guildId = guild.id
+              guildContainer.onclick = async () => {
+                  await goto(guildId)
+              };
+
+              container.insertBefore(guildContainer, container.children[container.children.length - 1]);
+          }
+      }
+
+      async function refreshGuilds() {
+          await withLoadingScreen(async () => {
+              const res = await axios.post('/user/guilds/reload');
+              if (res.status !== 200) {
+                  notifyError(res.data.error);
+                  return;
+              }
+
+              if (!res.data.success && res.data['reauthenticate_required'] === true) {
+                  window.location.href = "/login";
+                  return;
+              }
+
+              const inviteContainer = document.getElementById('invite-container');
+              document.getElementById('guild-container').innerHTML = ``;
+              document.getElementById('guild-container').appendChild(inviteContainer);
+
+              await loadData();
+          });
+      }
+
+      withLoadingScreen(async () => {
+          await setDefaultHeader(); // on first load, this isnt set yet because its run async in auth.js
+          await loadData();
       });
-    }
-
-    withLoadingScreen(async () => {
-      await setDefaultHeader(); // on first load, this isnt set yet because its run async in auth.js
-      await loadData();
-    });
   </script>
 {{end}}