From e44d43af0e90fde8d7a065b73dfc736b995f357a Mon Sep 17 00:00:00 2001
From: Davide Bongiovanni <davidebongiov@gmail.com>
Date: Thu, 29 Nov 2018 00:07:30 +0100
Subject: [PATCH] Major restyling. Now with better HTML and CSS practices!

---
 static/style.css     | 195 ++++++++++++-------------------------------
 templates/index.html |  67 +++++++--------
 2 files changed, 84 insertions(+), 178 deletions(-)

diff --git a/static/style.css b/static/style.css
index b8110a4..583cb60 100644
--- a/static/style.css
+++ b/static/style.css
@@ -8,166 +8,88 @@ body {
 }
 
 h1 {
+	margin-left: 3%;
 }
 
 h2 {
-	padding-left: 40pt;
+	margin-left: 3%;
+}
+
+.right-pane {
+	width: 70%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 30%;
 }
 
 .leaderboard {
-	width: 35%;
 	position: fixed;
+	width: 30%;
 	top: 0;
-	bottom: 0;
 	left: 0;
-	padding-top: 8pt;
-	height: auto;
+	height: 100%;
 	background-color: rgba(0,0,0,0.8);
 	color: #d4d0cd;
-}
-
-.right-pane {
-	width: 65%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 35%;
-	padding-top: 8pt;
+	overflow: auto;
 }
 
 .lb-entry {
-	padding: 0;
-	height: 60pt;
-	position: relative;
+	display: flex;
+	justify-content: space-around;
 }
 
 .lb-entry img {
-	height: 50pt;
-	width: auto;
-	position: absolute;
-	top: 50%;
-	left: 25pt;
-	margin-top: -25pt;
-}
-
-.lb-entry span.score {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 70%;
-}
-
-.lb-entry span.name {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 30%;
+	height: 80px;
+	width: 80px;
+	margin: 10px 0;
 }
 
