Adds Discord links

JudahGabriel · Aug 26, 2023 · 22bed45 · 22bed45
1 parent ae70b91
commit 22bed45
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 3 deletions.
diff --git a/Chavah.NetCore/wwwroot/css/app/footer.less b/Chavah.NetCore/wwwroot/css/app/footer.less
@@ -177,4 +177,33 @@
             .thumb();
         }
     }
+
+    .discord-chat {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        bottom: 100px;
+        right: 20px;
+        background-color: @brand-background;
+        border-radius: 50px;
+        box-shadow: 0 0 5px 1px gray;
+        transition: all ease-in-out .5s;
+        opacity: 0.5;
+
+        img {
+            filter: invert(0.9);
+            margin-top: 5px;
+        }
+    }
+
+    @media (max-width: 575px) {
+        .discord-chat {
+            display: none;
+        }
+    }
+
+    .discord-chat:hover {
+        opacity: 1;
+        transform: rotateZ(360deg);
+    }
 }
diff --git a/Chavah.NetCore/wwwroot/css/app/header.less b/Chavah.NetCore/wwwroot/css/app/header.less
@@ -218,4 +218,13 @@ header {
             color: @text-color-light !important;
         }
     }
+    /* Unlike the other menu icons, discord icon is an image (SVG). The icon is black. Tone it down a bit to fit in with the others. */
+    img.discord-chat {
+        opacity: 0.4;
+    }
+    /* On hover of the menu item, turn the discord icon white. */
+    li:hover img.discord-chat {
+        opacity: 1;
+        filter: invert(1);
+    }
 }
diff --git a/Chavah.NetCore/wwwroot/images/discord.svg b/Chavah.NetCore/wwwroot/images/discord.svg
diff --git a/Chavah.NetCore/wwwroot/views/partials/Footer.html b/Chavah.NetCore/wwwroot/views/partials/Footer.html
@@ -27,7 +27,7 @@
         </button>
         <div class="pull-right volume-and-track-time">
             <span class="track-time-container">
-                <span class="track-time"></span> 
+                <span class="track-time"></span>
                 |
                 <span class="track-duration"></span>
             </span>
@@ -36,8 +36,12 @@
             </button>
             <input class="volume-slider" type="range" min="0" step="0.1" max="1" ng-show="vm.volumeShown" ng-model="vm.volume" />
         </div>
-        
+
     </div>
+
+    <a class="discord-chat" href="https://discord.com/channels/1106734875031109733/1106734876218101762" target="_blank" uib-tooltip="Chat with other Chavah listeners" tooltip-placement="left">
+        <img src="/images/discord.svg" width="35" height="35" loading="lazy" />
+    </a>
 </section>
 
 <audio id="audio"></audio>
diff --git a/Chavah.NetCore/wwwroot/views/partials/Header.html b/Chavah.NetCore/wwwroot/views/partials/Header.html
@@ -99,10 +99,16 @@ <h3 ng-hide="vm.currentUserName">
                                     Alert me of new music
                                 </a>
                             </li>
+                            <li>
+                                <a href="https://discord.com/channels/1106734875031109733/1106734876218101762" target="_blank" rel="noopener">
+                                    <img class="discord-chat" src="/images/discord.svg" width="20" height="15" loading="lazy" />
+                                    Chat with us on Discord
+                                </a>
+                            </li>
                             <li>
                                 <a href="#/support">
                                     <i class="fa fa-envelope-o fa-fw"></i>
-                                    Contact
+                                    Contact us
                                 </a>
                             </li>
                             <li>