From 943fcde264d7353cd3a2dfe00946a1764f8461bf Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sun, 30 Dec 2018 17:30:21 +0100
Subject: [PATCH] Progress

---
 css/vote.scss           | 269 +++++++++++++++++++++-------------------
 js/vote.js              |   2 +-
 templates/vote.tmpl.php |  18 ++-
 3 files changed, 154 insertions(+), 135 deletions(-)

diff --git a/css/vote.scss b/css/vote.scss
index b7c7c5979..3fd799d42 100644
--- a/css/vote.scss
+++ b/css/vote.scss
@@ -2,118 +2,129 @@
 
 $border_current_user: 2px solid;
 $border_user: 1px solid var(--color-border-dark);
+$table-padding: 17px;
 $user-column-width: 265px;
+$header-padding: $user-column-width + $table-padding;
 
 
-#content {
-	display:flex;
-}
 
 .flex-row {
 	align-items: center;
 }
 
 #app-content {
-	width: 100%;
+	// width: 100%;
 	overflow-x: hidden;
+}
 
-	#votings {
-		position: relative !important;
-		padding: 12px 17px;
-		.table {
-			overflow-x: auto;
-			padding-bottom: 10px;
-		}
-		.description {
-			.expired-vote{
-				color: var(--color-error);
-				font-weight: bold;
-			}
-		}
-		.header {
-			margin-left: $user-column-width;
-			padding: 0 17px;
-			align-items: initial;
-
-			.date-box {
-				padding: 0 2px;
-				align-items: center;
-				.month, .dayow {
-					font-size: 1.2em;
-					color: var(--color-text-lighter);
-				}
-
-				.day {
-					font-size: 1.8em;
-					margin: 5px 0 5px 0;
-				}
-			}
-
-			.counter {
-				font-size: 18px;
-				& > div {
-					margin: 0 5px;
-					.svg {
-						background-position: center;
-						background-repeat: no-repeat;
-						background-size: 18px;
-						height: 24px;
-						width: 24px;
-					}
-				}
-				.yes {
-					color: $fg-yes;
-					.svg {
-						// background-image: var(--icon-yes);
-					}
-				}
-				.no {
-					color: $fg-no;
-					.svg {
-						// background-image: var(--icon-no);
-					}
-				}
-			}
-
-			.winner {
-				font-weight: bold;
-				color: $fg-yes;
-			}
-			.vote.option {
-				.date-box {
-					flex-grow: 1;
-				}
-
-				.counter {
-					flex-grow: 0;
-					height: 32px;
-				}
-			}
-		}
-		.user {
-			border-top: $border_user;
-			height: 44px;
-			padding: 0 17px;
-		}
-		.first {
-			flex-grow: 0;
-			flex-shrink: 0;
-			width: $user-column-width;
-		}
-
-		.vote, .poll-cell {
-			flex-grow: 1;
-<<<<<<< HEAD
-			width: 85px;
-			min-width: 85px;
-=======
->>>>>>> a5de5beb2dc3f6918989a841244351b0f347b525
-			margin: 2px;
-			align-items:center;
+.user {
+	border-bottom: $border_user;
+	height: 44px;
+	padding: 0 $table-padding;
+	order: 2;
+	&.current-user {
+		order: 1;
+		// background-color: #91c8e9;
+		// background-color: var(--color-primary-element-light);
+		// background-color: var(--color-main-background-translucent);
+		// background-color: var(--color-background-dark);
+		height: 50px;
+		.name {
+			font-weight: bold;
 		}
 	}
 }
 
+.table {
+	overflow-x: auto;
+	padding-bottom: 10px;
+}
+
+.expired-vote{
+	color: var(--color-error);
+	font-weight: bold;
+}
+
+.header {
+	padding: 0 $table-padding 0 $header-padding;
+	align-items: center;
+	border-bottom: $border_user;
+
+	.date-box {
+		padding: 0 2px;
+		align-items: center;
+		.month, .dayow {
+			font-size: 1.2em;
+			color: var(--color-text-lighter);
+		}
+
+		.day {
+			font-size: 1.8em;
+			margin: 5px 0 5px 0;
+		}
+	}
+
+	.counter {
+		font-size: 18px;
+		& > div {
+			margin: 0 5px;
+			.svg {
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: 18px;
+				height: 24px;
+				width: 24px;
+			}
+		}
+		.yes {
+			color: $fg-yes;
+			.svg {
+				// background-image: var(--icon-yes);
+			}
+		}
+		.no {
+			color: $fg-no;
+			.svg {
+				// background-image: var(--icon-no);
+			}
+		}
+	}
+
+	.winner {
+		font-weight: bold;
+		color: $fg-yes;
+	}
+	.vote.option {
+		.date-box {
+			flex-grow: 1;
+		}
+
+		.counter {
+			flex-grow: 0;
+			height: 32px;
+		}
+	}
+}
+
+#votings {
+	position: relative !important;
+	padding: 12px $table-padding;
+	.first {
+		flex-grow: 0;
+		flex-shrink: 0;
+		width: $user-column-width;
+	}
+
+	.vote {
+		flex-grow: 1;
+		width: 85px;
+		// min-width: 85px;
+		margin: 2px;
+		align-items:center;
+	}
+}
+
+
 .date-poll {
 	.vote, .poll-cell {
 		width: 85px;
@@ -128,25 +139,27 @@ $user-column-width: 265px;
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: 32px;
-	height: 44px;
-	// display: flex;
+	height: 43px;
+	display: flex;
+	flex-grow: 1;
+	width: 85px;
+	// min-width: 85px;
+	margin: 2px;
+	align-items: center;
 
 	&.yes {
 		background-color: $bg-yes;
 		color: $fg-yes;
-		// background-image: var(--icon-yes);
 	}
 
 	&.no {
 		background-color: $bg-no;
 		color: $fg-no;
-		// background-image: var(--icon-no);
 	}
 
 	&.maybe {
 		background-color: $bg-maybe;
 		color: $fg-maybe;
-		// background-image: var(--icon-maybe);
 	}
 
 	&.unvoted {
@@ -155,9 +168,9 @@ $user-column-width: 265px;
 		&:before {
 			content: attr(data-unvoted);
 			color: $fg-no;
-			font-size: 14px;
+			font-size: 11px;
 			font-weight: bold;
-			line-height: 38px;
+			line-height: 25px;
 		}
 	}
 
@@ -167,24 +180,30 @@ $user-column-width: 265px;
 		border: 2px solid;
 		border-radius: var(--border-radius);
 		box-sizing: border-box;
-		// width: 25px;
-		// height: 25px;
-		// background-size: 20px;
-		// margin: auto !important;
-		// background-color: var(--color-main-background);
-		// color: var(--color-primary);
-		// flex-grow: 0 !important;
-		// &.icon-no {
-			// background-image: initial;
-		// }
+		width: 30px;
+		// min-width: 30px;
+		height: 30px;
+		background-size: 20px;
+		margin: auto !important;
+		background-color: var(--color-main-background);
+		color: var(--color-primary);
+		flex-grow: 0 !important;
+		box-shadow: 2px 2px 2px gray;
+		&.icon-no {
+			background-image: initial;
+		}
 		&.unvoted {
 			background-color: $bg-maybe;
 			color: $fg-maybe;
 		}
+		&:active {
+			box-shadow: inherit;
+		}
 	}
 }
 
 .toggle-cell {
+	display: none;
 	height: 28px;
 	height: 32px;
 	width: 32px;
@@ -212,15 +231,6 @@ $user-column-width: 265px;
 }
 
 
