Started nightMode styling

frontend/components/MainFooter.vue

@@ -33,5 +33,15 @@
 		flex-direction: column;
 	}
 
-	.icon:visited { color: #4a4a4a !important; }
+	.icon:hover { color: #90298C !important; }
+
+	.nightMode {
+		.footer {
+			background-color: rgb(51, 51, 51);
+			.content {
+				color: #e6e6e6;
+			}
+		}
+
+	}
 </style>

frontend/components/MainHeader.vue

@@ -114,4 +114,46 @@
 		display: flex;
 		text-decoration: none;
 	}
+	.nightMode {
+		.nav {
+			background-color: #012332;
+			height: 64px;
+
+			.nav-menu.is-active {
+				.nav-item {
+					color: #333;
+
+					&:hover {
+						color: #333;
+					}
+				}
+			}
+
+			.nav-toggle {
+				height: 64px;
+
+				&.is-active span {
+					background-color: #333;
+				}
+			}
+
+			.is-brand {
+				font-size: 2.1rem !important;
+				line-height: 64px !important;
+				padding: 0 20px;
+			}
+
+			.nav-item {
+				font-size: 15px;
+				color: $white;
+
+				&:hover {
+					color: $white;
+				}
+			}
+			.admin strong {
+				color: #03a9f4;
+			}
+		}
+	}
 </style>

frontend/components/pages/Home.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="app">
+	<div class="app" :class="{'nightMode': nightMode}">
 		<main-header></main-header>
 		<div class="group">
 			<div class="group-title">Official Stations</div>
-			<div class="card station-card" v-for="station in stations.official" v-link="{ path: '/' + station.name }" @click="this.$dispatch('joinStation', station._id)">
+			<div class="card station-card" v-for="station in stations.official" v-link="{ path: '/' + station.name }" @click="this.$dispatch('joinStation', station._id)" :class="{'isPrivate': station.privacy === 'private'}">
 				<div class="card-image">
 					<figure class="image is-square">
 						<img :src="station.currentSong.thumbnail" onerror="this.src='/assets/notes-transparent.png'" />
@@ -23,8 +23,6 @@
 					<div class="under-content">
 						<i class='material-icons' title="How many users there are in the station.">people</i>
 						<span class="users-count" title="How many users there are in the station.">&nbsp;{{station.userCount}}</span>
-
-						<i class="material-icons right" v-if="station.privacy !== 'public'" title="This station is not visible to other users.">lock</i>
 					</div>
 				</div>
 				<a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a' v-link="{ path: '/' + station.name }"></a>
@@ -36,7 +34,7 @@
 				<a @click='modals.createCommunityStation = !modals.createCommunityStation' v-if="$parent.loggedIn" href='#'>
 				<i class="material-icons community-button">add_circle_outline</i></a>
 			</div>
-			<div class="card station-card" v-for="station in stations.community" v-link="{ path: '/community/' + station.name }" @click="this.$dispatch('joinStation', station._id)">
+			<div class="card station-card" v-for="station in stations.community" v-link="{ path: '/community/' + station.name }" @click="this.$dispatch('joinStation', station._id)" :class="{'isPrivate': station.privacy === 'private','isMine': isOwner(station)}">
 				<div class="card-image">
 					<figure class="image is-square">
 						<img :src="station.currentSong.thumbnail" onerror="this.src='/assets/notes-transparent.png'" />
@@ -55,9 +53,6 @@
 					<div class="under-content">
 						<i class='material-icons' title="How many users there are in the station.">people</i>
 						<span class="users-count" title="How many users there are in the station.">&nbsp;{{station.userCount}}</span>
-
-						<i class="material-icons right" v-if="station.privacy !== 'public'" title="This station is not visible to other users.">lock</i>
-						<i class="material-icons right" v-if="isOwner(station)" title="This is your station.">home</i>
 					</div>
 				</div>
 				<a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a' v-link="{ path: '/community/' + station.name }"></a>
@@ -87,7 +82,8 @@
 				},
 				modals: {
 					createCommunityStation: false
-				}
+				},
+				nightMode: false
 			}
 		},
 		ready() {
@@ -202,6 +198,9 @@
 	.under-content {
 		text-align: left;
 		height: 25px;
+		bottom: 0;
+		position: absolute;
+		margin-bottom: 10px;
 
 		* {
 			z-index: 10;
@@ -224,11 +223,36 @@
 	.station-card {
 		margin: 10px;
 		cursor: pointer;
+		height: 475px;
+
 		.card-content {
 			max-height: 159px;
+
+			.content {
+				word-wrap: break-word;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 3;
+				line-height: 20px;
+				max-height: 60px;
+			}
 		}
 	}
 
+	.station-card:hover {
+		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.3), 0 0 10px rgba(10, 10, 10, 0.3);
+	}
+
+	.isPrivate {
+		background-color: #F8BBD0;
+	}
+
+	.isMine {
+		background-color: #29B6F6;
+	}
+
 	.community-button {
 		cursor: pointer;
 		transition: .25s ease color;
@@ -289,4 +313,55 @@
 		word-wrap: break-word;
     	width: 80%;
 	}
+
+	.nightMode {
+		background-color: rgb(51, 51, 51);
+		color: #e6e6e6;
+
+		.community-button {
+			cursor: pointer;
+			transition: .25s ease color;
+			font-size: 30px;
+			color: #e6e6e6;
+		}
+
+		.community-button:hover { color: #03a9f4; }
+
+		.station-card {
+			margin: 10px;
+			cursor: pointer;
+			height: 475px;
+			background-color: rgb(51, 51, 51);
+			color: #e6e6e6;
+
+			.card-content {
+				max-height: 159px;
+				color: #e6e6e6;
+
+				.content {
+					word-wrap: break-word;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 3;
+					line-height: 20px;
+					max-height: 60px;
+					color: #e6e6e6;
+				}
+			}
+		}
+
+		.station-card:hover {
+			box-shadow: 0 2px 3px rgba(10, 10, 10, 0.3), 0 0 10px rgba(10, 10, 10, 0.3);
+		}
+
+		.isPrivate {
+			background-color: #d01657;
+		}
+
+		.isMine {
+			background-color: #0777ab;
+		}
+	}
 </style>

windows-start.cmd

@@ -1,8 +1,9 @@
 start "Redis" "startRedis.cmd"
 start "Mongo" "startmongo.cmd"
-cd backend
-start "Backend" "nodemon"
-cd ..
 cd frontend
 start "Frotend" npm run development-watch
 cd ..
+SLEEP 60
+cd backend
+start "Backend" "nodemon"
+cd ..