General improvements

mbacalan · Dec 29, 2019 · f136e91 · f136e91
1 parent e2390fc
commit f136e91
Show file tree

Hide file tree

Showing 8 changed files with 2,765 additions and 1,194 deletions.
diff --git a/assets/style.scss b/assets/style.scss
@@ -82,24 +82,6 @@ hr {
   margin-bottom: 1rem;
 }
 
-.headerWrapper {
-  position: relative;
-  img {
-    max-width: 100%;
-    display: block;
-    margin: auto;
-    height: auto;
-
-  }
-}
-
-.header-img {
-  display: block;
-  margin: auto;
-  max-width: 100%;
-  height: auto;
-}
-
 .commands,
 .faq {
   max-width: 85%;
@@ -112,7 +94,7 @@ hr {
 
   small {
     display: block;
-    color: $tertiaryColor;;
+    color: $tertiaryColor;
   }
 
   h1 {
@@ -124,21 +106,21 @@ hr {
     font-size: 1.5em;
   }
 
-  p, li{
-    color: $tertiaryColor;
-  }
+  // p, li{
+  //   color: $tertiaryColor;
+  // }
 
   .wrapper {
-    columns: 1;
-
     .list-group {
       padding: 0;
       margin: 0;
+      display: grid;
+      grid-template-columns: 1fr;
 
       .list-group-item {
         display: block;
-        padding: 0.75rem 1.25rem;
-        margin-bottom: -1px;
+        padding: 0.75rem 0;
+        grid-column: 1;
       }
     }
   }
@@ -167,12 +149,22 @@ hr {
 
   .commands .wrapper,
   .faq .wrapper {
-    columns: 2;
-
     li {
       &:after {
         width: 350px;
       }
     }
+
+    .list-group {
+      grid-template-columns: repeat(2, 1fr);
+
+      .list-group-item {
+        grid-column: 1;
+
+        &:nth-child(2n) {
+          grid-column: 2;
+        }
+      }
+    }
   }
 }
diff --git a/components/donate.vue b/components/donate.vue
@@ -19,6 +19,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+  margin-top: 20px;
 
   .patreon {
     margin-bottom: 5px;

diff --git a/components/header.vue b/components/header.vue
@@ -1,62 +1,81 @@
 <template>
- <div class="headerWrapper">
+  <header class="header">
     <picture>
       <source media="(min-width: 2550px)" srcset="@/assets/img/gw2botbanner1.png">
       <source media="(min-width: 1024px)" srcset="@/assets/img/gw2botbanner1.png">
-      <img class="header-img" src="@/assets/img/gw2botbannerMobile1.png" alt="Banner for mobile version">
+      <img
+        class="header__img"
+        src="@/assets/img/gw2botbannerMobile1.png"
+        alt="Banner for mobile version"
+      >
     </picture>
 
     <nav>
-      <div class="nav-list">
-        <nuxt-link to="/" active-class="active" exact>
-          Home
-        </nuxt-link>
-        <nuxt-link to="/commands" active-class="active">
-          Commands
-        </nuxt-link>
-        <nuxt-link to="/faq" active-class="active">
-          F.A.Q
-        </nuxt-link>
-        <nuxt-link v-if="$auth.loggedIn" to="/logs" active-class="active">
-          Logs
-        </nuxt-link>
-        <a v-if="!$auth.loggedIn" href="#" @click="$auth.loginWith('discord')">
-          Login
-        </a>
-        <a v-if="$auth.loggedIn" href="#" @click="$auth.logout()">
-          Logout
-        </a>
-        <a href="https://discord.gg/VyQTrwP">Support</a>
-      </div>
+      <ul class="nav">
+        <li>
+          <nuxt-link to="/" class="nav__item" active-class="active" exact>
+            Home
+          </nuxt-link>
+        </li>
+
+        <li>
+          <nuxt-link to="/commands" class="nav__item" active-class="active">
+            Commands
+          </nuxt-link>
+        </li>
+
+        <li>
+          <nuxt-link to="/faq" class="nav__item" active-class="active">
+            F.A.Q
+          </nuxt-link>
+        </li>
+
+        <li>
+          <nuxt-link v-if="$auth.loggedIn" to="/logs" class="nav__item" active-class="active">
+            Logs
+          </nuxt-link>
+        </li>
+
+        <li>
+          <a v-if="!$auth.loggedIn" href="#" class="nav__item" @click="$auth.loginWith('discord')">Login</a>
+          <a v-if="$auth.loggedIn" href="#" class="nav__item" @click="$auth.logout()">Logout</a>
+          <a href="https://discord.gg/VyQTrwP" target="_blank" class="nav__item">Support</a>
+        </li>
+      </ul>
     </nav>
 
-    <p class="apicheck">
-      <span id="apistatus" title="If API is offline, the bot will not function properly">Checking API... ☐</span>
+    <p class="api-status">
+      <span
+        id="js-api-status"
+        title="If API is offline, the bot will not function properly"
+      >Checking API... ☐</span>
     </p>
-  </div>
+  </header>
 </template>
 
 <style lang="scss">
+.header {
+  position: relative;
 
-// .backgroundTitle{
-//   background-image:
-// }
+  &__img {
+    max-width: 100%;
+    display: block;
+    margin: auto;
+    height: auto;
 
-nav {
-  position: sticky;
-  top: 0;
-  z-index: 1020;
-
-  .nav-list {
-    font-size: 1.05em;
-    text-align: center;
-    margin: 0px auto;
-    padding: 1rem;
-    overflow: hidden;
-    background-color: #a61501;
   }
+}
+
+.nav {
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  font-size: 1.05em;
+  margin: 0px auto;
+  padding: 1rem;
+  background-color: #a61501;
 
-  a {
+  &__item {
     text-decoration: none;
     color: rgba(255, 255, 255, 0.7);
     text-align: center;
@@ -72,7 +91,7 @@ nav {
   }
 }
 
-.apicheck {
+.api-status {
   text-align: right;
   margin: 2px 0px;
 }

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,8 +1,7 @@
 <template>
   <div>
     <Header />
-    <nuxt />
-    <p class="pusher" />
+    <Nuxt />
     <Donate />
     <Footer />
   </div>
@@ -24,22 +23,24 @@ export default {
     Footer
   },
   mounted () {
-    const request = new XMLHttpRequest()
-    request.open('GET', 'https://api.guildwars2.com/v2/quaggans', true)
+    this.getApiStatus()
+  },
+  methods: {
+    async getApiStatus () {
+      const apiEl = document.getElementById('js-api-status')
 
-    request.onload = function () {
-      if (request.status >= 200 && request.status < 400) {
-        document.getElementById('apistatus').innerHTML = 'API is Online! ☑'
-      } else {
-        document.getElementById('apistatus').innerHTML = 'Error reaching API ☒'
-      }
-    }
+      try {
+        const quaggans = await fetch('https://api.guildwars2.com/v2/quaggans')
 
-    request.onerror = function () {
-      document.getElementById('apistatus').innerHTML = 'Error reaching API ☒'
+        if (quaggans.status >= 200 && quaggans.status < 400) {
+          apiEl.textContent = 'API is Online! ☑'
+        } else {
+          apiEl.textContent = 'Error reaching API ☒'
+        }
+      } catch {
+        apiEl.textContent = 'Error reaching API ☒'
+      }
     }
-
-    request.send()
   }
 }
 </script>