Minor Styling Improvements to Room Cards

public/css/app.css

@@ -39,17 +39,39 @@ html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
 	display: inline-block;
 	clear: none;
 	width: 256px;
-	height: 352px;
+	height: 345px;
 	margin: 0 16px 0 16px;
 	box-shadow: 0 1px 6px 2px rgba(0, 0, 0, 0.25);
 	cursor: pointer;
 }
 
-.body-home-group-rooms-room-image { width: 100%; height: 256px; border-bottom: 1px solid #d2d2d2; }
-.body-home-group-rooms-room-info { width: 100%; height: 96px; }
-.body-home-group-rooms-room-info-name { float: left; font-size: 25px; padding-left: 16px; text-align: left; width: 160px; height: 48px; line-height: 60px; }
-.body-home-group-rooms-room-info-description { float: left; font-size: 15px; padding-left: 16px; text-align: left; width: 160px; height: 48px; line-height: 36px; }
-.body-home-group-rooms-room-info-users { float: right; text-align: center; width: 96px; height: 96px; line-height: 96px; }
+.body-home-group-rooms-room-info {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 5px;
+}
+
+.body-home-group-rooms-room-grid-left {
+	display: flex;
+	flex-direction: column;
+	width: 75%;
+	text-align: left;
+	padding-left: 10px;
+}
+
+.body-home-group-rooms-room-grid-left h3, p {
+	margin: 0;
+	white-space: normal;
+}
+
+.body-home-group-rooms-room-grid-right {
+	display: flex;
+	flex-direction: column;
+	width: 25%;
+}
+
+.body-home-group-rooms-room-image { width: 100%; height: 256px; }
 
 .body-room {}
 

public/index.html

@@ -40,11 +40,15 @@
 						<div class="body-home-group-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
 						<div class="body-home-group-rooms">
 							<div class="body-home-group-rooms-room" v-for="room in group.rooms" v-on:click="enterRoom(room)">
-								<div class="body-home-group-rooms-room-image"></div>
+								<img class="body-home-group-rooms-room-image" :src="room.thumbnail" />
 								<div class="body-home-group-rooms-room-info">
-									<div class="body-home-group-rooms-room-info-name">{{ room.name }}</div>
-									<div class="body-home-group-rooms-room-info-users">{{ room.users }}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i></div>
-									<div class="body-home-group-rooms-room-info-description">{{ room.description }}</div>
+									<div class="body-home-group-rooms-room-grid-left">
+										<h3>{{ room.name }}</h3>
+										<p class="body-home-group-rooms-room-info-description">{{ room.description }}</p>
+									</div>
+									<div class="body-home-group-rooms-room-grid-right">
+										<div class="body-home-group-rooms-room-info-users">{{ room.users }}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i></div>
+									</div>
 								</div>
 							</div>
 						</div>

public/js/app.js

@@ -38,20 +38,20 @@ window.onload = function () {
 					id: "lu08gw56571r4497wrk9",
 					name: "Official Rooms",
 					rooms: [
-						{ id: "73qvw65746acvo8yqfr", name: "Country", description: "Country Music", users: 10 },
-						{ id: "enxcysmhn1k7ld56ogvi", name: "Pop", description: "Pop Music", users: 14 },
-						{ id: "kqa99gbva7lij05dn29", name: "Chill", description: "Chill Music", users: 13 },
-						{ id: "w19hu791iiub6wmjf9a4i", name: "EDM", description: "EDM Music", users: 13 }
+						{ id: "73qvw65746acvo8yqfr", thumbnail: "https://lh6.googleusercontent.com/-ghASz3s6yL4/AAAAAAAAAAI/AAAAAAAAALc/tFblPp2myu0/s0-c-k-no-ns/photo.jpg", name: "Country", description: "Johnny Cash - I Walk The Line", users: 10 },
+						{ id: "enxcysmhn1k7ld56ogvi", thumbnail: "http://66.media.tumblr.com/1734069af425e491fae7deae0a19869f/tumblr_o0i0xmIYrF1v421f2o1_1280.jpg", name: "Pop", description: "Sia - Cheap Thrills", users: 14 },
+						{ id: "kqa99gbva7lij05dn29", thumbnail: "http://www.youredm.com/wp-content/uploads/2014/09/taking-you-higher.jpg", name: "Chill", description: "MrSuicideSheep - Taking you higher", users: 13 },
+						{ id: "w19hu791iiub6wmjf9a4i", thumbnail: "http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2012/12/Deadmau5-album-title-goes-here.jpg", name: "EDM", description: "Deadmau5 - There Might Be Coffee", users: 13 }
 					]
 				},
 				{
 					id: "g2b8v03xaedj8ht1emi",
 					name: "Trending Rooms",
 					rooms: [
-						{ id: "73qvw65746acvo8yqfr", name: "Country", description: "Country Music", users: 10 },
-						{ id: "enxcysmhn1k7ld56ogvi", name: "Pop", description: "Pop Music", users: 14 },
-						{ id: "kqa99gbva7lij05dn29", name: "Chill", description: "Chill Music", users: 13 },
-						{ id: "w19hu791iiub6wmjf9a4i", name: "EDM", description: "EDM Music", users: 13 }
+						{ id: "73qvw65746acvo8yqfr", thumbnail: "https://lh6.googleusercontent.com/-ghASz3s6yL4/AAAAAAAAAAI/AAAAAAAAALc/tFblPp2myu0/s0-c-k-no-ns/photo.jpg", name: "Country", description: "Johnny Cash - I Walk The Line", users: 10 },
+						{ id: "enxcysmhn1k7ld56ogvi", thumbnail: "http://66.media.tumblr.com/1734069af425e491fae7deae0a19869f/tumblr_o0i0xmIYrF1v421f2o1_1280.jpg", name: "Pop", description: "Sia - Cheap Thrills", users: 14 },
+						{ id: "kqa99gbva7lij05dn29", thumbnail: "http://www.youredm.com/wp-content/uploads/2014/09/taking-you-higher.jpg", name: "Chill", description: "MrSuicideSheep - Taking you higher", users: 13 },
+						{ id: "w19hu791iiub6wmjf9a4i", thumbnail: "http://edmsauce.wpengine.netdna-cdn.com/wp-content/uploads/2012/12/Deadmau5-album-title-goes-here.jpg", name: "EDM", description: "Deadmau5 - There Might Be Coffee", users: 13 }
 					]
 				}
 			]
@@ -146,4 +146,4 @@ window.onload = function () {
 
 	window.socket = socket;
 	window.data = data;
-};
+};