Refreshed footer

frontend/dist/assets/social/facebook.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="-183 277 245 240" style="enable-background:new -183 277 245 240;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#4A4A4A;}
-</style>
-<path id="f" class="st0" d="M-48.5,474.3v-70.6h23.7l3.5-27.5h-27.2v-17.6c0-8,2.2-13.4,13.6-13.4l14.6,0v-24.6
-	c-2.5-0.3-11.2-1.1-21.2-1.1c-21,0-35.4,12.8-35.4,36.4v20.3h-23.7v27.5h23.7v70.6H-48.5z"/>
-</svg>

frontend/dist/assets/social/github.svg

@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="-183 277 245 240" style="enable-background:new -183 277 245 240;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;}
-	.st1{fill:#4A4A4A;}
-</style>
-<g>
-	<title>background</title>
-	<rect id="canvas_background" x="-184" y="276" class="st0" width="582" height="402"/>
-</g>
-<g>
-	<title>Layer 1</title>
-	<g id="svg_86">
-		<g id="svg_66" transform="matrix(1.1862952709197998,0,0,1.1862952709197998,27.944357648753794,19.726211432238415) ">
-			<title  fill="#4a4a4a">Layer 1</title>
-			<g id="svg_81" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
-				<path id="svg_82" class="st1" d="M-55.3,376.9c-33.3,0-60.4-27-60.4-60.4c0-26.7,17.3-49.3,41.3-57.3c3-0.6,4.1,1.3,4.1,2.9
-					c0,1.4-0.1,6.2-0.1,11.2c-16.8-3.7-20.3,7.1-20.3,7.1c-2.7,7-6.7,8.8-6.7,8.8c-5.5,3.7,0.4,3.7,0.4,3.7c6.1-0.4,9.3-6.2,9.3-6.2
-					c5.4-9.2,14.1-6.6,17.6-5c0.5,3.9,2.1,6.6,3.8,8.1c-13.4,1.5-27.5,6.7-27.5,29.8c0,6.6,2.4,12,6.2,16.2c-0.6,1.5-2.7,7.7,0.6,16
-					c0,0,5.1,1.6,16.6-6.2c4.8,1.3,10,2,15.1,2c5.1,0,10.3-0.7,15.1-2c11.5,7.8,16.6,6.2,16.6,6.2c3.3-8.3,1.2-14.5,0.6-16
-					c3.9-4.2,6.2-9.6,6.2-16.2c0-23.2-14.1-28.3-27.6-29.8c2.2-1.9,4.1-5.5,4.1-11.2c0-8.1-0.1-14.6-0.1-16.6c0-1.6,1.1-3.5,4.1-2.9
-					c24,8,41.3,30.6,41.3,57.3C5.1,349.8-22,376.9-55.3,376.9"/>
-			</g>
-			<g id="svg_79" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
-				<path id="svg_80" class="st1" d="M-92.8,290.2c-0.1-0.3-0.6-0.4-1-0.2c-0.4,0.2-0.7,0.6-0.5,0.9c0.1,0.3,0.6,0.4,1,0.2
-					C-92.9,290.9-92.7,290.5-92.8,290.2"/>
-			</g>
-			<g id="svg_77" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
-				<path id="svg_78" class="st1" d="M-90.4,287.4c-0.3-0.3-0.9-0.1-1.2,0.3c-0.4,0.4-0.5,1-0.2,1.3c0.3,0.3,0.8,0.1,1.2-0.3
-					C-90.2,288.3-90.1,287.7-90.4,287.4"/>
-			</g>
-			<g id="svg_75" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
-				<path id="svg_76" class="st1" d="M-88,284c-0.4-0.3-1,0-1.3,0.5c-0.4,0.5-0.4,1.2,0,1.4c0.4,0.3,1,0,1.4-0.5
-					C-87.6,284.9-87.6,284.2-88,284"/>
-			</g>
-			<g id="svg_73" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
-				<path id="svg_74" class="st1" d="M-84.7,280.6c-0.3-0.4-1-0.3-1.6,0.2c-0.5,0.5-0.7,1.2-0.3,1.5c0.3,0.4,1,0.3,1.6-0.2
-					C-84.5,281.6-84.4,281-84.7,280.6"/>
-			</g>
-			<g id="svg_71" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
-				<path id="svg_72" class="st1" d="M-80.2,278.6c-0.1-0.5-0.8-0.7-1.5-0.5c-0.7,0.2-1.1,0.8-1,1.2c0.1,0.5,0.8,0.7,1.5,0.5
-					C-80.5,279.7-80.1,279.1-80.2,278.6"/>
-			</g>
-			<g id="svg_69" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
-				<path id="svg_70" class="st1" d="M-75.3,278.3c0-0.5-0.6-0.9-1.3-0.9c-0.7,0-1.3,0.4-1.3,0.9c0,0.5,0.6,0.9,1.3,0.9
-					C-75.9,279.2-75.3,278.8-75.3,278.3"/>
-			</g>
-			<g id="svg_67" transform="matrix(1.3333333,0,0,-1.3333333,0,735.98133) ">
-				<path id="svg_68" class="st1" d="M-70.7,279.1c0.1-0.5-0.4-1-1.1-1.1c-0.7-0.1-1.3,0.2-1.4,0.7c-0.1,0.5,0.4,1,1.1,1.1
-					C-71.4,279.8-70.8,279.6-70.7,279.1"/>
-			</g>
-		</g>
-	</g>
-	<g id="svg_22">
-	</g>
-</g>
-</svg>

frontend/dist/assets/social/twitter.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="-183 277 245 240" style="enable-background:new -183 277 245 240;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;}
-	.st1{fill:#4A4A4A;}
-</style>
-<g>
-	<title>background</title>
-	<rect id="canvas_background" x="-184" y="276" class="st0" width="582" height="402"/>
-</g>
-<path class="st1" d="M-93.8,469.9c67.7,0,104.8-56.1,104.8-104.8c0-1.6,0-3.2-0.1-4.8c7.2-5.2,13.4-11.7,18.4-19.1
-	c-6.7,3-13.8,4.9-21.1,5.8c7.7-4.6,13.4-11.8,16.2-20.4c-7.2,4.3-15.1,7.3-23.4,8.9c-13.9-14.8-37.3-15.5-52.1-1.6
-	c-9.6,9-13.6,22.4-10.7,35.2c-29.6-1.5-57.2-15.5-75.9-38.5c-9.8,16.8-4.8,38.3,11.4,49.1c-5.9-0.2-11.6-1.8-16.7-4.6
-	c0,0.2,0,0.3,0,0.5c0,17.5,12.4,32.6,29.5,36.1c-5.4,1.5-11.1,1.7-16.6,0.6c4.8,15,18.6,25.3,34.4,25.6
-	c-13,10.2-29.1,15.8-45.7,15.8c-2.9,0-5.9-0.2-8.8-0.5C-133.4,464.2-113.8,469.9-93.8,469.9"/>
-</svg>

frontend/src/components/layout/MainFooter.vue

@@ -2,39 +2,8 @@
 	<footer class="footer">
 		<div class="container">
 			<div class="footer-content has-text-centered">
-				<div id="footer-social-icons">
-					<a
-						class="icon"
-						:href="`${this.socialLinks.github}`"
-						target="_blank"
-						title="GitHub Repository"
-					>
-						<img src="/assets/social/github.svg" />
-					</a>
-					<a
-						class="icon"
-						:href="`${this.socialLinks.twitter}`"
-						target="_blank"
-						title="Twitter Account"
-					>
-						<img src="/assets/social/twitter.svg" />
-					</a>
-					<a
-						class="icon"
-						:href="`${this.socialLinks.facebook}`"
-						target="_blank"
-						title="Facebook Page"
-					>
-						<img src="/assets/social/facebook.svg" />
-					</a>
-					<a
-						class="icon"
-						:href="`${this.socialLinks.discord}`"
-						target="_blank"
-						title="Discord Server"
-					>
-						<img src="/assets/social/discord.svg" />
-					</a>
+				<div id="footer-copyright">
+					<p>© Copyright Musare 2015 - 2021</p>
 				</div>
 				<a href="/"
 					><img
@@ -43,6 +12,13 @@
 						alt="Musare"
 				/></a>
 				<div id="footer-links">
+					<a
+						:href="`${this.socialLinks.github}`"
+						target="_blank"
+						title="GitHub Repository"
+					>
+						GitHub
+					</a>
 					<router-link title="About Musare" to="/about"
 						>About</router-link
 					>
@@ -51,7 +27,6 @@
 					>
 					<router-link title="News" to="/news">News</router-link>
 				</div>
-				<p>© Copyright Musare 2015 - 2021</p>
 			</div>
 		</div>
 	</footer>
@@ -86,10 +61,6 @@ export default {
 	footer.footer .container .footer-content {
 		background-color: $night-mode-bg-secondary;
 	}
-
-	footer.footer #footer-social-icons img {
-		filter: invert(1);
-	}
 }
 
 .footer-content a:not(.button) {
@@ -99,16 +70,19 @@ export default {
 .footer-content {
 	display: flex;
 	align-items: center;
-	flex-direction: column;
+	flex-direction: column-reverse;
+	& > * {
+		margin: 5px 0;
+	}
 }
 
 .footer {
 	flex-shrink: 0;
-	height: 240px;
-	padding: 40px 20px 40px;
+	height: auto;
+	padding: 20px;
 	border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;
-	box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.65),
-		0 6px 20px 0 rgba(3, 169, 244, 0.4);
+	box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.4),
+		0 6px 20px 0 rgba(3, 169, 244, 0.2);
 	background-color: $white;
 	width: 100%;
 
@@ -116,21 +90,9 @@ export default {
 		display: block;
 		margin-left: auto;
 		margin-right: auto;
-		margin-bottom: 15px;
 		width: 200px;
 	}
 
-	#footer-social-icons {
-		user-select: none;
-		-webkit-user-select: none;
-
-		.icon {
-			height: 28px;
-			line-height: 28px;
-			width: 28px;
-		}
-	}
-
 	#footer-links {
 		:not(:last-child) {
 			border-right: solid 1px $primary-color;
@@ -159,18 +121,18 @@ export default {
 
 @media only screen and (min-width: 992px) {
 	.footer {
-		height: 180px;
-
-		#footer-social-icons {
+		#footer-copyright {
 			left: 0;
-			top: 35px;
+			top: 20px;
 			position: absolute;
+			line-height: 25px;
 		}
 
 		#footer-links {
 			right: 0;
-			top: 35px;
+			top: 20px;
 			position: absolute;
+			line-height: 25px;
 		}
 	}
 }

frontend/src/pages/Home/index.vue

@@ -294,7 +294,8 @@ export default {
 						this.isPlaying(b) - this.isPlaying(a) ||
 						a.paused - b.paused ||
 						privacyOrder.indexOf(a.privacy) -
-							privacyOrder.indexOf(b.privacy)
+							privacyOrder.indexOf(b.privacy) ||
+						b.userCount - a.userCount
 				);
 		},
 		isOwner(station) {

frontend/src/pages/Station/index.vue

@@ -430,6 +430,8 @@ export default {
 		})
 	},
 	mounted() {
+		window.scrollTo(0, 0);
+
 		Date.currently = () => {
 			return new Date().getTime() + this.systemDifference;
 		};