-.cook-entry {
-	padding: 0;
-	/*height: 90pt;*/
-	position: relative;
+.lb-entry span {
+	margin: auto 0;
+	font-size: 20px;
 }
 
-.cook-card {
+.flex-card {
+	margin: 8px auto;
+	display: flex;
+	width: fit-content;
+	min-width: 240px;
 	background-color: #F1EDEA;
-	height: 100pt;
-	margin-left: 20pt;
+	margin-left: 3%;
 	-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);
 }
 
-.cook-card img {
-	height: 50pt;
-	width: auto;
-	position: absolute;
-	top: 50%;
-	left: 40pt;
-	margin-top: -25pt;
-}
-
-#cook-small-thumb {
-	height: 20pt;
-	width: auto;
-	position: relative;
-	left: 0;
-	top: 0;
-}
-
-.cook-card span {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 120pt;
-}
-
-.cook-card p {
-	position: absolute;
-	left: 140pt;
-	margin: -16pt 0 0 0;
-	font-size: 11pt;
-	height: 24pt;
-	top: 50%;
-	text-align: center;
-}
-
-.eater-entry {
-	padding: 0;
-	position: relative;
+.flex-card img {
+	height: 80px;
+	width: 80px;
+	margin: 16px 20px;
 }
 
-.eater-card {
-	background-color: #F1EDEA;
-	height: 70pt;
-	width: 200pt;
-	margin: 6pt 0 6pt 20pt;
-	-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);
+.flex-card .flex-small-thumb {
+	height: 32px;
+	width: 32px;
+	display: inline-block;
+	margin: -6px 0 0 0;
 }
 
-.eater-card img {
-	height: 50pt;
-	width: auto;
-	position: absolute;
-	top: 50%;
-	left: 40pt;
-	margin-top: -25pt;
+.flex-card span {
+	margin: auto 20px;
+	font-size: 20px;
 }
 
-.eater-card span {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 120pt;
+.flex-card .rect-button {
+	margin: auto 20px;
 }
 
-.eater-entry span {
-	position: absolute;
-	font-size: 16pt;
-	top: 50%;
-	margin-top: -8pt;
-	left: 120pt;
+.flex-card p {
+	font-size: 14px;
+	text-align: center;
+	line-height: 200%;
 }
 
-/*.rect-button {
-	width: 100pt;
-	height: 26pt;
-	background-color: #EE7500;
-	position: absolute;
-	color: white;
-	top: 50%;
-	right: 32pt;
-	margin-top: -13pt;
-	cursor: pointer;
-}*/
-
 .rect-button span {
 	font-size: 12pt;
 	position: absolute;
@@ -179,27 +101,18 @@ h2 {
 	color: white;
 }
 
-.add-button {
-	height: 50pt;
-	width: 50pt;
-	position: absolute;
-	top: 50%;
-	left: 40pt;
-	margin-top: -25pt;
+.round-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	color: white;
-	border-radius: 25pt;
 	background-color: #EE7500;
 	cursor: pointer;
-}
-
-.add-button span {
-	font-size: 34pt;
-	position: absolute;
-	top: 50%;
-	margin-top: -18pt;
-	left: 0;
-	width: 100%;
-	text-align: center;
+	width: 80px;
+	height: 80px;
+	border-radius: 40px;
+	font-size: 48px;
+	margin: 16px 20px;
 }
 
 .user-card {
diff --git a/templates/index.html b/templates/index.html
index 73b076d..bf1d4fa 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -20,59 +20,52 @@
 <body>
 	<div class="leaderboard">
 		<h1 style="text-align: center">Leaderboard</h1>
-		<div class="leaderboard-contiainer">
-			{% for person in leaderboard %}
-			<div class="lb-entry">
-				<img src="{{url_for('static', filename=person.name + '.png')}}">
-				<span class="name">{{ person.name }}</span>
-				<span class="score">{{ person.score }}</span>
-			</div>
-			{% endfor %}
+		{% for person in leaderboard %}
+		<div class="lb-entry">
+			<img src="{{url_for('static', filename=person.name + '.png')}}">
+			<span class="name">{{ person.name }}</span>
+			<span class="score">{{ person.score }}</span>
 		</div>
+		{% endfor %}
 	</div>
 	<div class="right-pane">
-		<h1 style="padding-left: 40pt">Next Meal</h1>
+		<h1>When: {{date}}</h1>
 		<h2>Cook</h2>
-			<div class="cook-entry">
-				<div class="cook-card">
-				<span>date: {{ date }}</span>
-				{% if cook.confirmed == "no" %}
-				<img src="{{url_for('static', filename='question.png')}}">
-				<p>If nobody volunteers,<br><br><img id="cook-small-thumb" src="{{url_for('static', filename=cook.name + '.png')}}"> will cook.</p>
-				<div class="rect-button" onclick="location.href='/volunteer';"><span>VOLUNTEER</span></div>
-				{% else %}
-				<img src="{{url_for('static', filename= cook.name + '.png')}}">
-				<span>{{ cook.name }}</span>
-				<div class="rect-button" style="background-color: #8faf38; cursor: default;"><span>CONFIRMED</span></div>
-				{% endif %}
-			</div></div>
+		<div class="flex-card">
+			{% if cook.confirmed == "no" %}
+			<img src="{{url_for('static', filename='question.png')}}">
+			<p>If nobody volunteers,<br><img class="flex-small-thumb" src="{{url_for('static', filename=cook.name + '.png')}}" title="{{current_user.name}}" align="middle"> will cook.</p>
+			<div class="rect-button" onclick="location.href='/volunteer';" style="background-color: #EE7500;">VOLUNTEER</div>
+			{% else %}
+			<img src="{{url_for('static', filename= cook.name + '.png')}}">
+			<span>{{ cook.name }}</span>
+			<div class="rect-button" style="background-color: #8faf38; cursor: default;">CONFIRMED</div>
+			{% endif %}
+		</div>
 		<h2>Eaters</h2>
 			{% for eater in eaters %}
-			<div class="eater-entry">
-				<div class="eater-card">
+				<div class="flex-card">
 				<img src="{{url_for('static', filename=eater + '.png')}}">
 				<span>{{ eater }}</span>
-			</div></div>
+			</div>
 			{% endfor %}
-			
 				{% if not current_user.name in eaters %}
-				<div class="eater-entry" style="height: 60pt;">
-					<div class="add-button" onclick="location.href='/addme';"><span><i class="fa fa-plus" aria-hidden="true"></i></span></div>
+				<div class="flex-card" style="background: none; box-shadow: none">
+					<div class="round-button" onclick="location.href='/addme';"><i class="fa fa-plus" aria-hidden="true"></i></div>
 					<span>Add me</span>
 				</div>
 				{% else %}
-				<div class="eater-entry" style="height: 60pt;">
-					<div class="add-button" onclick="location.href='/removeme';"><span><i class="fa fa-minus" aria-hidden="true"></i></span></div>
+				<div class="flex-card" style="background: none; box-shadow: none">
+					<div class="round-button" onclick="location.href='/removeme';"><i class="fa fa-minus" aria-hidden="true"></i></div>
 					<span>Remove me</span>
 				</div>
 				{% endif %}
-			
-	</div>
-	<div class="user-card">
-		<img src="{{url_for('static', filename=current_user.name + '.png')}}">
-		<div class="user-info">
-			<span>{{current_user.name}}</span>
-			<div class="rect-button" onclick="location.href='/logout';" style="background-color: #EE7500;">LOGOUT</div>
+		<div class="user-card">
+			<img src="{{url_for('static', filename=current_user.name + '.png')}}">
+			<div class="user-info">
+				<span>{{current_user.name}}</span>
+				<div class="rect-button" onclick="location.href='/logout';" style="background-color: #EE7500;">LOGOUT</div>
+			</div>
 		</div>
 	</div>
 </body>