mobile improvements

src/components/Player/Bar.vue

@@ -4,8 +4,8 @@
 		<ProgressBar v-if="player.loaded" />
 		<div v-if="player.loaded" class="player">
 			<img :src="player.episode.episodeImage">
-			<Infos />
+			<Infos class="infos" />
-			<Controls />
+			<Controls class="controls" />
 			<Timer class="timer" />
 			<Volume class="volume" />
 		</div>
@@ -63,4 +63,14 @@ export default {
 	.volume {
 		width: 10%;
 	}
+
+	@media only screen and (max-width: 768px) {
+		.infos {
+			flex: 2;
+		}
+
+		.timer, .volume {
+			display: none;
+		}
+	}
 </style>

src/components/Player/Controls.vue

@@ -1,14 +1,14 @@
 <template>
 	<div class="controls">
 		<PauseButton v-if="!player.paused"
-			class="pointer"
+			class="pointer pause"
 			:size="50"
 			@click="$store.dispatch('player/pause')" />
 		<PlayButton v-if="player.paused"
-			class="pointer"
+			class="pointer play"
 			:size="50"
 			@click="$store.dispatch('player/play')" />
-		<StopButton class="pointer"
+		<StopButton class="pointer stop"
 			:size="30"
 			@click="$store.dispatch('player/stop')" />
 	</div>
@@ -42,4 +42,10 @@ export default {
 	.pointer {
 		cursor: pointer;
 	}
+
+	@media only screen and (max-width: 768px) {
+		.stop {
+			display: none;
+		}
+	}
 </style>

src/components/Player/Infos.vue

@@ -1,9 +1,9 @@
 <template>
 	<div>
-		<a :href="player.episode.episodeLink" target="_blank">
+		<a class="episode" :href="player.episode.episodeLink" target="_blank">
 			<strong>{{ player.episode.episodeName }}</strong>
 		</a>
-		<router-link :to="player.podcastUrl">
+		<router-link class="podcast" :to="player.podcastUrl">
 			<i>{{ player.episode.podcastName }}</i>
 		</router-link>
 	</div>
@@ -27,4 +27,10 @@ export default {
 		justify-content: center;
 		width: 40%;
     }
+
+	@media only screen and (max-width: 768px) {
+		.podcast {
+			display: none;
+		}
+	}
 </style>