Added ability to use tab to navigate.

frontend/App.vue

@@ -136,6 +136,14 @@
 <style type='scss'>
 	#toast-container { z-index: 10000 !important; }
 
+	.absolute-a {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
 	.socketNotConnected {
 		padding: 20px;
 		color: white;

frontend/components/Admin/QueueSongs.vue

@@ -26,9 +26,9 @@
 						<td>{{ song.genres.join(', ') }}</td>
 						<td>{{ song.requestedBy }}</td>
 						<td>
-							<a class='button is-primary' @click='edit(song, index)'>Edit</a>
-							<a class='button is-success' @click='add(song)'>Add</a>
-							<a class='button is-danger' @click='remove(song._id, index)'>Remove</a>
+							<a class='button is-primary' href='#' @click='edit(song, index)'>Edit</a>
+							<a class='button is-success' href='#' @click='add(song)'>Add</a>
+							<a class='button is-danger' href='#' @click='remove(song._id, index)'>Remove</a>
 						</td>
 					</tr>
 				</tbody>

frontend/components/Admin/Reports.vue

@@ -26,8 +26,8 @@
 							<span>{{ report.description }}</span>
 						</td>
 						<td>
-							<a class='button is-warning' @click='toggleModal(report)'>Issues</a>
-							<a class='button is-primary' @click='resolve(report._id)'>Resolve</a>
+							<a class='button is-warning' href='#' @click='toggleModal(report)'>Issues</a>
+							<a class='button is-primary' href='#' @click='resolve(report._id)'>Resolve</a>
 						</td>
 					</tr>
 				</tbody>

frontend/components/Admin/Songs.vue

@@ -26,8 +26,8 @@
 						<td>{{ song.genres.join(', ') }}</td>
 						<td>{{ song.requestedBy }}</td>
 						<td>
-							<a class='button is-primary' @click='edit(song, index)'>Edit</a>
-							<a class='button is-danger' @click='remove(song._id, index)'>Remove</a>
+							<a class='button is-primary' href='#' @click='edit(song, index)'>Edit</a>
+							<a class='button is-danger' href='#' @click='remove(song._id, index)'>Remove</a>
 						</td>
 					</tr>
 				</tbody>

frontend/components/Admin/Stations.vue

@@ -26,7 +26,7 @@
 							<span>{{ station.description }}</span>
 						</td>
 						<td>
-							<a class='button is-danger' @click='removeStation(index)'>Remove</a>
+							<a class='button is-danger' @click='removeStation(index)' href='#'>Remove</a>
 						</td>
 					</tr>
 				</tbody>
@@ -58,7 +58,7 @@
 						<label class='label'>Genres</label>
 						<p class='control has-addons'>
 							<input class='input' id='new-genre' type='text' placeholder='Genre'>
-							<a class='button is-info' @click='addGenre()'>Add genre</a>
+							<button class='button is-info' @click='addGenre()'>Add genre</button>
 						</p>
 						<span class='tag is-info' v-for='(index, genre) in newStation.genres' track-by='$index'>
 							{{ genre }}
@@ -67,7 +67,7 @@
 						<label class='label'>Blacklisted Genres</label>
 						<p class='control has-addons'>
 							<input class='input' id='new-blacklisted-genre' type='text' placeholder='Blacklisted Genre'>
-							<a class='button is-info' @click='addBlacklistedGenre()'>Add blacklisted genre</a>
+							<button class='button is-info' @click='addBlacklistedGenre()'>Add blacklisted genre</button>
 						</p>
 						<span class='tag is-info' v-for='(index, genre) in newStation.blacklistedGenres' track-by='$index'>
 							{{ genre }}
@@ -76,7 +76,7 @@
 					</div>
 				</div>
 				<footer class='card-footer'>
-					<a class='card-footer-item' @click='createStation()'>Create</a>
+					<a class='card-footer-item' @click='createStation()' href='#'>Create</a>
 				</footer>
 			</div>
 		</div>

frontend/components/MainHeader.vue

@@ -16,9 +16,9 @@
 			<a class="nav-item is-tab admin" href="#" v-link="{ path: '/admin' }" v-if="$parent.$parent.role === 'admin'">
 				<strong>Admin</strong>
 			</a>
-			<a class="nav-item is-tab" href="#">
+			<!--a class="nav-item is-tab" href="#">
 				About
-			</a>
+			</a-->
 			<a class="nav-item is-tab" href="#" v-link="{ path: '/news' }">
 				News
 			</a>

frontend/components/Modals/AddSongToQueue.vue

@@ -10,7 +10,7 @@
 				<aside class='menu' v-if='$parent.$parent.loggedIn && $parent.type === "community"'>
 					<ul class='menu-list'>
 						<li v-for='playlist in playlists' track-by='$index'>
-							<a :href='' target='_blank' @click='$parent.editPlaylist(playlist._id)'>{{ playlist.displayName }}</a>
+							<a href='#' target='_blank' @click='$parent.editPlaylist(playlist._id)'>{{ playlist.displayName }}</a>
 							<div class='controls'>
 								<a href='#' @click='selectPlaylist(playlist._id)' v-if="!isPlaylistSelected(playlist._id)"><i class='material-icons'>panorama_fish_eye</i></a>
 								<a href='#' @click='unSelectPlaylist()' v-if="isPlaylistSelected(playlist._id)"><i class='material-icons'>lens</i></a>
@@ -21,10 +21,10 @@
 				</aside>
 				<div class="control is-grouped">
 					<p class="control is-expanded">
-						<input class="input" type="text" placeholder="YouTube Query" v-model="querySearch">
+						<input class="input" type="text" placeholder="YouTube Query" v-model="querySearch" @keyup.enter="submitQuery()">
 					</p>
 					<p class="control">
-						<a class="button is-info" @click="submitQuery()">
+						<a class="button is-info" @click="submitQuery()" href='#'>
 							Search
 						</a>
 					</p>
@@ -37,7 +37,7 @@
 							</td>
 							<td>{{ result.title }}</td>
 							<td>
-								<a class="button is-success" @click="addSongToQueue(result.id)">
+								<a class="button is-success" @click="addSongToQueue(result.id)" href='#'>
 									Add
 								</a>
 							</td>

frontend/components/Modals/CreateCommunityStation.vue

@@ -18,7 +18,7 @@
 				</p>
 				<label class='label'>Description</label>
 				<p class='control'>
-					<input class='input' type='text' placeholder='Description...' v-model='newCommunity.description'>
+					<input class='input' type='text' placeholder='Description...' v-model='newCommunity.description' @keyup.enter="submitModal()">
 				</p>
 			</section>
 			<footer class='modal-card-foot'>

frontend/components/Modals/EditSong.vue

@@ -14,14 +14,16 @@
 							</p>
 						</form>
 						<p class='control has-addons'>
-							<a class='button'>
-								<i class='material-icons' @click='$parent.video.settings("pause")' v-if='!$parent.video.paused'>pause</i>
-								<i class='material-icons' @click='$parent.video.settings("play")' v-else>play_arrow</i>
+							<a class='button' @click='$parent.video.settings("pause")' v-if='!$parent.video.paused' href='#'>
+								<i class='material-icons'>pause</i>
 							</a>
-							<a class='button' @click='$parent.video.settings("stop")'>
+							<a class='button' @click='$parent.video.settings("play")' v-if='$parent.video.paused' href='#'>
+								<i class='material-icons'>play_arrow</i>
+							</a>
+							<a class='button' @click='$parent.video.settings("stop")' href='#'>
 								<i class='material-icons'>stop</i>
 							</a>
-							<a class='button' @click='$parent.video.settings("skipToLast10Secs")'>
+							<a class='button' @click='$parent.video.settings("skipToLast10Secs")' href='#'>
 								<i class='material-icons'>fast_forward</i>
 							</a>
 						</p>
@@ -56,7 +58,7 @@
 						<div>
 							<p class='control has-addons'>
 								<input class='input' id='new-artist' type='text' placeholder='Artist'>
-								<a class='button is-info' @click='$parent.addTag("artists")'>Add Artist</a>
+								<a class='button is-info' @click='$parent.addTag("artists")' href='#'>Add Artist</a>
 							</p>
 							<span class='tag is-info' v-for='(index, artist) in $parent.editing.song.artists' track-by='$index'>
 								{{ artist }}
@@ -66,7 +68,7 @@
 						<div>
 							<p class='control has-addons'>
 								<input class='input' id='new-genre' type='text' placeholder='Genre'>
-								<a class='button is-info' @click='$parent.addTag("genres")'>Add Genre</a>
+								<a class='button is-info' @click='$parent.addTag("genres")' href='#'>Add Genre</a>
 							</p>
 							<span class='tag is-info' v-for='(index, genre) in $parent.editing.song.genres' track-by='$index'>
 								{{ genre }}
@@ -86,11 +88,11 @@
 
 			</section>
 			<footer class='modal-card-foot'>
-				<a class='button is-success' @click='$parent.save($parent.editing.song)'>
+				<a class='button is-success' @click='$parent.save($parent.editing.song)' href='#'>
 					<i class='material-icons save-changes'>done</i>
 					<span>&nbsp;Save</span>
 				</a>
-				<a class='button is-danger' @click='$parent.toggleModal()'>
+				<a class='button is-danger' @click='$parent.toggleModal()' href='#'>
 					<span>&nbsp;Cancel</span>
 				</a>
 			</footer>

frontend/components/Modals/EditStation.vue

@@ -13,7 +13,7 @@
 						<input class='input' type='text' placeholder='Station Display Name' v-model='data.displayName'>
 					</p>
 					<p class='control'>
-						<a class='button is-info' @click='updateDisplayName()'>Update</a>
+						<a class='button is-info' @click='updateDisplayName()' href='#'>Update</a>
 					</p>
 				</div>
 				<label class='label'>Description</label>
@@ -22,7 +22,7 @@
 						<input class='input' type='text' placeholder='Station Display Name' v-model='data.description'>
 					</p>
 					<p class='control'>
-						<a class='button is-info' @click='updateDescription()'>Update</a>
+						<a class='button is-info' @click='updateDescription()' href='#'>Update</a>
 					</p>
 				</div>
 				<label class='label'>Privacy</label>
@@ -37,7 +37,7 @@
 						</span>
 					</p>
 					<p class='control'>
-						<a class='button is-info' @click='updatePrivacy()'>Update</a>
+						<a class='button is-info' @click='updatePrivacy()' href='#'>Update</a>
 					</p>
 				</div>
 				<div class='control is-grouped' v-if="$parent.type === 'community'">
@@ -48,7 +48,7 @@
 						</label>
 					</p>
 					<p class='control'>
-						<a class='button is-info' @click='updatePartyMode()'>Update</a>
+						<a class='button is-info' @click='updatePartyMode()' href='#'>Update</a>
 					</p>
 				</div>
 			</section>

frontend/components/Modals/IssuesModal.vue

@@ -29,10 +29,10 @@
 
 			</section>
 			<footer class='modal-card-foot'>
-				<a class='button is-primary' @click='$parent.resolve($parent.editing._id)'>
+				<a class='button is-primary' @click='$parent.resolve($parent.editing._id)' href='#'>
 					<span>Resolve</span>
 				</a>
-				<a class='button is-danger' @click='$parent.toggleModal()'>
+				<a class='button is-danger' @click='$parent.toggleModal()' href='#'>
 					<span>Cancel</span>
 				</a>
 			</footer>

frontend/components/Modals/Login.vue

@@ -19,7 +19,7 @@
 				<p>By logging in you agree to our <a href="/terms" v-link="{ path: '/terms' }">Terms of Service</a> and <a href="/privacy" v-link="{ path: '/privacy' }">Privacy Policy</a>.</p>
 			</section>
 			<footer class='modal-card-foot'>
-				<a class='button is-primary' @click='submitModal("login")'>Submit</a>
+				<a class='button is-primary' href='#' @click='submitModal("login")'>Submit</a>
 				<a class='button is-github' :href='$parent.serverDomain + "/auth/github/authorize"'>
 					<div class='icon'>
 						<img class='invert' src='/assets/social/github.svg'/>

frontend/components/Modals/Playlists/Create.vue

@@ -8,7 +8,7 @@
 			</header>
 			<section class='modal-card-body'>
 				<p class='control is-expanded'>
-					<input class='input' type='text' placeholder='Playlist Display Name' v-model='playlist.displayName'>
+					<input class='input' type='text' placeholder='Playlist Display Name' v-model='playlist.displayName' @keyup.enter="createPlaylist()">
 				</p>
 			</section>
 			<footer class='modal-card-foot'>

frontend/components/Modals/Playlists/Edit.vue

@@ -28,10 +28,10 @@
 				</aside>
 				<div class='control is-grouped'>
 					<p class='control is-expanded'>
-						<input class='input' type='text' placeholder='Search for Song to add' v-model='songQuery'>
+						<input class='input' type='text' placeholder='Search for Song to add' v-model='songQuery' @keyup.enter="searchForSongs()">
 					</p>
 					<p class='control'>
-						<a class='button is-info' @click='searchForSongs()'>Search</a>
+						<a class='button is-info' @click='searchForSongs()' href="#">Search</a>
 					</p>
 				</div>
 				<table class='table' v-if='songQueryResults.length > 0'>
@@ -42,7 +42,7 @@
 							</td>
 							<td>{{ result.title }}</td>
 							<td>
-								<a class='button is-success' @click='addSongToPlaylist(result.id)'>
+								<a class='button is-success' @click='addSongToPlaylist(result.id)' href='#'>
 									Add
 								</a>
 							</td>
@@ -51,24 +51,24 @@
 				</table>
 				<div class='control is-grouped'>
 					<p class='control is-expanded'>
-						<input class='input' type='text' placeholder='YouTube Playlist URL' v-model='importQuery'>
+						<input class='input' type='text' placeholder='YouTube Playlist URL' v-model='importQuery' @keyup.enter="importPlaylist()">
 					</p>
 					<p class='control'>
-						<a class='button is-info' @click='importPlaylist()'>Import</a>
+						<a class='button is-info' @click='importPlaylist()' href="#">Import</a>
 					</p>
 				</div>
 				<h5>Edit playlist details:</h5>
 				<div class='control is-grouped'>
 					<p class='control is-expanded'>
-						<input class='input' type='text' placeholder='Playlist Display Name' v-model='playlist.displayName'>
+						<input class='input' type='text' placeholder='Playlist Display Name' v-model='playlist.displayName' @keyup.enter="renamePlaylist()">
 					</p>
 					<p class='control'>
-						<a class='button is-info' @click='renamePlaylist()'>Rename</a>
+						<a class='button is-info' @click='renamePlaylist()' href="#">Rename</a>
 					</p>
 				</div>
 			</section>
 			<footer class='modal-card-foot'>
-				<a class='button is-danger' @click='removePlaylist()'>Remove Playlist</a>
+				<a class='button is-danger' @click='removePlaylist()' href="#">Remove Playlist</a>
 			</footer>
 		</div>
 	</div>

frontend/components/Modals/Register.vue

@@ -24,7 +24,7 @@
 				<p>By logging in you agree to our <a href="/terms" v-link="{ path: '/terms' }">Terms of Service</a> and <a href="/privacy" v-link="{ path: '/privacy' }">Privacy Policy</a>.</p>
 			</section>
 			<footer class='modal-card-foot'>
-				<a class='button is-primary' @click='submitModal()'>Submit</a>
+				<a class='button is-primary' @click='submitModal()' href='#'>Submit</a>
 				<a class='button is-github' :href='$parent.serverDomain + "/auth/github/authorize"'>
 					<div class='icon'>
 						<img class='invert' src='/assets/social/github.svg'/>

frontend/components/Modals/Report.vue

@@ -33,6 +33,7 @@
 									</div>
 								</article>
 							</div>
+							<a @click=highlight('previousSong') href='#' class='absolute-a'></a>
 						</div>
 					</div>
 					<div class='column song-type' v-if='$parent.currentSong !== {}'>
@@ -60,6 +61,7 @@
 									</div>
 								</article>
 							</div>
+							<a @click=highlight('currentSong') href='#' class='absolute-a'></a>
 						</div>
 					</div>
 				</div>
@@ -83,11 +85,11 @@
 				</div>
 			</section>
 			<footer class='modal-card-foot'>
-				<a class='button is-success' @click='create()'>
+				<a class='button is-success' @click='create()' href='#'>
 					<i class='material-icons save-changes'>done</i>
 					<span>&nbsp;Create</span>
 				</a>
-				<a class='button is-danger' @click='$parent.modals.report = !$parent.modals.report'>
+				<a class='button is-danger' @click='$parent.modals.report = !$parent.modals.report' href='#'>
 					<span>&nbsp;Cancel</span>
 				</a>
 			</footer>

frontend/components/Sidebars/Playlist.vue

@@ -6,7 +6,7 @@
 			<aside class='menu' v-if='playlists.length > 0'>
 				<ul class='menu-list'>
 					<li v-for='playlist in playlists'>
-						<a href='#'>{{ playlist.displayName }}</a>
+						<span>{{ playlist.displayName }}</span>
 						<!--Will play playlist in community station Kris-->
 						<div class='icons-group'>
 							<a href='#' @click='selectPlaylist(playlist._id)' v-if="isNotSelected(playlist._id)">
@@ -22,7 +22,7 @@
 
 			<div class='none-found' v-else>No Playlists found</div>
 
-			<a class='button create-playlist' @click='$parent.toggleModal("createPlaylist")'>Create Playlist</a>
+			<a class='button create-playlist' @click='$parent.toggleModal("createPlaylist")' href='#'>Create Playlist</a>
 		</div>
 	</div>
 </template>
@@ -123,7 +123,7 @@
 	.menu-list li { align-items: center; }
 
 	.inner-wrapper {	
-		top: 50px;
+		top: 64px;
 		position: relative;
 	}
 

frontend/components/Sidebars/Queue.vue

@@ -32,7 +32,7 @@
 				</div>
 			</article>
 
-			<a class='button add-to-queue' @click='$parent.toggleModal("addSongToQueue")'>Add Song to Queue</a>
+			<a href='#' class='button add-to-queue' @click='$parent.toggleModal("addSongToQueue")'>Add Song to Queue</a>
 		</div>
 	</div>
 </template>
@@ -71,7 +71,7 @@
 	}
 
 	.inner-wrapper {	
-		top: 50px;
+		top: 64px;
 		position: relative;
 	}
 

frontend/components/Sidebars/UsersList.vue

@@ -25,7 +25,7 @@
 	}
 
 	.inner-wrapper {	
-		top: 50px;
+		top: 64px;
 		position: relative;
 	}
 