-.current-user {
-	background-color: var(--color-background-dark);
-	// background-color: var(--color-primary-element-light);
-	.name {
-		// color: var(--color-primary-text);
-		font-weight: bold;
-	}
-}
-
 #switchDetails {
 	margin-right: 32px;
 }
@@ -239,7 +249,7 @@ $user-column-width: 265px;
 		background-position-x: center;
 		text-shadow: 1px 1px var(--color-box-shadow);
 		color: var(--color-primary-text);
-		min-width: 34px;
+		// min-width: 34px;
 		text-align: center;
 		&.no-comments {
 			// background-image: var(--icon-comment-no);
@@ -259,7 +269,7 @@ $user-column-width: 265px;
 }
 
 .finish_vote {
-	padding: 10px 17px;
+	padding: 10px $table-padding;
 }
 
 
@@ -274,7 +284,7 @@ $user-column-width: 265px;
 }
 @media all and (max-width: (480px) ) {
 
-	#app-content #votings {
+	#votings {
 		padding: 0px 2px;
 
 		.flex-row {
@@ -299,7 +309,7 @@ $user-column-width: 265px;
 					&.option {
 						align-items: baseline;
 						width: 100%;
-						border-top: $border_user;
+						border-bottom: $border_user;
 					}
 					&.time {
 						align-items: center;
@@ -320,11 +330,11 @@ $user-column-width: 265px;
 			&.current-user {
 				display: flex;
 				width: 44px;
-				padding:0;
+				margin: 0 10px;
 				border: none;
 				background-color: transparent;
 
-				.poll-cell {
+				.poll-cell1 {
 					border:none;
 					border-radius: 0;
 					border-top: 1px solid var(--color-border-dark);
@@ -354,6 +364,7 @@ $user-column-width: 265px;
 				.poll-cell, .toggle-cell  {
 					width: 44px;
 					height: 44px;
+					background-size: 30px;
 					background-color: transparent;
 				}
 			}
diff --git a/js/vote.js b/js/vote.js
index 47a70dc3c..aaa0ed394 100644
--- a/js/vote.js
+++ b/js/vote.js
@@ -272,7 +272,7 @@ $('#commentBox').keyup(function () {
 	}
 });
 
-$(document).on('click', '.toggle-cell, .poll-cell.active', function () {
+$(document).on('mousedown', '.toggle-cell, .poll-cell.active', function () {
 	valuesChanged = true;
 	var $nextClass = '';
 	var $toggleAllClasses = '';
diff --git a/templates/vote.tmpl.php b/templates/vote.tmpl.php
index 629177fb0..066ebf05e 100644
--- a/templates/vote.tmpl.php
+++ b/templates/vote.tmpl.php
@@ -179,6 +179,12 @@
 
 				<ul class="flex-column table-body">
 					<?php
+
+
+
+
+
+
 					if ($votes !== null) {
 						//group by user
 						$others = array();
@@ -247,6 +253,7 @@
 							print_unescaped('</li>');
 						}
 					}
+					
 					$toggleTooltip = $l->t('Switch all options at once');
 					if (!$expired) {
 						print_unescaped('<li class="flex-row user current-user">');
@@ -270,7 +277,7 @@
 						print_unescaped('		<div class="toggle"></div>');
 						print_unescaped('	</div>');
 						print_unescaped('</div>');
-						print_unescaped('<ul class="flex-row">');
+						print_unescaped('<div class="flex-row">');
 
 						$i_tot = 0;
 						foreach ($options as $optionElement) {
@@ -280,7 +287,7 @@
 							if (isset($userVoted)) {
 								foreach ($userVoted as $vote) {
 									if ($optionElement->getPollOptionText() === $vote->getVoteOptionText()) {
-										$class = $vote->getVoteAnswer() . ' icon-' . $vote->getVoteAnswer();
+										$class = 'lala' . $vote->getVoteAnswer() . ' icon-' . $vote->getVoteAnswer() . ' ' . $vote->getVoteAnswer();
 										break;
 									} else {
 										$class = 'unvoted';
@@ -293,11 +300,12 @@
 								$updatedPoll = true;
 							}
 
-							print_unescaped('<li id="voteid_' . $optionElement->getId() . '" class="flex-column active poll-cell ' . $class . '" data-value="' . $optionElement->getPollOptionText() . '" data-unvoted="' . $dataUnvoted . '"></li>');
-
+							print_unescaped('<div class="poll-cell">');
+ 							print_unescaped('    <div id="voteid_' . $optionElement->getId() . '" class="flex-column poll-cell active  ' . $class . '" data-value="' . $optionElement->getPollOptionText() . '" data-unvoted="' . $dataUnvoted . '"></div>');
+ 							print_unescaped('</div>');
 							$i_tot++;
 						}
-						print_unescaped('</ul>');
+						print_unescaped('</div>');
 						print_unescaped('</li>');
 					}
 					?>