Update style on the gallery page.

views/main/index.css

@@ -102,17 +102,24 @@ body{
     display: flex;
     flex-direction: column;
     align-items: center;
+    height: 100vh;
+    overflow-y: auto;
 }
 
+    #gallery h2{
+        margin-top: 25px;
+    }
+
     #galleryTags{
-        margin: 50px 0 25px 0;
         display: flex;
         justify-content: center;
-        width: 90%;
-        overflow-x: auto;
+        flex-wrap: wrap;
+        margin-bottom: 25px;
+        width: 80vw;
+
     }
 
-        #galleryTags button{
+        .tag{
             display: flex;
             justify-content: center;
             align-items: center;
@@ -128,9 +135,10 @@ body{
             cursor: pointer;
         }
 
-            #galleryTags button:hover{
+            .tag:hover{
                 box-shadow: 0 0 5px black;
             }
 
-
-
+    #galleryContainer{
+        display: flex;
+    }

views/main/index.html

@@ -159,6 +159,8 @@
             </div>
 
             <div id="gallery" style="display:none">
+                <h2>Tags</h2>
+
                 <div id="galleryTags"></div>
 
                 <div id="galleryContainer"></div>
@@ -299,6 +301,12 @@
 
                         populateGallery(response);
 
+                        let tag = document.createElement("button");
+                        tag.innerText = "All";
+                        tag.classList.add("tag");
+                        tag.onclick = ()=>{populateGallery(response)};
+                        tagContainer.appendChild(tag);
+
                         for(let i = 0; i < response.length; i++){
                             for(let j = 0; j < response[i].tags.length; j++){
                                 if(tags.includes(response[i].tags[j].toLowerCase()) === true) continue;
@@ -313,9 +321,7 @@
                             }
                         }
                     })
-                    .catch((err)=>{
-                        console.log(err);
-                    });
+                    .catch((err)=>{});
 
                 //Get "learn" content
                 fetch("/learn/courses/json")