Station is now responsive

frontend/components/Station/OfficialHeader.vue

@@ -168,6 +168,10 @@
     	border: 0;
 	}
 
+	.hidden {
+		display: none;
+	}
+
 	.admin-sidebar {
 		position: fixed;
 		z-index: 1;
@@ -177,6 +181,8 @@
 		height: 100vh;
 		background-color: #03a9f4;
 		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+		overflow-y: auto;
+		overflow-x: hidden;
 	}
 
 	.inner-wrapper {

frontend/components/Station/Station.vue

@@ -24,8 +24,8 @@
 			</h4>
 			<h1 v-if='type === "community" && !station.partyMode && $parent.userId === station.owner && station.privatePlaylist'>Maybe you can add some songs to your selected private playlist and then press the skip button</h1>
 		</div>
-		<div class="columns is-mobile" v-show="!noSong">
-			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
+		<div class="columns" v-show="!noSong">
+			<div class="column is-8-desktop is-offset-2-desktop is-11-mobile">
 				<div class="video-container">
 					<div id="player"></div>
 					<div class="seeker-bar-container white" id="preview-progress">
@@ -34,7 +34,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="columns is-mobile" v-show="!noSong">
+		<div class="desktop-only columns is-mobile" v-show="!noSong">
 			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
 				<div class="columns is-mobile">
 					<div class="column is-11-desktop" v-bind:class="{'is-7-desktop': !simpleSong}">
@@ -72,6 +72,37 @@
 				</div>
 			</div>
 		</div>
+		<div class="mobile-only" v-show="!noSong">
+			<div>
+				<div>
+						<div>
+							<form class="columns" action="#">
+								<p class='column is-11-mobile volume-slider-wrapper'>
+									<i class="material-icons" @click='toggleMute()' v-if='muted'>volume_mute</i>
+									<i class="material-icons" @click='toggleMute()' v-else>volume_down</i>
+									<input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
+									<i class="material-icons" @click='increaseVolume()'>volume_up</i>
+								</p>
+							</form>
+							<div>
+								<ul id="ratings" style="display: inline-block;" v-if="currentSong.likes !== -1 && currentSong.dislikes !== -1">
+									<li id="dislike" style="display: inline-block;margin-right: 10px;" @click="toggleDislike()">
+										<span class="flow-text">{{currentSong.dislikes}} </span>
+										<i id="thumbs_down" class="material-icons grey-text" v-bind:class="{ disliked: disliked }">thumb_down</i>
+										<a class='absolute-a behind' @click="toggleDislike()" href='#'></a>
+									</li>
+									<li id="like" style="display: inline-block;" @click="toggleLike()">
+										<span class="flow-text">{{currentSong.likes}} </span>
+										<i id="thumbs_up" class="material-icons grey-text" v-bind:class="{ liked: liked }">thumb_up</i>
+										<a class='absolute-a behind' @click="toggleLike()" href='#'></a>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -675,7 +706,7 @@
 		padding-top: 0.5vw;
 		transition: all 0.1s;
 		margin: 0 auto;
-		max-width: 1280px;
+		max-width: 100%;
 		width: 90%;
 
 		@media only screen and (min-width: 993px) {
@@ -686,6 +717,29 @@
 			width: 85%;
 		}
 
+		@media (min-width: 881px) {
+			.mobile-only {
+				display: none;
+			}
+			.desktop-only {
+				display: block;
+			}
+		}
+		@media (max-width: 880px) {
+			margin-left: 64px;
+			.mobile-only {
+				display: block;
+			}
+			.desktop-only {
+				display: none;
+				visibility: hidden;
+			}
+		}
+
+		.mobile-only {
+			text-align: center;
+		}
+
 		input[type=range] {
 			-webkit-appearance: none;
 			width: 100%;