Some styling for meal plannes

static/style.css

@@ -69,7 +69,7 @@ h2 {
 	margin: 16px 20px;
 }
 
-.flex-card .flex-small-thumb {
+.flex-small-thumb {
 	height: 32px;
 	width: 32px;
 	display: inline-block;
@@ -120,6 +120,20 @@ h2 {
 	margin: 16px 20px;
 }
 
+.small-round-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	background-color: #FF0000;
+	cursor: pointer;
+	width: 30px;
+	height: 30px;
+	border-radius: 15px;
+	font-size: 20px;
+	margin: auto 30px;
+}
+
 .floating-round-button {
 	display: flex;
 	align-items: center;
@@ -205,3 +219,72 @@ h2 {
 	text-align: center;
 	color: white;
 }
+
+.flex-card-vert {
+	width: 30%;
+	display: inline-flex;
+	flex-direction: column;
+	background-color: #F1EDEA;
+	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+	margin: 0.5%;
+	padding: 1em;
+}
+
+.add-people-container {
+	display: flex;
+	justify-content: space-between;
+	margin: 5px 0;
+}
+
+.when {
+	display: flex;
+}
+
+.when * {
+	margin: auto 3px;
+}
+
+#search-user, #flavor-text, #datepicker {
+	min-width: 0;
+	padding: 0.5em;
+}
+
+#search-user {
+	margin: auto 0;
+}
+
+.ui-spinner {
+	flex: 4;
+}
+
+.user-result-container {
+	display: flex;
+	flex-direction: column;
+	background-color: #F1EDEA;
+	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
+	position: fixed;
+}
+
+.user-result {
+	display: flex;
+	align-items: center;
+	border: solid 1px #A8A4A1;
+	cursor: pointer;
+}
+
+.user-result:hover {
+	background-color: #A8A4A1;
+}
+
+.user-result span {
+	margin: auto 20px;
+}
+
+.user-result-thumb {
+	width: 50px;
+	margin: 10px 20px;
+}

templates/view_meal.html

@@ -44,7 +44,7 @@
 		</div>
 		<h2>Eaters</h2>
 			{% for eater in meal.eaters %}
-				<div class="flex-card">
+			<div class="flex-card">
 				<img src="{{url_for('static', filename=eater + '.png')}}">
 				<span class="username">{{ eater }}</span>
 			</div>