From 8526f09a9d83955f25002102bf97506ff94f50ad Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Mon, 30 Sep 2024 20:27:09 -0400
Subject: [PATCH] weekly promoted place

Highlight the first place in the list as the weekly promoted place
---
 scripts/system/places/places.css  | 12 ++++++++++++
 scripts/system/places/places.html | 26 ++++++++++++++++++++------
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/scripts/system/places/places.css b/scripts/system/places/places.css
index 6b52dc22399..37eac2d0029 100644
--- a/scripts/system/places/places.css
+++ b/scripts/system/places/places.css
@@ -487,6 +487,10 @@ div.placeEntry {
     text-align: center;
 }
 
+div.placeEntryLargeSize {
+    height: 220px;
+}
+
 div.addMsEntry {
     width: 85%;
     height: 38px;
@@ -625,6 +629,10 @@ div.placeDetail-event {
     border: 0px;
 }
 
+.promotedblur {
+    backdrop-filter: blur(0px);
+}
+
 .placeTitle {
   color: #ffffff;
   font-size: 21px;
@@ -633,6 +641,10 @@ div.placeDetail-event {
   text-shadow: 1px 1px 3px #000000;
 }
 
+.placeTitlePromoted {
+    font-size: 28px;
+    text-shadow: 1px 1px 4px #000000;
+}
 .placeTable {
     width: 100%;
 }
diff --git a/scripts/system/places/places.html b/scripts/system/places/places.html
index 5dbb11b9075..980d8f0f1fa 100644
--- a/scripts/system/places/places.html
+++ b/scripts/system/places/places.html
@@ -415,8 +415,12 @@
                                         } else if (placeRecords[i].category === "Z") {
                                             moreStyle = " style='background-color: #364a6e;'";
                                         }
-
-                                        var shortenedDescription = placeRecords[i].description.substr(0, 55);
+                                        
+                                        var maxCharNumber = 55;
+                                        if (currentListFormat === "PLACES" && i === 0) {
+                                            maxCharNumber = 180;
+                                        }
+                                        var shortenedDescription = placeRecords[i].description.substr(0, maxCharNumber);
                                         if (shortenedDescription.slice(-1) !== ".") {
                                             shortenedDescription = shortenedDescription + "...";
                                         }
@@ -429,21 +433,31 @@
                                             placeUrl = "file:///~/serverless/tutorial.json";
                                         }
 
+                                        var promotedblur = "";
+                                        var promoted = "";
+                                        var placeTitlePromoted = "";
+                                        var prompotionDescHeight = "";
+                                        if (currentListFormat === "PLACES" && i === 0) {
+                                            promotedblur = " promotedblur";
+                                            promoted = " placeEntryLargeSize";
+                                            placeTitlePromoted = " placeTitlePromoted";
+                                            prompotionDescHeight = " style='height: 175px; '";
+                                        }
                                         //Add the place to the list
 
-                                        formatedList = formatedList + "<div class = 'placeEntry' id='place-" + placeRecords[i].id + "'" + moreStyle + "><div class = 'blur'>";
+                                        formatedList = formatedList + "<div class = 'placeEntry" + promoted + "' id='place-" + placeRecords[i].id + "'" + moreStyle + "><div class = 'blur" + promotedblur + "'>";
                                         formatedList = formatedList + "<table class='placeTable'>";
                                         formatedList = formatedList + "    <tr valign = 'top'>";
                                         formatedList = formatedList + "        <td width='2%'></td>";                                
-                                        formatedList = formatedList + "        <td align='left' width='75%' onclick='teleport(" + '"' + placeRecords[i].id + '"' + ", " + '"' + placeUrl + '"' + "); return false;'><a class= 'placeTitle' href='javascript:void(0)' onclick='teleport(" + '"' + placeRecords[i].id + '"' + ", " + '"' + placeUrl + '"' + "); return false;'>" + placeRecords[i].name + "</a></td>";
+                                        formatedList = formatedList + "        <td align='left' width='75%' onclick='teleport(" + '"' + placeRecords[i].id + '"' + ", " + '"' + placeUrl + '"' + "); return false;'><a class= 'placeTitle" + placeTitlePromoted + "' href='javascript:void(0)' onclick='teleport(" + '"' + placeRecords[i].id + '"' + ", " + '"' + placeUrl + '"' + "); return false;'>" + placeRecords[i].name + "</a></td>";
                                         if (placeRecords[i].category !== "Z") {
                                             formatedList = formatedList + "        <td align='right' ><span style='padding: 0%; cursor: pointer;' onclick='openDetail(" + '"' + placeRecords[i].id + '"' + ")'><img src='icons/info.png' width='26' height='26' draggable='false'></span></td>";
                                         }
                                         formatedList = formatedList + "    </tr>";
                                         formatedList = formatedList + "</table>";
                                         if (placeRecords[i].category !== "Z") {
-                                            formatedList = formatedList + "<table class='placeTable'>";
-                                            formatedList = formatedList + "    <tr>";
+                                            formatedList = formatedList + "<table class='placeTable'" + prompotionDescHeight + ">";
+                                            formatedList = formatedList + "    <tr valign = 'bottom'>";
                                             formatedList = formatedList + "        <td width='2%'></td>";
                                             formatedList = formatedList + "        <td align='left' width='88%' class='place-entry-description' onclick='teleport(" + '"' + placeRecords[i].id + '"' + ", " + '"' + placeUrl + '"' + "); return false;'>" + shortenedDescription + "</td>";
                                             formatedList = formatedList + "        <td align='right' class='presenceOfLife-" + placeRecords[i].accessStatus + "'>&#9603;</td>";