frontend/components/Station/Station.vue

@@ -53,10 +53,12 @@
 									<li id="like" class="right" @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>
 									<li style="margin-right: 10px;" id="dislike" class="right" @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>
 								</ul>
 							</div>
@@ -806,4 +808,16 @@
 	}
 
 	.icons-group { display: flex; }
+
+	#like, #dislike {
+		position: relative;
+	}
+
+	.behind {
+		z-index: -1;
+	}
+
+	.behind:focus {
+		z-index: 0;
+	}
 </style>

frontend/components/User/Show.vue

@@ -5,8 +5,8 @@
 			<img class="avatar" src="/assets/notes.png"/>
 			<h2 class="has-text-centered username">@{{user.username}}</h2>
 			<div class="admin-functionality" v-if="user.role == 'admin'">
-				<a class="button is-small is-info is-outlined" @click="changeRank('admin')" v-if="user.role == 'default'">Promote to Admin</a>
-				<a class="button is-small is-danger is-outlined" @click="changeRank('default')" v-else>Demote to User</a>
+				<a class="button is-small is-info is-outlined" href='#' @click="changeRank('admin')" v-if="user.role == 'default'">Promote to Admin</a>
+				<a class="button is-small is-danger is-outlined" href='#' @click="changeRank('default')" v-else>Demote to User</a>
 			</div>
 			<nav class="level">
 				<div class="level-item has-text-centered">

frontend/components/pages/Home.vue

@@ -24,10 +24,11 @@
 						{{ station.description }}
 					</div>
 				</div>
+				<a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a'></a>
 			</div>
 		</div>
 		<div class="group">
-			<div class="group-title">Community Stations <i class="material-icons ccs-button" @click="toggleModal('createCommunityStation')" v-if="$parent.loggedIn">add_circle_outline</i></div>
+			<div class="group-title">Community Stations <a @click="toggleModal('createCommunityStation')" v-if="$parent.loggedIn" href='#'><i class="material-icons ccs-button">add_circle_outline</i></a></div>
 			<div class="card station-card" v-for="station in stations.community" v-link="{ path: '/community/' + station._id }" @click="this.$dispatch('joinStation', station._id)" :class="station.class">
 				<div class="card-image">
 					<figure class="image is-square">
@@ -49,6 +50,7 @@
 						{{ station.description }}
 					</div>
 				</div>
+				<a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a'></a>
 			</div>
 		</div>
 		<main-footer></main-footer>
@@ -179,6 +181,7 @@
 		cursor: pointer;
 		transition: .25s ease color;
 		font-size: 30px;
+		color: black;
 	}
 
 	.ccs-button:hover {