Main mod page

static/css/mod.css

@@ -93,11 +93,12 @@
 .mod-bar {
     display: flex;
     flex-direction: row;
+    border-bottom: 1px solid darkgrey;
 }
 
 .mod-bar a {
     margin: 5px 10px 0 0;
-    padding: 5px;
+    padding: 5px 10px;
     color: gray;
     background-color: #fefefe;
     border-radius: 5px 5px 0 0;
@@ -108,12 +109,21 @@
 }
 
 .mod-bar-active {
-    border: 2px solid #0b75d8 !important;
     color: #0b75d8 !important;
+    font-weight: bold;
     background-color: white !important;
 }
 
+.mod-hide {
+    display: none;
+}
+
+.mod-show {
+    display: block;
+}
+
 .mod-description {
+    margin-top: 10px;
     width: 100%;
     background-color: white;
     border-radius: 0 5px 5px 5px;
@@ -244,3 +254,21 @@
     background-color: darkgrey;
     margin: 0 auto;
 }
+
+.download {
+    color: white;
+    padding: 10px 5px;
+    margin-bottom: 5px;
+    width: 200px;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+}
+
+.download-primary {
+    background-color: #0b75d8;
+}
+
+.download-normal {
+    background-color: #949494;
+}

static/js/mod.js

@@ -5,4 +5,12 @@ function toggleSection(element) {
     currentlySelected.classList.remove("mod-bar-active");
     currentlySelected = element;
     currentlySelected.classList.add("mod-bar-active");
+
+    currentlySelectedDiv.classList.remove("mod-show");
+    currentlySelectedDiv.classList.add("mod-hide");
+
+    currentlySelectedDiv = document.getElementById(element.id.replace("-bar", ""));
+
+    currentlySelectedDiv.classList.remove("mod-hide");
+    currentlySelectedDiv.classList.add("mod-show");
 }

templates/mod-page.hbs

@@ -101,19 +101,14 @@
             </div>
             <div class="sidebar-line"></div>
 
-            <div class="member-info sidebar-entry">
+            <div class="sidebar-entry">
                 <div class="sidebar-info">
-                    <img src="/static/images/icon/contributor.svg" class="sidebar-img" alt="Donate">
-                    <h3>Contributors</h3>
+                    <img src="/static/images/icon/curated.svg" class="sidebar-img" alt="Curated">
+                    <h3>Downloads</h3>
                 </div>
 
-                <div class="contributor-card rounded-border gray-border">
-                    <img src="/static/images/icon/cursed.png" alt="">
-                    <div class="contributor-card-text">
-                        <a href="">Username</a>
-                        <small>Role</small>
-                    </div>
-                </div>
+                <a class="download-primary download">v2.1.14 for Minecraft 1.15.2</a>
+                <a class="download-normal download">v2.0.8 for Minecraft 1.14.4</a>
             </div>
             <div class="sidebar-line"></div>
 
@@ -131,6 +126,22 @@
             </div>
             <div class="sidebar-line"></div>
 
+            <div class="member-info sidebar-entry">
+                <div class="sidebar-info">
+                    <img src="/static/images/icon/contributor.svg" class="sidebar-img" alt="Donate">
+                    <h3>Contributors</h3>
+                </div>
+
+                <div class="contributor-card rounded-border gray-border">
+                    <img src="/static/images/icon/cursed.png" alt="">
+                    <div class="contributor-card-text">
+                        <a href="">Username</a>
+                        <small>Role</small>
+                    </div>
+                </div>
+            </div>
+            <div class="sidebar-line"></div>
+
             <div class="donation-info sidebar-entry">
                 <div class="sidebar-info">
                     <img src="/static/images/icon/donate.svg" class="sidebar-img" alt="Donate">