Flexbox + show referral

2021-02-07 19:56:53 +00:00 · 2021-02-07 19:56:53 +00:00 · d8c8bb5081
commit d8c8bb5081
parent bdea08d078
10 changed files with 214 additions and 142 deletions
--- a/app/http/endpoints/root/index.go
+++ b/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),
-		"baseurl": config.Conf.Server.BaseUrl,
-		"avatar":  store.Get("avatar").(string),
+		"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,
 	})
 }
--- a/app/http/endpoints/root/whitelabel.go
+++ b/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,
 	})
 }
--- a/config/config.go
+++ b/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"),
+		},
 	}
 }
--- a/envvars.md
+++ b/envvars.md
@ -21,4 +21,6 @@
 - REDIS_PORT
 - REDIS_PASSWORD
 - REDIS_THREADS
- CACHE_URI
+- CACHE_URI
+- REFERRAL_SHOW
+- REFERRAL_LINK
--- a/public/static/css/style.css
+++ b/public/static/css/style.css
@ -26,16 +26,55 @@ html > ::-webkit-scrollbar {
    display: none;
 }

-.sidebar {
-    display: inline-flex;
+.csidebar {
+    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;
 }
--- a/public/static/img/referral.png
+++ b/public/static/img/referral.png
--- a/public/static/img/sidebar-2.jpg
+++ b/public/static/img/sidebar-2.jpg
--- a/public/templates/includes/sidebar.tmpl
+++ b/public/templates/includes/sidebar.tmpl
@ -1,33 +1,40 @@
 {{define "sidebar"}}
-  <div class="sidebar" id="sidebar-gradient">
-    <div class="sidebar-wrapper">
-      <ul class="nav">
-        <li class="nav-item sidebar-bottom">
-          <a href="/">
-            <i class="fas fa-server"></i>
-            <p>Servers</p>
-          </a>
-        </li>
-        <li class="nav-item sidebar-bottom" style="top: 60px">
-          <a href="/whitelabel">
-            <i class="fas fa-robot"></i>
-            <p>Whitelabel</p>
-          </a>
-        </li>
+  <div class="csidebar" id="sidebar-gradient">
+    <div class="sidebar-container" id="sidebar-nav">
+      <div class="sidebar-element">
+        <a href="/">
+          <i class="fas fa-server"></i>
+          <span class="sidebar-text">Servers</span>
+        </a>
+      </div>
+      <div class="sidebar-element">
+        <a href="/whitelabel">
+          <i class="fas fa-robot"></i>
+          <span class="sidebar-text">Whitelabel</span>
+        </a>
+      </div>

-        <li class="nav-item sidebar-bottom" style="bottom: 60px">
-          <a href="/logout" onclick="clearLocalStorage();">
-            <i class="fas fa-sign-out-alt"></i>
-            <p>Logout</p>
+      {{if .referralShow}}
+        <div class="sidebar-element">
+          <a href="{{.referralLink}}" style="justify-content: center; padding: 10px 0 10px 0 !important; margin: 0 !important;">
+            <img src="/assets/img/referral.png" alt="Referral" id="referral-image" />
          </a>
-        </li>
-        <li class="nav-item sidebar-bottom" style="bottom: 10px">
-          <a href="#">
-            <i id="avatar-sidebar"></i>
-            <p>{{.name}}</p>
-          </a>
-        </li>
-      </ul>
+        </div>
+      {{end}}
+    </div>
+    <div class="sidebar-container" style="margin-bottom: 2%">
+      <div class="sidebar-element">
+        <a href="/logout" onclick="clearLocalStorage();">
+          <i class="sidebar-icon fas fa-sign-out-alt"></i>
+          <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}}
--- a/public/templates/layouts/main.tmpl
+++ b/public/templates/layouts/main.tmpl
@ -6,12 +6,13 @@
  <body>
    <div class="wrapper">
      {{template "sidebar" .}}
-      {{template "sidebar" .}}
-      <div class="main-panel">
+      <div class="super-container">
        {{template "loadingscreen" .}}
        <script src="/assets/js/modalbackdrop.js"></script>
        {{template "notifymodal" .}}
-        {{template "content" .}}
+        <div class="content-container">
+          {{template "content" .}}
+        </div>
      </div>
    </div>
  </body>
--- a/public/templates/views/index.tmpl
+++ b/public/templates/views/index.tmpl
@ -1,28 +1,22 @@
 {{define "content"}}
  <div class="content">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col-md-12">
-          <div class="card">
-            <div class="card-header">
-              <h4 class="card-title">Servers</h4>
+    <div class="card">
+      <div class="card-header">
+        <h4 class="card-title">Servers</h4>
+      </div>
+      <div class="card-body" id="card">
+        <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 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>

-                <div class="flex-container" id="refresh-container">
-                  <button class="btn btn-primary btn-fill" onclick="refreshGuilds()">
-                    <i class="fas fa-sync"></i> Refresh list
-                  </button>
-                </div>
-              </div>
-            </div>
+          <div class="flex-container" id="refresh-container">
+            <button class="btn btn-primary btn-fill" onclick="refreshGuilds()">
+              <i class="fas fa-sync"></i> Refresh list
+            </button>
          </div>
        </div>
      </div>
@ -30,97 +24,97 @@
  </div>

  <script>
-    async function getPermissionLevel(guildId) {
-      const res = await axios.get('/user/permissionlevel?guilds=' + guildId);
-      if (res.status !== 200 || !res.data.success) {
-        showToast('Error', res.data.error);
-        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`;
+      async function getPermissionLevel(guildId) {
+          const res = await axios.get('/user/permissionlevel?guilds=' + guildId);
+          if (res.status !== 200 || !res.data.success) {
+              showToast('Error', res.data.error);
+              return;
          }

-          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]);
+          return res.data.levels;
      }
-    }

-    async function refreshGuilds() {
-      await withLoadingScreen(async () => {
-        const res = await axios.post('/user/guilds/reload');
-        if (res.status !== 200) {
-          notifyError(res.data.error);
-          return;
-        }
+      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`;
+          }
+      }

-        if (!res.data.success && res.data['reauthenticate_required'] === true) {
-          window.location.href = "/login";
-          return;
-        }
+      function invite() {
+          window.location.href = 'https:\/\/invite.ticketsbot.net';
+      }

-        const inviteContainer = document.getElementById('invite-container');
-        document.getElementById('guild-container').innerHTML = ``;
-        document.getElementById('guild-container').appendChild(inviteContainer);
+      async function loadData() {
+          const res = await axios.get('/user/guilds');

-        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}}