From f1d776454155f6d8f553d1acfc7a8e8a7be4c192 Mon Sep 17 00:00:00 2001
From: Kameron Kenny <kameron.kenny@salesforce.com>
Date: Mon, 15 Jul 2019 23:03:19 -0400
Subject: [PATCH]  style

---
 punch_list/public/css/custom.css   | 34 ++++++++++++++++++++++++-----
 punch_list/public/index.html       |  7 +++---
 punch_list/public/js/myFirebase.js | 35 ++++++++++++++++++------------
 3 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/punch_list/public/css/custom.css b/punch_list/public/css/custom.css
index 71609f1..16081f1 100644
--- a/punch_list/public/css/custom.css
+++ b/punch_list/public/css/custom.css
@@ -1,9 +1,21 @@
 #neededBy { display: none; }
 #whoami { width: 100%; }
+.button:hover { color: #ddd; }
+button:hover { color: #ddd; }
+.dropdown.menu { float:right; margin-right: 15px;}
+.needby-container { width: 22%; float: left; text-align: center; }
+.details-container { width: 70%; }
+.priority-container { width: 20%; float:left; width:10%;}
+.priority { min-width:50px; color:steel; font-size: 35px; font-weight: 900; }
 .inProgress { color:orange; font-size: 12px; }
+li.inProgress { border: 4px solid lime; }
+.tags-summary { display: none; }
+.tags-details { font-size: 1em; margin-left: 10px; }
+a.tags-details { color: #00BFFF; text-decoration: none;}
+a.tags-details:hover { color: #00FFFF; text-shadow: 0px 0px 23px #FFF; }
 .subject {
 	overflow: hidden;
-	width: 89%;
+	width: 70%;
   float: left;
   color: #FFF;
   font-size: 1.5rem;
@@ -30,6 +42,9 @@
     margin-top: -8px;
   }
   .backlog-list-content {
+		float: left;
+		width: 96%;
+		border-top: 2px solid #DDD;
 		display: none;
     padding: 0.4em;
   }
@@ -47,8 +62,9 @@
 a.punch-default { color: #00BFFF; font-size: 12px; text-decoration: none;}
 a.punch-default:hover { color: #00FFFF; text-shadow: 0px 0px 23px #FFF; }
 .punch-default { border: 0px solid #AAA; color: #aaa; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
-  .inprogress { color: orange; font-size: 12px; }
+.inprogress { color: orange; font-size: 12px; }
 .waiting { color: red; font-size: 12px; }
+li.waiting { border: 4px solid red ; }
 .overdue { color: red; font-size: 12px; border: 1px solid red; padding:3px;}
 .duesoon { color: yellow; font-size: 12px; border: 1px solid yellow; padding:3px;}
 .hide { display: none; }
@@ -166,6 +182,8 @@ textarea {
   position: relative;
   display: inline-block;
 	height: 20px;
+	float: left;
+	width: 35px;
 }
 
 /* Dropdown Content (Hidden by Default) */
@@ -176,7 +194,7 @@ textarea {
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1000;
-	overflow:visible;
+	float:right;
 }
 
 /* Links inside the dropdown */
@@ -189,7 +207,7 @@ textarea {
 }
 
 /* Change color of dropdown links on hover */
-.dropdown-content a:hover {background-color: #ddd}
+.dropdown-content a:hover {background-color: #aaa;}
 
 /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
 .show {display:block;}
@@ -272,7 +290,7 @@ textarea {
 #neededBy { display: block; }
 .subject {
 	overflow: hidden;
-	width: 89%;
+	width: 70%;
   float: left;
   color: #FFF;
   font-size: 2rem;
@@ -322,9 +340,13 @@ textarea {
 /* Larger than tablet */
 @media (min-width: 750px) {
 	#neededBy { display: block; }
+.tags-summary { display: block; font-size: 1em; margin-left: 10px; }
+a.tags-summary { color: #00BFFF; text-decoration: none; float:left;}
+a.tags-summary:hover { color: #00FFFF; text-shadow: 0px 0px 23px #FFF; }
+.tags-details { display: none; }
 .subject {
 	overflow: hidden;
-	width: 89%;
+	width: 70%;
   float: left;
   color: #FFF;
   font-size: 2rem;
diff --git a/punch_list/public/index.html b/punch_list/public/index.html
index 39b5f1f..677817e 100644
--- a/punch_list/public/index.html
+++ b/punch_list/public/index.html
@@ -72,14 +72,13 @@
 			</div>
 
 			<div id=middle class="column-middle">
-		<div class="dropdown u-pull-right" id=mainMenuWrapper>
+		<div class="dropdown menu" id=mainMenuWrapper>
 			<button class="top dropbtn" onclick=mainMenuDrop() id=mainMenu>Menu</button>
 			<div id=mainMenuDropdown class="dropdown-content punch-default">
 				<a href="#" onclick="genEventForm()">New Punch Item</a>
 				<a href="#" onclick="genDaily()">Generate Daily Punches</a>
-				<a href="#" onclick="genWeekly()">Generate Weekly Punches</a>
-				<a href="#" onclick="getJson(genList)">Refresh</a>
-				<a href="https://thelinux.pro/broadcast_timer">Broadcast Timer</a>
+				<!-- <a href="#" onclick="genWeekly()">Generate Weekly Punches</a> -->
+				<!-- <a href="https://thelinux.pro/broadcast_timer">Broadcast Timer</a> -->
 			</div>
 		</div>
 				<div id="editPunch" class="listWrapper"></div>
diff --git a/punch_list/public/js/myFirebase.js b/punch_list/public/js/myFirebase.js
index fb22af0..9bb99eb 100644
--- a/punch_list/public/js/myFirebase.js
+++ b/punch_list/public/js/myFirebase.js
@@ -473,15 +473,15 @@ function addPunchElement(childKey, childData) {
 	if (childData.progress.toLowerCase() != "done") {
 		genPunchListItem('<li id="' + childKey + '" class="' + style + '"></li>', '#sortable');
 		genPunchListItem('<div id="div-portlet' + childKey + '" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>', '#' + childKey);
-		genPunchListItem('<div id="priority-container' + childKey + '" class="priority container one column"></div>', '#div-portlet' + childKey);
-		genPunchListItem('<div id="details-container' + childKey + '" class="container eleven columns details-container"></div>', '#div-portlet' + childKey);
+		genPunchListItem('<div id="priority-container' + childKey + '" class="priority-container"></div>', '#div-portlet' + childKey);
+		genPunchListItem('<div id="details-container' + childKey + '" class="container details-container"></div>', '#div-portlet' + childKey);
 		genPunchListItem('<div id="priority' + childKey + '" class="twelve columns priority">' + childData.priority + '</div>', '#priority-container' + childKey);
-		genPunchListItem('<div id="subject' + childKey + '" class="ten columns subject">' + childData.subject + '</div><div id="detail-link' + childKey + '" class="two columns"><a style="margin-left: 10px;" class="punch-default" href="#" onclick=toggleElement(\'backlog-list-content' + childKey + '\')>details</a></div>', '#details-container' + childKey);
+		genPunchListItem('<div id="subject' + childKey + '" class="subject">' + childData.subject + '</div><div id="detail-link' + childKey + '" class="two columns u-pull-right"><a style="margin-left: 10px;" class="punch-default u-pull-right" href="#" onclick=toggleElement(\'backlog-list-content' + childKey + '\')>details</a></div>', '#details-container' + childKey);
 		genPunchListItem('<div id="details-col-one' + childKey + '" class="three columns"></div>', '#details-container' + childKey);
 		genPunchListItem('<div id="progress' + childKey +'" class="twelve columns ' + style + '">' + childData.progress + '</div>', '#details-col-one' + childKey);
 		genPunchListItem('<div class="twelve columns punch-default" style="color: lime" id="timer' + childKey + '"></div>', '#details-col-one' + childKey);
 		// status dropdown
-		genPunchListItem('<div id="dropdown-wrapper' + childKey + '" class="dropdown two columns"></div>', '#details-container' + childKey);
+		genPunchListItem('<div id="dropdown-wrapper' + childKey + '" class="dropdown"></div>', '#details-container' + childKey);
 		genPunchListItem('<img class="top dropbtn" onclick=progressMenuDrop("' + childKey + '") src="images/down-carrot.png">', '#dropdown-wrapper' + childKey);
 		genPunchListItem('<div id="progressDropdown' + childKey + '" class="dropdown-content punch-default"></div>', '#dropdown-wrapper' + childKey);
 		genPunchListItem('<a href="#" onClick=mkPunchNew("' + childKey + '")>New</a>', '#progressDropdown' + childKey);
@@ -489,8 +489,8 @@ function addPunchElement(childKey, childData) {
 		genPunchListItem('<a href="#" onClick=waitingPunch("' + childKey + '")>Waiting</a>', '#progressDropdown' + childKey);
 		genPunchListItem('<a href="#" onClick=completePunch("' + childKey + '")>Finish</a>', '#progressDropdown' + childKey);
 
-		genPunchListItem('<div id="details-col-three' + childKey + '" class="five columns punch-default"></div>', '#details-container' + childKey);
-		genPunchListItem('<div id="details-col-five' + childKey + '" class="three columns punch-default"></div>', '#details-container' + childKey);
+		genPunchListItem('<div id="details-col-three' + childKey + '" class="needby-container punch-default"></div>', '#details-container' + childKey);
+		genPunchListItem('<div id="details-col-five' + childKey + '" class="five columns punch-default"></div>', '#details-container' + childKey);
 		if ( childData.needByDate != null && childData.needByDate != undefined && childData.needByDate != '' ) {
 			genPunchListItem('<div id="neededBy' + childKey + '" class="twelve columns punch-default"></div>', '#details-col-three' + childKey);
 			genPunchListItem('<div id="needby-data' + childKey + '">' + formatDate(childData.needByDate) + '</div>', '#neededBy' + childKey);
@@ -505,20 +505,27 @@ function addPunchElement(childKey, childData) {
 			}
 		}
 
-		if ( childData.tags != undefined ) {
-			var tags = childData.tags;
-			var i;
-			for (i=0; i<tags.length; i++) {
-				tagData = tags[i];
-				genPunchListItem('<a class="punch-default" href="#" onClick=tagFilter("' + tagData + '")>' + tagData + ', </a>', '#details-col-five' + childKey);
-			}
-		}
 		genPunchListItem('<div id="backlog-list-content' + childKey + '" class="backlog-list-content details-container"><div id="punch-list-backlog-details' + childKey + '" class="punch-list-backlog-details"></div></div>', '#div-portlet' + childKey) ;
 		if ( childData.startTime != undefined ) {
 			genPunchListItem('<div id="startTime" class="three columns punch-default started">' + formatDate(childData.startTime) + '</div>', '#punch-list-backlog-details' + childKey);
 			var time = new Date(childData.startTime).getTime();
 			createTimer("timer" + childKey, time);
 		}
+		if ( childData.tags != undefined ) {
+			var tags = childData.tags;
+			genPunchListItem('<div id="tags-container-summary' + childKey + '" class="twelve columns"></div>', '#details-col-five' + childKey);
+			genPunchListItem('<div id="tags-container' + childKey + '" class="twelve columns"></div>', '#punch-list-backlog-details' + childKey);
+			genPunchListItem('<div class="two columns tags-details">Tags: </div>', '#tags-container' + childKey);
+			genPunchListItem('<div id="tags-column' + childKey + '" class="nine columns tags-details"></div>', '#tags-container' + childKey);
+			var i;
+			for (i=0; i<tags.length; i++) {
+				tagData = tags[i];
+				if ((tags.length - 1) === i) { var comma = ' '; }
+				else { var comma = ','; }
+				genPunchListItem('<a id="tags-summary' + childKey + '" class="punch-default tags-summary" href="#" onClick=tagFilter("' + tagData + '")>' + tagData + comma + '</a>', '#tags-container-summary' + childKey);
+				genPunchListItem('<a id="tags-details' + childKey + '" class="tags-details" href="#" onClick=tagFilter("' + tagData + '")>' + tagData + comma + '</a>', '#tags-column' + childKey);
+			}
+		}
 		if ( childData.notes != "" ) {
 			genPunchListItem('<textarea class="edit-text-box" readonly>' + childData.notes + '</textarea><br />', '#punch-list-backlog-details' + childKey);
 		}